Skip to content

Instantly share code, notes, and snippets.

@rahul1346

rahul1346/checkers.js

Created December 16, 2014 06:36
Show Gist options
  • Save rahul1346/6d3d0705ca93e414bd04 to your computer and use it in GitHub Desktop.
Save rahul1346/6d3d0705ca93e414bd04 to your computer and use it in GitHub Desktop.
Download ZIP
Checkers game for
Raw
checkers.js
var board, currentPlayer;
var resetBoard = function () {
board = [
[' X ', 'wht', ' X ', 'wht', ' X ', 'wht', ' X ', 'wht'],
['wht', ' X ', 'wht', ' X ', 'wht', ' X ', 'wht', ' X '],
[' X ', 'wht', ' X ', 'wht', ' X ', 'wht', ' X ', 'wht'],
[' X ', ' X ', ' X ', ' X ', ' X ', ' X ', ' X ', ' X '],
[' X ', ' X ', ' X ', ' X ', ' X ', ' X ', ' X ', ' X '],
['red', ' X ', 'red', ' X ', 'red', ' X ', 'red', ' X '],
[' X ', 'red', ' X ', 'red', ' X ', 'red', ' X ', 'red'],
['red', ' X ', 'red', ' X ', 'red', ' X ', 'red', ' X ']
];
currentPlayer = 'wht'
$(document).trigger('boardChange', board);
}
var attemptMove = function (row1, col1, row2, col2) {
if (board[row1][col1] == ' X ') {
$(document).trigger('invalidMove', "What are you trying to move?");
return false;
} else if (board[row1][col1] != currentPlayer) {
$(document).trigger('invalidMove', "That's not your piece");
return false;
}
if (board[row2][col2] != ' X ') {
$(document).trigger('invalidMove', "There's already a piece at the destination");
return false;
}
var direction = (currentPlayer == 'red') ? -1 : 1;
var enemy = (currentPlayer == 'red') ? 'wht' : 'red';
if (row1 + direction == row2 && (col1 + 1 == col2 || col1 - 1 == col2)) {
makeMove(row1, col1, row2, col2);
return true;
} else if (row1 + direction * 2 == row2 &&
(col1 + 2 == col2 || col1 - 2 == col2)) {
var midRow = row1 + direction;
var midCol = col1 + (col2 - col1) / 2;
if (board[midRow][midCol] == enemy) {
makeMove(row1, col1, row2, col2);
removePiece(midRow, midCol);
return true;
} else {
$(document).trigger('invalidMove', "That's just not a valid move");
return false;
}
// call proper methods
} else {
$(document).trigger('invalidMove', "That's just not a valid move");
return false;
}
};
Raw
index.html
<html>
<head>
<script src="./vendor/jquery-1.10.2.min.js"></script>
<script src="./src/checkers.js"></script>
<script src="./src/jquery_driver.js"></script>
<link rel="stylesheet" type="text/css" href="./css/app.css">
</head>
<body>
<span class="row row-a">
<span class="col col-0 empty"></span>
<span class="col col-1"></span>
<span class="col col-2 empty"></span>
<span class="col col-3"></span>
<span class="col col-4 empty"></span>
<span class="col col-5"></span>
<span class="col col-6 empty"></span>
<span class="col col-7"></span>
</span>
<br>
<span class="row row-b">
<span class="col col-0"></span>
<span class="col col-1 empty"></span>
<span class="col col-2"></span>
<span class="col col-3 empty"></span>
<span class="col col-4"></span>
<span class="col col-5 empty"></span>
<span class="col col-6"></span>
<span class="col col-7 empty"></span>
</span>
<br>
<span class="row row-c">
<span class="col col-0 empty"></span>
<span class="col col-1"></span>
<span class="col col-2 empty"></span>
<span class="col col-3"></span>
<span class="col col-4 empty"></span>
<span class="col col-5"></span>
<span class="col col-6 empty"></span>
<span class="col col-7"></span>
</span>
<br>
<span class="row row-d">
<span class="col col-0"></span>
<span class="col col-1 empty"></span>
<span class="col col-2"></span>
<span class="col col-3 empty"></span>
<span class="col col-4"></span>
<span class="col col-5 empty"></span>
<span class="col col-6"></span>
<span class="col col-7 empty"></span>
</span>
<br>
<span class="row row-e">
<span class="col col-0 empty"></span>
<span class="col col-1"></span>
<span class="col col-2 empty"></span>
<span class="col col-3"></span>
<span class="col col-4 empty"></span>
<span class="col col-5"></span>
<span class="col col-6 empty"></span>
<span class="col col-7"></span>
</span>
<br>
<span class="row row-f">
<span class="col col-0"></span>
<span class="col col-1 empty"></span>
<span class="col col-2"></span>
<span class="col col-3 empty"></span>
<span class="col col-4"></span>
<span class="col col-5 empty"></span>
<span class="col col-6"></span>
<span class="col col-7 empty"></span>
</span>
<br>
<span class="row row-g">
<span class="col col-0 empty"></span>
<span class="col col-1"></span>
<span class="col col-2 empty"></span>
<span class="col col-3"></span>
<span class="col col-4 empty"></span>
<span class="col col-5"></span>
<span class="col col-6 empty"></span>
<span class="col col-7"></span>
</span>
<br>
<span class="row row-h">
<span class="col col-0"></span>
<span class="col col-1 empty"></span>
<span class="col col-2"></span>
<span class="col col-3 empty"></span>
<span class="col col-4"></span>
<span class="col col-5 empty"></span>
<span class="col col-6"></span>
<span class="col col-7 empty"></span>
</span>
<br>
<br>
<h3>Current Player:</h3><p class="currentplayer"></p>
<h3>Start:</h3><p class="start"></p>
<h3>End:</h3><p class="end"></p>
<h3>Error:</h3><p class="error"></p>
<button class="start">Start the game</button>
</body>
</html>
Raw
jquery_ui.js
var numToChar = ["a", "b", "c", "d", "e", "f", "g", "h"];
var charToNum = {
a: 0,
b: 1,
c: 2,
d: 3,
e: 4,
f: 5,
g: 6,
h: 7
};
var move;
var getMove = function () {
move = {
startRow: null,
startCol: null,
endRow: null,
endCol: null
}
};
var updateMove = function (e) {
var piece = $(e.currentTarget);
var row = $('.row').index(piece.parent());
var col = piece.parent().children().index(piece);
if (move.startRow == null || move.startCol == null) {
move.startRow = row;
move.startCol = col;
$('.start').empty().append("row: " + row + ", col: " + col);
} else {
move.endRow = row;
move.endCol = col;
$('.end').empty().append("row: " + row + ", col: " + col);
attemptMove(move.startRow, move.startCol, move.endRow, move.endCol);
getMove();
}
};
var play = function () {
resetBoard();
getMove();
};
var displayBoard = function () {
for (var rowIndex = 0; rowIndex < board.length; rowIndex++) {
var row = board[rowIndex];
for (var colIndex = 0; colIndex < row.length; colIndex++) {
var rowKey = numToChar[Number(rowIndex)];
var element = $(".row-" + rowKey).children(".col-" + colIndex);
displayPiece(element, row[colIndex]);
}
}
};
var displayPiece = function (element, piece) {
element.empty();
if (piece == 'red') {
element.append("<span class='red piece'></span>");
} else if (piece == 'wht') {
element.append("<span class='white piece'></span>");
}
};
$(document).on('ready', function() {
$(document).on('boardChange', displayBoard);
$(document).on('boardChange', getMove);
$('.col').on('click', updateMove);
$('.start').on('click', play);
});
var displayError = function (e, error) {
$('.error').empty().append(error);
};
$(document).on('invalidMove', displayError);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment