diff options
| -rw-r--r-- | .vscode/settings.json | 3 | ||||
| -rw-r--r-- | index.css | 38 | ||||
| -rw-r--r-- | index.html | 162 | ||||
| -rw-r--r-- | pawns_move.js | 7 |
4 files changed, 136 insertions, 74 deletions
diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +}
\ No newline at end of file @@ -1,13 +1,32 @@ +*{ + margin: 0; + padding: 0; +} + +.box{ + height: 76px; + width: 76px; + position: relative; +} +.top-corner{ + padding: 1px; + position: absolute; +} +.bottom-corner{ + padding: 1px; + position: absolute; + bottom: 2px; + right: 2px; +} + .white{ - background-color: antiquewhite; - height: 100px; - width: 100px; + background-color: #eaead2; + color: #4b7299; } -.black{ - height: 100px; - width: 100px; - background-color: brown; +.black{ + background-color: #4b7299; + color: #eaead2; } body{ @@ -16,11 +35,12 @@ body{ display: flex; justify-content: center; align-items: center; + margin: 1px; } .chess-board{ - width: 800px; - height: 800px; + width: 608px; + height: 608px; display: grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); @@ -10,86 +10,118 @@ <body> <div class="chess-board"> <div> - <div id="a8" class="white square"></div> - <div id="a7" class="black square"></div> - <div id="a6" class="white square"></div> - <div id="a5" class="black square"></div> - <div id="a4" class="white square"></div> - <div id="a3" class="black square"></div> - <div id="a2" class="white square"></div> - <div id="a1" class="black square"></div> + + <div id="a8" class="box white"> + <div class="top-corner">8</div> + </div> + <div id="b8" class="box black"> + <div class="top-corner">7</div> + </div> + <div id="c8" class="box white"> + <div class="top-corner">6</div> + </div> + <div id="d8" class="box black"> + <div class="top-corner">5</div> + </div> + <div id="e8" class="box white"> + <div class="top-corner">4</div> + </div> + <div id="f8" class="box black"> + <div class="top-corner">3</div> + </div> + <div id="g8" class="box white"> + <div class="top-corner">2</div> + </div> + <div id="h8" class="box black"> + <div class="top-corner">1</div> + <div class="bottom-corner">a</div> + </div> </div> <div> - <div id="b8" class="black square"></div> - <div id="b7" class="white square"></div> - <div id="b6" class="black square"></div> - <div id="b5" class="white square"></div> - <div id="b4" class="black square"></div> - <div id="b3" class="white square"></div> - <div id="b2" class="black square"></div> - <div id="b1" class="white square"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"> + <div class="bottom-corner">b</div> + </div> </div> <div> - <div id="c8" class="white square"></div> - <div id="c7" class="black square"></div> - <div id="c6" class="white square"></div> - <div id="c5" class="black square"></div> - <div id="c4" class="white square"></div> - <div id="c3" class="black square"></div> - <div id="c2" class="white square"></div> - <div id="c1" class="black square"></div> + <div id="a8" class="box white"></div> + <div id="b8" class="box black"></div> + <div id="c8" class="box white"></div> + <div id="d8" class="box black"></div> + <div id="e8" class="box white"></div> + <div id="f8" class="box black"></div> + <div id="g8" class="box white"></div> + <div id="h8" class="box black"> + <div class="bottom-corner">c</div> + </div> </div> <div> - <div id="d8" class="black square"></div> - <div id="d7" class="white square"></div> - <div id="d6" class="black square"></div> - <div id="d5" class="white square"></div> - <div id="d4" class="black square"></div> - <div id="d3" class="white square"></div> - <div id="d2" class="black square"></div> - <div id="d1" class="white square"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"> + <div class="bottom-corner">d</div> + </div> </div> <div> - <div id="e8" class="white square"></div> - <div id="e7" class="black square"></div> - <div id="e6" class="white square"></div> - <div id="e5" class="black square"></div> - <div id="e4" class="white square"></div> - <div id="e3" class="black square"></div> - <div id="e2" class="white square"></div> - <div id="e1" class="black square"></div> + <div id="a8" class="box white"></div> + <div id="b8" class="box black"></div> + <div id="c8" class="box white"></div> + <div id="d8" class="box black"></div> + <div id="e8" class="box white"></div> + <div id="f8" class="box black"></div> + <div id="g8" class="box white"></div> + <div id="h8" class="box black"> + <div class="bottom-corner">e</div> + </div> </div> <div> - <div id="f8" class="black square"></div> - <div id="f7" class="white square"></div> - <div id="f6" class="black square"></div> - <div id="f5" class="white square"></div> - <div id="f4" class="black square"></div> - <div id="f3" class="white square"></div> - <div id="f2" class="black square"></div> - <div id="f1" class="white square"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"> + <div class="bottom-corner">f</div> + </div> </div> <div> - <div id="g8" class="white square"></div> - <div id="g7" class="black square"></div> - <div id="g6" class="white square"></div> - <div id="g5" class="black square"></div> - <div id="g4" class="white square"></div> - <div id="g3" class="black square"></div> - <div id="g2" class="white square"></div> - <div id="g1" class="black square"></div> + <div id="a8" class="box white"></div> + <div id="b8" class="box black"></div> + <div id="c8" class="box white"></div> + <div id="d8" class="box black"></div> + <div id="e8" class="box white"></div> + <div id="f8" class="box black"></div> + <div id="g8" class="box white"></div> + <div id="h8" class="box black"> + <div class="bottom-corner">g</div> + </div> </div> <div> - <div id="h8" class="black square"></div> - <div id="h7" class="white square"></div> - <div id="h6" class="black square"></div> - <div id="h5" class="white square"></div> - <div id="h4" class="black square"></div> - <div id="h3" class="white square"></div> - <div id="h2" class="black square"></div> - <div id="h1" class="white square"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"></div> + <div id="" class="box black"></div> + <div id="" class="box white"> + <div class="bottom-corner">h</div> + </div> </div> - </div> + </div> <script src="./game.js"></script> </body> </html> diff --git a/pawns_move.js b/pawns_move.js new file mode 100644 index 0000000..f304608 --- /dev/null +++ b/pawns_move.js @@ -0,0 +1,7 @@ +function pawn_move(board, y, x){ + let moves =[]; + // * if pawn at row 1 or at row 6 it has to choice + if(x<board.length && x >-1 && y<board.length && y>-1){ + moves.push() + } +}
\ No newline at end of file |