Mobile-First JavaScript Games
From Arcade to Grandmaster

Below is a complete didactic walkthrough of the chess engine that would appear in Chapter 9 of the book. It covers two versions — a basic random-move AI (for introducing turn-based logic and rule validation) and an advanced minimax engine with alpha-beta pruning (for teaching recursion, tree search, and positional evaluation). Both versions use modern ES2024+ JavaScript throughout: private class fields, Object.groupBy(), logical assignment operators, and more.

Project Setup & ES6 Import Map

We use a browser-native import map to load the chess.js library directly from a CDN as an ES6 module — zero bundler, zero configuration. This keeps the setup lightweight and teaches students how modern browsers natively resolve module specifiers.

<script type="importmap">
        {
        "imports": {
        "chess.js": "https://esm.sh/chess.js@0.12.1"
        }
        }
    </script>
<script type="module">
    import { Chess } from 'chess.js';
</script>

HTML Structure — The 8×8 Grid Board

The board is a CSS Grid with 64 dynamically-generated squares. Each square carries a data-square attribute using standard algebraic notation (e.g., "e4"). Squares are also made draggable for seamless touch and mouse interaction.

.board {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        width: min(70vw, 70vh, 560px);
        height: min(70vw, 70vh, 560px);
    }

ModernChess Class — Private Fields (ES2022+)

All game state is encapsulated using true private fields (the # prefix). This teaches students proper encapsulation — no leaked internal state, no accidental external mutations. The #aiSearchDepth field controls how many plies the minimax engine searches ahead.

class ModernChess {
        // True private fields — inaccessible from outside the class
        #game;
        #boardElement;
        #selectedSquare = null;
        #legalMovesForSelected = [];
        #aiSearchDepth = 3;  // Configurable search depth
    }

Piece-Square Positional Tables

Each piece type has an 8×8 centipawn table encoding decades of chess knowledge. Knights thrive in the centre (+20), rooks dominate open files, and kings seek shelter after castling. These values are added to the base material value of each piece during board evaluation.

const KNIGHT_TABLE = [
        [-50,-40,-30,-30,-30,-30,-40,-50],
        [-40,-20,  0,  0,  0,  0,-20,-40],
        [-30,  0, 10, 15, 15, 10,  0,-30],
        [-30,  5, 15, 20, 20, 15,  5,-30],
        [-30,  0, 15, 20, 20, 15,  0,-30],
        [-30,  5, 10, 15, 15, 10,  5,-30],
        [-40,-20,  0,  5,  5,  0,-20,-40],
        [-50,-40,-30,-30,-30,-30,-40,-50]
    ];
    // "Knights on the rim are grim" — corners penalised at -50
// Central squares (d4,e4,d5,e5) reward +20 for knight activity

Board Evaluation — Material + Position

The #getPieceValue() method combines base material values (pawn=100, knight=320, bishop=330, rook=500, queen=900, king=20000) with the positional bonus from the corresponding piece-square table. The evaluation is asymmetric: from Black's (AI's) perspective, positive means good for Black, negative means good for White.

#getPieceValue(piece, x, y) {
        const baseValues = { p: 100, n: 320, b: 330, r: 500, q: 900, k: 20000 };
        let value = baseValues[piece.type] ?? 0;
        let positionalBonus = 0;
        if (piece.type === 'n') positionalBonus = KNIGHT_TABLE[x][y];
        // ... same pattern for all piece types
        return piece.color === 'b' ? (value + positionalBonus) : -(value + positionalBonus);
    }

ES2024: Object.groupBy() for Piece Classification

The Object.groupBy() static method (new in ES2024) splits all pieces on the board into white and black groups in a single call. This replaces manual loops and demonstrates how modern JavaScript simplifies data classification tasks.

const flatBoard = this.#game.board().flat().filter(Boolean);
// ES2024: group all pieces by color in one elegant call
const piecesGrouped = Object.groupBy(flatBoard, piece => piece.color);
// Result: { w: [white pieces], b: [black pieces] }

Minimax Algorithm — Core Concept

Minimax is the foundational algorithm for two-player zero-sum games. The AI assumes both players play optimally: the maximising player (Black/AI) tries to maximise the score, while the minimising player (White/human) tries to minimise it. The algorithm recursively explores the game tree up to a fixed depth.

#minimax(depth, alpha, beta, isMaximizing) {
        if (depth === 0 || this.#game.game_over()) return this.#evaluateBoard();
        const moves = this.#game.moves({ verbose: true });
        if (isMaximizing) {
            let maxEval = -Infinity;
            for (const move of moves) {
                this.#game.move(move);
                let evaluation = this.#minimax(depth - 1, alpha, beta, false);
                this.#game.undo();
                maxEval = Math.max(maxEval, evaluation);
            }
            return maxEval;
        }
        // Minimising player — symmetric, uses Math.min
    }

Alpha-Beta Pruning — Cutting the Search Tree

Alpha-beta pruning dramatically reduces the number of evaluated nodes. It tracks two bounds — alpha (best for maximiser) and beta (best for minimiser) — and prunes entire branches when they can't influence the final decision. This cuts the effective branching factor from ~35 to roughly √35 ≈ 6.

// Inside the maximising loop:
alpha = Math.max(alpha, evaluation);
if (beta <= alpha) break;  // Beta cutoff — prune this branch!

// Inside the minimising loop:
beta = Math.min(beta, evaluation);
if (beta <= alpha) break;  // Alpha cutoff — prune!

ES2024: Logical Assignment (||=)

The #showMessage method uses the logical OR assignment operator (||=), another ES2024 feature. It assigns a default value only if the left-hand side is falsy — a clean, one-line pattern for default parameters.

#showMessage(msg, bgColor) {
        bgColor ||= "#ff4757dd";  // ES2024: assign default if falsy
        const errDiv = document.getElementById('errorMsg');
        errDiv.textContent = msg;
        errDiv.style.background = bgColor;
        // Auto-dismiss after timeout
    }

Piece-Square Table Summary

A quick-reference guide to the centipawn values driving the AI's positional decisions:

📖 This writing sample demonstrates the pedagogical style of Chapter 9.
The full book covers 10 games, each introducing progressively advanced JavaScript features and computer science concepts — all built mobile-first, with zero frameworks, and running natively on any modern smartphone browser.

✉️ Contact: Francisco Perez  |  drfperez.github.io  |  Scientix Ambassador 🇪🇺  |  30+ years CS education