Introductory lesson on how each piece moves. It also covers the concepts of check and checkmate.
Code
let steps = [];
function setupIntro() {
steps.push(function () {
info("The aim of chess is to capture your opponents king.\
<br>The player with the white pieces goes first, and players take it in turns to move a piece.\
<br>Click next to learn how to move your first piece.");
showNextButton(true);
});
}
function setupPawns() {
let file = "";
steps.push(function () {
info("Pawns can only move forward.\
<br>Their first move can be up to two squares and\
subsequent moves can only be one square.\
<br>Move a pawn two squares forward to continue.");
onPieceClicked(function (squareName) {
return squareName.endsWith("2");
});
onMoveAttempted(function (san) {
if (sourceOfSan(san).endsWith("2") && destOfSan(san).endsWith("4")) {
file = sourceOfSan(san).substr(0, 1);
setTimeout(next, 200);
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function () {
info("Now it's black's turn to make a move.");
showNextButton(true);
});
steps.push(function () {
setTimeout(function () {
if (file.charCodeAt(0) < "e".charCodeAt(0)) {
performMove("h5");
} else {
performMove("a5");
}
setTimeout(next, 200);
}, 250);
});
steps.push(function () {
info("It's our turn again, try moving the same pawn.\
<br>notice that it can only move one square this time?");
onPieceClicked(function (squareName) {
if (squareName == file + "4") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == file + "4" && destOfSan(san) == file + "5") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
let blackFile = "";
steps.push(function () {
if (file == "a") {
blackFile = "b";
} else {
blackFile = String.fromCharCode(file.charCodeAt(0) - 1);
}
setTimeout(function() {
performMove(blackFile + "6");
setTimeout(next, 250);
}, 400);
});
steps.push(function() {
info("Pawns move forward, but they capture our opponents pieces diagonally.\
<br>Try capturing the black pawn");
onPieceClicked(function (squareName) {
if (squareName == file + "5") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == file + "5" && destOfSan(san) == blackFile + "6") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
setTimeout(function() {
info("This completes our overview of pawns");
showNextButton(true);
}, 200);
});
}
function setupKings() {
steps.push(function() {
fromFen("8/3k4/8/8/8/8/3K4/8 w - - 0 1");
info("Kings can move in any direction, but they can only move one square at a time\
<br>Move your king in any direction to continue.");
onPieceClicked(function (squareName) {
if (squareName == "d2") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "d2") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
info("Correct!\
<br>Click next to continue.");
showNextButton(true);
});
}
function setupQueens() {
steps.push(function() {
fromFen("8/3k1q2/8/8/8/8/3K1Q2/8 w - - 0 1");
info("Queens can move in any direction, and can move as far as they want\
<br>Move your queen in any direction to continue.");
onPieceClicked(function (squareName) {
if (squareName == "f2") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "f2") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
info("Correct!\
<br>Click next to continue.");
showNextButton(true);
});
}
function setupBishops() {
steps.push(function() {
fromFen("8/3k1b2/8/8/8/8/3K1B2/8 w - - 0 1");
info("Bishops can only move along diagonals\
<br>Move your bishop in any direction to continue.");
onPieceClicked(function (squareName) {
if (squareName == "f2") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "f2") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
info("Correct!\
<br>Click next to continue.");
showNextButton(true);
});
}
function setupKnights() {
steps.push(function() {
fromFen("8/3k1n2/8/8/8/8/3K1N2/8 w - - 0 1");
info("Knights can move in L shapes\
<br>Move your Knight in any direction to continue.");
onPieceClicked(function (squareName) {
if (squareName == "f2") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "f2") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
info("Correct!\
<br>Click next to continue.");
showNextButton(true);
});
}
function setupRooks() {
steps.push(function() {
fromFen("8/3k1r2/8/8/8/8/3K1R2/8 w - - 0 1");
info("Rooks can only move in straight lines\
<br>Move your rook in any direction to continue.");
onPieceClicked(function (squareName) {
if (squareName == "f2") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "f2") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
info("Correct!\
<br>Click next to continue.");
showNextButton(true);
});
}
function setupCheck() {
steps.push(function() {
fromFen("1k6/pp6/2p5/3p4/8/3Q3B/8/1K6 w - - 0 1");
info("Threatening your opponents king is called 'check'\
<br>See if you can find a move that puts your opponent in check.");
onPieceClicked(function (squareName) {
if (squareName == "d3") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "d3" && destOfSan(san) == "g3") {
next();
return true;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
steps.push(function() {
setTimeout(function() {
performMove("Ka8");
setTimeout(function() {
info("Correct!\
<br>Our opponents king is forced to move out of the way to avoid being captured.\
<br>If our opponent cannot make any moves that stop the king being captured then it is called 'checkmate'\
<br>See if you can find a move that puts your opponent in checkmate.");
}, 400);
}, 400);
onPieceClicked(function (squareName) {
if (squareName == "g3") {
return true;
} else {
highlightSquareRed(squareName);
return false;
}
});
onMoveAttempted(function (san) {
if (sourceOfSan(san) == "g3" && destOfSan(san) == "g8") {
setTimeout(next, 200);
return true;
} else if(sourceOfSan(san) == "g3" && destOfSan(san) == "b8") {
setTimeout(function() {
info("Close, but our opponents king can simply take our queen, try again");
}, 250);
return false;
} else {
highlightSquareRed(destOfSan(san));
return false;
}
});
});
}
onNextClicked(function () {
showNextButton(false);
next();
});
function next() {
if (steps.length > 0) {
steps.shift()();
}
}
setupIntro();
setupPawns();
setupKings();
setupQueens();
setupBishops();
setupKnights();
setupRooks();
setupCheck();
steps.push(function() {
complete();
info("This ends our lesson on how to play chess.");
});
next();
