diff options
| -rw-r--r-- | public/app.js | 19 | ||||
| -rw-r--r-- | public/game.js | 10 | ||||
| -rw-r--r-- | public/index.css | 5 | ||||
| -rw-r--r-- | public/index.html | 132 |
4 files changed, 86 insertions, 80 deletions
diff --git a/public/app.js b/public/app.js index bbb8d4b..a8db6b2 100644 --- a/public/app.js +++ b/public/app.js @@ -1,16 +1,15 @@ let board = [ [-3, -5, -4, -2, -1, -4, -5, -3], [-6, -6, -6, -6, -6, -6, -6, -6], + [0, 0, -5, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 2, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [6, 6, 6, 6, 6, 6, 6, 6], [3, 5, 4, 2, 1, 4, 5, 3], ] - -//console.log(move(board, 1, 0)) +//console.log(move(board, 4, 3)) //move(board, 3, 3) function move(board, y, x) { @@ -45,10 +44,8 @@ function pawn_move(board, y, x) { if (board[y - 2][x] == 0) { moves.push([y - 2, x]) } - } else if (color && y != 0) { - if (board[y - 1][x] == 0) { - moves.push([y - 1, x]) - } + } else if (color && y != 0 && board[y - 1][x] == 0) { + moves.push([y - 1, x]) } return moves @@ -60,10 +57,8 @@ function pawn_move(board, y, x) { if (board[y + 2][x] == 0) { moves.push([y + 2, x]) } - } else if (color && y != 7) { - if (board[y + 1][x] == 0) { - moves.push([y + 1, x]) - } + } else if (color && y != 7 && board[y + 1][x] == 0) { + moves.push([y + 1, x]) } return moves } diff --git a/public/game.js b/public/game.js index 05ddc66..e5740de 100644 --- a/public/game.js +++ b/public/game.js @@ -3,7 +3,7 @@ const alphabet = 'abcdefgh' for (let i = 0; i < 8; i++) { for (let j = 0; j < 8; j++) { - let square = document.getElementById(`${alphabet.charAt(j)}${i + 1}`) + let square = document.getElementById(`${alphabet.charAt(j)}${8 - i}`) let piece = document.createElement('p') piece.classList.add('piece') @@ -73,9 +73,9 @@ for (let i = 0; i < 8; i++) { } } -let squares = document.getElementsByClassName('box') +let squares = document.getElementsByClassName('square') -let previously_highlighted_squares = ["dummy"] +let previously_highlighted_squares = ['dummy'] for (let i = 0; i < squares.length; i++) { @@ -87,15 +87,17 @@ for (let i = 0; i < squares.length; i++) { square.push(8 - id.charAt(1)) square.push(id.charAt(0).charCodeAt(0) - 97) + let moves = move(board, square[0], square[1]) for (let i = 0; i < previously_highlighted_squares.length; i++) { + //document.getElementById(previously_highlighted_squares[i]).style.backgroundColor = 'transparent' document.getElementById(previously_highlighted_squares[i]).classList.remove('highlight') } - for (let i = 0; i < moves.length; i++) { + //document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`).style.backgroundColor = 'yellow' document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`).classList.add('highlight') previously_highlighted_squares.push(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`) } diff --git a/public/index.css b/public/index.css index 0b9d6da..7fa778a 100644 --- a/public/index.css +++ b/public/index.css @@ -21,6 +21,7 @@ .white{ background-color: #eaead2; + /*background-color: #4b7299; */ color: #4b7299; } @@ -55,3 +56,7 @@ body{ .highlight { background-color: yellow; } + +/*.wp {*/ +/* color: white;*/ +/*}*/ diff --git a/public/index.html b/public/index.html index 476efe5..20bda5a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,116 +8,120 @@ </head> <body> <div id="dummy"></div> + + + + <div class="chess-board"> <div> - <div id="a8" class="box white"> + <div id="a8" class="box white square"> <div class="top-corner">8</div> </div> - <div id="a7" class="box black"> + <div id="a7" class="box black square"> <div class="top-corner">7</div> </div> - <div id="a6" class="box white"> + <div id="a6" class="box white square"> <div class="top-corner">6</div> </div> - <div id="a5" class="box black"> + <div id="a5" class="box black square"> <div class="top-corner">5</div> </div> - <div id="a4" class="box white"> + <div id="a4" class="box white square"> <div class="top-corner">4</div> </div> - <div id="a3" class="box black"> + <div id="a3" class="box black square"> <div class="top-corner">3</div> </div> - <div id="a2" class="box white"> + <div id="a2" class="box white square"> <div class="top-corner">2</div> </div> - <div id="a1" class="box black"> + <div id="a1" class="box black square"> <div class="top-corner">1</div> <div class="bottom-corner">a</div> </div> </div> <div> - <div id="b8" class="box black"></div> - <div id="b7" class="box white"></div> - <div id="b6" class="box black"></div> - <div id="b5" class="box white"></div> - <div id="b4" class="box black"></div> - <div id="b3" class="box white"></div> - <div id="b2" class="box black"></div> - <div id="b1" class="box white"> + <div id="b8" class="box black square"></div> + <div id="b7" class="box white square"></div> + <div id="b6" class="box black square"></div> + <div id="b5" class="box white square"></div> + <div id="b4" class="box black square"></div> + <div id="b3" class="box white square"></div> + <div id="b2" class="box black square"></div> + <div id="b1" class="box white square"> <div class="bottom-corner">b</div> </div> </div> <div> - <div id="c8" class="box white"></div> - <div id="c7" class="box black"></div> - <div id="c6" class="box white"></div> - <div id="c5" class="box black"></div> - <div id="c4" class="box white"></div> - <div id="c3" class="box black"></div> - <div id="c2" class="box white"></div> - <div id="c1" class="box black"> + <div id="c8" class="box white square"></div> + <div id="c7" class="box black square"></div> + <div id="c6" class="box white square"></div> + <div id="c5" class="box black square"></div> + <div id="c4" class="box white square"></div> + <div id="c3" class="box black square"></div> + <div id="c2" class="box white square"></div> + <div id="c1" class="box black square"> <div class="bottom-corner">c</div> </div> </div> <div> - <div id="d8" class="box black"></div> - <div id="d7" class="box white"></div> - <div id="d6" class="box black"></div> - <div id="d5" class="box white"></div> - <div id="d4" class="box black"></div> - <div id="d3" class="box white"></div> - <div id="d2" class="box black"></div> - <div id="d1" class="box white"> + <div id="d8" class="box black square"></div> + <div id="d7" class="box white square"></div> + <div id="d6" class="box black square"></div> + <div id="d5" class="box white square"></div> + <div id="d4" class="box black square"></div> + <div id="d3" class="box white square"></div> + <div id="d2" class="box black square"></div> + <div id="d1" class="box white square"> <div class="bottom-corner">d</div> </div> </div> <div> - <div id="e8" class="box white"></div> - <div id="e7" class="box black"></div> - <div id="e6" class="box white"></div> - <div id="e5" class="box black"></div> - <div id="e4" class="box white"></div> - <div id="e3" class="box black"></div> - <div id="e2" class="box white"></div> - <div id="e1" class="box black"> + <div id="e8" class="box white square"></div> + <div id="e7" class="box black square"></div> + <div id="e6" class="box white square"></div> + <div id="e5" class="box black square"></div> + <div id="e4" class="box white square"></div> + <div id="e3" class="box black square"></div> + <div id="e2" class="box white square"></div> + <div id="e1" class="box black square"> <div class="bottom-corner">e</div> </div> </div> <div> - <div id="f8" class="box black"></div> - <div id="f7" class="box white"></div> - <div id="f6" class="box black"></div> - <div id="f5" class="box white"></div> - <div id="f4" class="box black"></div> - <div id="f3" class="box white"></div> - <div id="f2" class="box black"></div> - <div id="f1" class="box white"> + <div id="f8" class="box black square"></div> + <div id="f7" class="box white square"></div> + <div id="f6" class="box black square"></div> + <div id="f5" class="box white square"></div> + <div id="f4" class="box black square"></div> + <div id="f3" class="box white square"></div> + <div id="f2" class="box black square"></div> + <div id="f1" class="box white square"> <div class="bottom-corner">f</div> </div> </div> <div> - <div id="g8" class="box white"></div> - <div id="g7" class="box black"></div> - <div id="g6" class="box white"></div> - <div id="g5" class="box black"></div> - <div id="g4" class="box white"></div> - <div id="g3" class="box black"></div> - <div id="g2" class="box white"></div> - <div id="g1" class="box black"> + <div id="g8" class="box white square"></div> + <div id="g7" class="box black square"></div> + <div id="g6" class="box white square"></div> + <div id="g5" class="box black square"></div> + <div id="g4" class="box white square"></div> + <div id="g3" class="box black square"></div> + <div id="g2" class="box white square"></div> + <div id="g1" class="box black square"> <div class="bottom-corner">g</div> </div> </div> <div> - <div id="h8" class="box black"></div> - <div id="h7" class="box white"></div> - <div id="h6" class="box black"></div> - <div id="h5" class="box white"></div> - <div id="h4" class="box black"></div> - <div id="h3" class="box white"></div> - <div id="h2" class="box black"></div> - <div id="h1" class="box white"> + <div id="h8" class="box black square"></div> + <div id="h7" class="box white square"></div> + <div id="h6" class="box black square"></div> + <div id="h5" class="box white square"></div> + <div id="h4" class="box black square"></div> + <div id="h3" class="box white square"></div> + <div id="h2" class="box black square"></div> + <div id="h1" class="box white square"> <div class="bottom-corner">h</div> </div> </div> |