-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (84 loc) · 3.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
<script type='text/javascript'>
// On tente de charger l'image au plus tôt !
var chessSymbols = new Image();
chessSymbols.src = 'chess.png';
chessSymbols.onload = function() {
console.info("Chess symbols loaded !");
// dessine la grille, une fois l'image chargée
drawGrid(0,0, canvas.width, canvas.height, 8, 8);
};
</script>
</head>
<body>
<h1>Deep blue version JS</h1>
<center><canvas id='screen' width='400' height='400' >JavaScript est nécessaire ...</canvas></center>
<script type='text/javascript'>
var canvas = document.getElementById("screen");
var gfx = canvas.getContext("2d");
var Piece = function(name, color, line, column){
this.name = name || 'empty'; // si il n'y a pas de paramètre 'name', utiliser 'empty'
this.line = line || 0;
this.column = column || 0;
this.color = color || 'grey';
this.pieceId = undefined;
};
Piece.prototype.orientation = function() {
return (this.color === 'white') ? +1 : -1;
}
var Pawn = function(color, line, column) {
Piece.prototype.constructor.call(this, 'Pawn', color, line, column);
this.pieceId = [[0, 5], [480, 5]];
}
Pawn.prototype = new Piece();
var createBoard = function(nbLine, nbColumn)
{
}// avec des pieces vide
var isEmpty = function(lig, col);
var put = function(lig, col, piece);
var board = createBoard(8, 8);
var initBoard = function(); // avec les pièces du jeu
var convertCoordinates = function(ligPixel, colPixel) {
var lig = Math.ceil(ligPixel / (canvas.height/8)) - 1;
var col = Math.ceil(colPixel / (canvas.width /8)) - 1;
return [lig, col];
};
// liste des coordonnées des cellules libres accessibles par la pièce actuellement
// sélectionnée par l'utilisateur
var highlightedCells = [];
// on prend la coordonnée de la cellule à dessiner et une couleur correspondant
// au carré dessiné dans la case si elle ne contient pas de pièce (gris si la
// case n'est pas sélectionnée pour représenter un déplacement valide et jaune sinon)
var drawCell = function(coord, color);
var highlight = function(on);
canvas.addEventListener("mousedown", mouseClicked, false);
//var mouseClicked = function(event) { // Pourquoi cela ne fonctionne pas avec var ?!
function mouseClicked(event) {
var ligCoord = event.pageY - canvas.offsetTop;
var colCoord = event.pageX - canvas.offsetLeft;
var coord = convertCoordinates(ligCoord, colCoord);
console.info(coord);
if (highlightedCells.length > 0) {
highlight(false);
highlightedCells = [];
}
var piece = board[coord[0]][coord[1]];
if (piece.name !== '.') {
var moves = piece.getMoves();
highlightedCells.push(moves);
highlight(true);
} else {
// TODO: if empty and highlighted, move the piece !
doMove();
}
}
// initialise le plateau en déposant les pièces de deux joueurs au début de la partie
initBoard();
// Pour dessiner le plateau, on spécifie le coin supérieur gauche, la
// largeur et la hauteur. Dans cette fonction, on appelle drawCell
// pour dessiner une cellule à une coordonnée donnée.
var drawGrid = function(x, y, width, height, nbLig, nbCol) {}
</script>
</body>
</html>