I've created a chessboard model in JavaScript that will eventually iterate through some moves of a championship game.
I've created a board object and a piece constructor. I've also created all the pieces with their correct position on a typical chessboard by rank and file. I don't think I've created my move method correctly in the piece constructor though, which would just move the pieces on the board. Is this the best way to simulate moving pieces you think? I want the move method to push the moves onto my empty game array and eventually I want to be able to move back and forth on the array.
This is going to be hooked up to the chessboard I've already made with the HTML and CSS code below if you care to look at it. (Some of the boilerplate CSS has been omitted.)
(function(window) {
var board = {
file: ["a", "b", "c", "d", "e", "f", "g", "h"],
rank: [1, 2, 3, 4, 5, 6, 7, 8]
};
var piece = function (filePlace, rankPlace) {
this.file = board.file[filePlace - 1];
this.rank = board.rank[rankPlace - 1];
this.move = function (a, b) {
this.file = board.file[a - 1];
this.rank = board.rank[b - 1];
};
};
var whiteRook1 = new piece(1, 1);
var whiteRook2 = new piece(8, 1);
var whiteKnight1 = new piece(2, 1);
var whiteKnight2 = new piece(7, 1);
var whiteBishop1 = new piece(3, 1);
var whiteBishop2 = new piece(6, 1);
var whiteQueen = new piece(4, 1);
var whiteKing = new piece(5, 1);
var whitePawn1 = new piece(1, 2);
var whitePawn2 = new piece(2, 2);
var whitePawn3 = new piece(3, 2);
var whitePawn4 = new piece(4, 2);
var whitePawn5 = new piece(5, 2);
var whitePawn6 = new piece(6, 2);
var whitePawn7 = new piece(7, 2);
var whitePawn8 = new piece(8, 2);
var blackRook1 = new piece(1, 8);
var blackRook2 = new piece(8, 8);
var blackKnight1 = new piece(2, 8);
var blackKnight2 = new piece(7, 8);
var blackBishop1 = new piece(3, 8);
var blackBishop2 = new piece(6, 8);
var blackQueen = new piece(4, 8);
var blackKing = new piece(5, 8);
var blackPawn1 = new piece(1, 7);
var blackPawn2 = new piece(2, 7);
var blackPawn3 = new piece(3, 7);
var blackPawn4 = new piece(4, 7);
var blackPawn5 = new piece(5, 7);
var blackPawn6 = new piece(6, 7);
var blackPawn7 = new piece(7, 7);
var blackPawn8 = new piece(8, 7);
var game = [];
window.chess = {
};
})(window);
body {
background-color: darkgrey;
}
.container {
width: 80%;
margin: 3em auto 3em auto;
min-width: 1in;
max-width: 6in;
}
.chessboard .row {
margin: 0; padding: 0;
position: relative;
clear: both;
}
.chessboard .row::before,
.chessboard .row::after {
font-size: 300%;
position: absolute;
}
.chessboard .row::after {
left: 103%;
}
.chessboard .row::before {
right: 103%;
}
.chessboard .rank-8::before, .chessboard .rank-8::after {
content: '8';
}
.chessboard .rank-7::before, .chessboard .rank-7::after {
content: '7';
}
.chessboard .rank-6::before, .chessboard .rank-6::after {
content: '6';
}
.chessboard .rank-5::before, .chessboard .rank-5::after {
content: '5';
}
.chessboard .rank-4::before, .chessboard .rank-4::after {
content: '4';
}
.chessboard .rank-3::before, .chessboard .rank-3::after {
content: '3';
}
.chessboard .rank-2::before, .chessboard .rank-2::after {
content: '2';
}
.chessboard .rank-1::before, .chessboard .rank-1::after {
content: '1';
}
.chessboard .square {
background-color: red;
width: 12.5%;
padding-bottom: 12.5%;
display: inline-block;
float: left;
}
.chessboard .row:nth-child(even) .square:nth-child(even) {
background-color: red;
}
.chessboard .row:nth-child(even) .square:nth-child(odd) {
background-color: lightgray;
}
.chessboard .square:nth-child(even) {
background-color: lightgrey;
}
.chessboard .legend {
display: inline-block;
width: 12.5%;
text-align: center;
float: left;
margin: 0;
padding: 0;
font-size: 300%;
}
nav {
text-align: center;
}
nav button {
font-size: 5ex;
background-color: red;
padding: 0 0.5em 0 0.5em;
border-radius: 20%;
}
.chessboard .row .white::before, .chessboard .row .black::before {
font-size: 300%;
text-align: center;
position: absolute;
width: 12.5%;
line-height: 1.2;
}
.chessboard .row .black.pawn::before, .white.pawn::before {
content: '\265f';
}
.chessboard .row .black.knight::before, .white.knight::before {
content: '\265e';
}
.chessboard .row .black.rook::before, .white.rook::before {
content: '\265c';
}
.chessboard .row .black.queen::before, .white.queen::before {
content: '\265b';
}
.chessboard .row .black.king::before, .white.king::before {
content: '\265a';
}
.chessboard .row .black.bishop::before, .white.bishop::before {
content: '\265d';
}
.chessboard .row .white {
color: white;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TIY Chessboard: Kasparov v Karpov (1984)</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<style>
</style>
<main class="container">
<div class="chessboard">
<section class="rowFileLegend">
<p class="legend">A</p>
<p class="legend">B</p>
<p class="legend">C</p>
<p class="legend">D</p>
<p class="legend">E</p>
<p class="legend">F</p>
<p class="legend">G</p>
<p class="legend">H</p>
</section>
<section class="row rank-8">
<div class="square file-a black rook"></div>
<div class="square file-b black knight"></div>
<div class="square file-c black bishop"></div>
<div class="square file-d black queen"></div>
<div class="square file-e black king"></div>
<div class="square file-f black bishop"></div>
<div class="square file-g black knight"></div>
<div class="square file-h black rook"></div>
</section>
<section class="row rank-7">
<div class="square file-a black pawn"></div>
<div class="square file-b black pawn"></div>
<div class="square file-c black pawn"></div>
<div class="square file-d black pawn"></div>
<div class="square file-e black pawn"></div>
<div class="square file-f black pawn"></div>
<div class="square file-g black pawn"></div>
<div class="square file-h black pawn"></div>
</section>
<section class="row rank-6">
<div class="square file-a"></div>
<div class="square file-b"></div>
<div class="square file-c"></div>
<div class="square file-d"></div>
<div class="square file-e"></div>
<div class="square file-f"></div>
<div class="square file-g"></div>
<div class="square file-h"></div>
</section>
<section class="row rank-5">
<div class="square file-a"></div>
<div class="square file-b"></div>
<div class="square file-c"></div>
<div class="square file-d"></div>
<div class="square file-e"></div>
<div class="square file-f"></div>
<div class="square file-g"></div>
<div class="square file-h"></div>
</section>
<section class="row rank-4">
<div class="square file-a"></div>
<div class="square file-b"></div>
<div class="square file-c"></div>
<div class="square file-d"></div>
<div class="square file-e"></div>
<div class="square file-f"></div>
<div class="square file-g"></div>
<div class="square file-h"></div>
</section>
<section class="row rank-3">
<div class="square file-a"></div>
<div class="square file-b"></div>
<div class="square file-c"></div>
<div class="square file-d"></div>
<div class="square file-e"></div>
<div class="square file-f"></div>
<div class="square file-g"></div>
<div class="square file-h"></div>
</section>
<section class="row rank-2">
<div class="square file-a white pawn"></div>
<div class="square file-b white pawn"></div>
<div class="square file-c white pawn"></div>
<div class="square file-d white pawn"></div>
<div class="square file-e white pawn"></div>
<div class="square file-f white pawn"></div>
<div class="square file-g white pawn"></div>
<div class="square file-h white pawn"></div>
</section>
<section class="row rank-1">
<div class="square file-a white rook"></div>
<div class="square file-b white knight"></div>
<div class="square file-c white bishop"></div>
<div class="square file-d white queen"></div>
<div class="square file-e white king"></div>
<div class="square file-f white bishop"></div>
<div class="square file-g white knight"></div>
<div class="square file-h white rook"></div>
</section>
<section class="rowFileLegend">
<p class="legend">A</p>
<p class="legend">B</p>
<p class="legend">C</p>
<p class="legend">D</p>
<p class="legend">E</p>
<p class="legend">F</p>
<p class="legend">G</p>
<p class="legend">H</p>
</section>
<nav>
<button class="buttons">▶</button>
<button class="buttons">| <</button>
<button class="buttons"><</button>
<button class="buttons">></button>
<button class="buttons">> |</button>
</nav>
</div>
</main>
</body>
</html>