WebDevPlayground

How To: Add AI to our jQuery Tic-Tac-Toe

adi — Wed, 14 Oct 2026 08:01:20 +0000

Previously, in the tic-tac-toe series, we programmed a simple game of tic-tac-toe. The version we built reminded me of two-player games in the early ’90s, when friends sat at the same computer to play. However, since playing with a friend is not always possible, it’s time to add a computer opponent to the mix. At the very least, now I won’t feel weird playing both sides myself.

This tutorial starts where the previous one finished. We will keep the adjustable board, SVG tokens, score counter, and two-human-player option. Instead of rebuilding all of that, we will focus on the code that changed: choosing an AI opponent, finding good moves, giving the AI several difficulty levels, and adding a little interface polish so the computer feels like part of the game.

What are we adding?

Before we begin, we need to know what we are actually adding to the game. In other words, what do we need to code so the new features work as expected? This also gives us a small task list to follow, which is much nicer than wandering into an AI algorithm armed only with optimism.

Our basic requirements:

Player 2 can also be a simple AI
Don’t fall into the “always win or tie” trap
Extend the interface to allow the new features
Add some extra polish to make it feel good

Some of those requirements can look a bit daunting, but we’ll tackle them one by one. We won’t repeat every ordinary HTML or CSS declaration from the first tutorial. The AI logic deserves a closer look, though, and we’ll cover every new JavaScript responsibility even when a few related lines are grouped into one snippet.

I’m getting a bit ahead of myself—you might be wondering if you need to know anything special before continuing. Don’t worry. Read the previous tutorial, and if its arrays, functions, and jQuery event handlers make sense, you are in a good place to tackle this one. Recursion will be our one big new idea, and we’ll take it slowly.

If you want to check out the final result, you can play the demo and see it all together. A full download of the source code is also available here.

Since we are only changing three first-party files in this version—index.html, style.css, and tic_tac_toe.js—you can copy the folder from the previous tutorial and edit it. Forgot where it is? No worries; you can download the original project. The jQuery file and token-icons.svg do not change.

An interface for a human or AI opponent

Player 1 stays human, while the old Player 2 card becomes an opponent card. It starts with two radio buttons: Human and AI. The human choice reveals the familiar name and token controls; the AI choice reveals a difficulty list instead.

Switching the opponent controls

This is the meaningful new part of the Player 2 form. The full, slightly repetitive token picker is already in index.html inside the downloadable ZIP, so we can safely spare ourselves another wall of four nearly identical SVG labels.


	Opponent type
	
		
			
			Human
		
		
			
			AI
		
	



	Display name
	

	



	AI difficulty
	
	
		The AI chooses its own name and available token.

The two settings groups always exist in the page; JavaScript only changes which one is available. Importantly, it disables the hidden group as well as hiding it:

function toggleOpponentSettings() {
	const isAi =
		$('#player-2-form [name="opponent-type"]:checked').val() === 'ai';

	$('#human-settings')
		.prop('hidden', isAi)
		.find('input')
		.prop('disabled', isAi);
	$('#ai-settings')
		.prop('hidden', !isAi)
		.find('select')
		.prop('disabled', !isAi);
	$('#player-2-form .button--player').text(
		isAi ? 'Set AI opponent' : 'Set Player 2'
	);
	updateTokenAvailability();
}

Doing this instead of only adding a CSS class has two benefits. Hidden controls cannot accidentally participate in validation, and a keyboard user cannot tab into controls they cannot see. The button text changes too, so the action still makes sense in either mode.

Giving our game a little more state

At the top of tic_tac_toe.js, we give the two array positions readable names and add the settings the AI will need:

const humanPlayerIndex = 0;
const aiPlayerIndex = 1;
const lossesBeforeDifficultySuggestion = 2;
const winsBeforeDifficultySuggestion = 3;
const allowedIcons = ['hat', 'car', 'ship', 'boot'];
const boardSizeClasses =
	'board-size-3 board-size-4 board-size-5 board-size-6';
const currentPlayerClasses = 'current-player-one current-player-two';

// A short, gender-neutral name pool gives the AI a little personality.
const aiNames = [
	'Alex',
	'Avery',
	'Casey',
	'Jordan',
	'Morgan',
	'Parker',
	'Quinn',
	'Riley',
	'Skyler',
	'Taylor',
];

// Each difficulty controls how often the AI uses a calculated move.
const difficulties = {
	easy: { label: 'Easy', calculatedMoveChance: 0 },
	normal: { label: 'Normal', calculatedMoveChance: 0.5 },
	hard: { label: 'Hard', calculatedMoveChance: 0.85 },
	expert: { label: 'Expert', calculatedMoveChance: 1 },
};
const difficultyOrder = ['easy', 'normal', 'hard', 'expert'];

// Searching every possible move is quick on a 3 × 3 board. Bigger boards
// use fewer search levels so the browser stays responsive.
const searchDepthByBoardSize = {
	3: 9,
	4: 4,
	5: 3,
	6: 3,
};

humanPlayerIndex is nicer to read than a mysterious 0 inside an algorithm. We also changed allowedIcons from a Set to an array. A set was handy when we only asked “is this icon allowed?”, but an array can answer that with includes() and can be filtered when the AI needs a random unused icon.

Each player now records whether it is controlled by the AI and, if so, its difficulty:

const players = [
	{
		name: 'Player 1',
		icon: 'hat',
		wins: 0,
		isReady: false,
		isAi: false,
		difficulty: null,
	},
	{
		name: 'Player 2',
		icon: 'car',
		wins: 0,
		isReady: false,
		isAi: false,
		difficulty: 'normal',
	},
];

let boardSize = 3;
let board = [];
let winningLines = [];
let currentPlayer = humanPlayerIndex;
let roundIsOver = false;
let aiTimer;
let humanWinStreak = 0;
let humanLossStreak = 0;
let showDifficultySuggestions = true;
let suggestedDifficulty = null;
let suggestionDirection = 0;
let pendingPlayerForm = null;
let confirmedTokenChangeForm = null;

That looks like quite a shopping list, but each variable has one job. winningLines avoids rebuilding the same rows, columns, and diagonals during every step of the AI search. The timer controls the short “thinking” pause. The streak and suggestion variables belong to the difficulty helper, and the final two variables let us confirm a token change without losing track of which form started it.

Saving either kind of opponent

The original setPlayer() only knew about a name and icon. The new version first decides which branch of the form is active. AI settings validate the difficulty; human settings keep the previous name and token checks.

// Save one player's form and update the visible summary.
function setPlayer(event) {
	event.preventDefault();

	const $form = $(this);
	const playerIndex = Number($form.attr('data-player'));
	const otherPlayerIndex = (playerIndex + 1) % players.length;
	const player = players[playerIndex];
	const isAi =
		playerIndex === aiPlayerIndex &&
		$form.find('[name="opponent-type"]:checked').val() === 'ai';
	const $message = $form.find('.form-message');
	let name = null;
	let icon = null;
	let difficulty = null;

	$message.text('');

	if (isAi) {
		difficulty = String($form.find('[name="difficulty"]').val());

		if (!Object.hasOwn(difficulties, difficulty)) {
			$message.text('Please choose an AI difficulty.');
			return;
		}
	} else {
		name = String($form.find('[name="name"]').val()).trim();
		icon = String($form.find('[name="icon"]:checked').val());

		if (!name) {
			$message.text('Please enter a display name.');
			$form.find('[name="name"]').trigger('focus');
			return;
		}

		if (!allowedIcons.includes(icon)) {
			$message.text('Please choose a token icon.');
			return;
		}

		if (
			players[otherPlayerIndex].isReady &&
			players[otherPlayerIndex].icon === icon
		) {
			$message.text(
				'Please choose a token the other player is not using.'
			);
			updateTokenAvailability();
			return;
		}
	}

	// The token-change confirmation is added in the polish section below.

	if (isAi) {
		player.name = pickRandom(aiNames);
		player.icon = getRandomAiIcon();
		player.difficulty = difficulty;
	} else {
		player.name = name;
		player.icon = icon;
	}

	player.isAi = isAi;
	player.isReady = true;
	updateTokenAvailability();

	if (playerIndex === aiPlayerIndex) {
		humanWinStreak = 0;
		humanLossStreak = 0;
	}

	// Reset the board before the updated setup appears in the summary.
	startNewRound();
	updatePlayerSummary(playerIndex);

	$form
		.find('.button--player')
		.text(
			playerIndex === aiPlayerIndex && isAi
				? 'Pick a new AI opponent'
				: `Update Player ${playerIndex + 1}`
		);
	$form
		.closest('.player-card')
		.find('.player-settings')
		.prop('open', false);
}

Object.hasOwn(difficulties, difficulty) checks the submitted value against our real difficulty table instead of trusting that nobody changed the HTML in the browser’s developer tools. The same idea protected the icon name in the first game.

An AI receives a random name and a token that Player 1 is not using:

function pickRandom(items) {
	return items[Math.floor(Math.random() * items.length)];
}

function getRandomAiIcon() {
	const otherPlayer = players[humanPlayerIndex];
	const availableIcons = allowedIcons.filter(
		(icon) => !otherPlayer.isReady || icon !== otherPlayer.icon
	);

	return pickRandom(availableIcons);
}

Keeping pickRandom() generic pays off twice: it chooses cosmetic names and icons here, then later chooses moves. A tiny helper with three jobs is better than copying the same Math.floor(Math.random() * ...) spell everywhere and eventually mistyping one of them.

The summary function now also describes the opponent type:

function updatePlayerSummary(playerIndex) {
	const player = players[playerIndex];
	const $playerCard = $(`.player-card:eq(${playerIndex})`);
	const $summary = $playerCard.find('.player-summary');

	$summary.find('.summary-token').empty().append(createIcon(player.icon));
	$summary.find('.summary-name').text(player.name);
	$summary.find('.win-count').text(player.wins);

	if (playerIndex === aiPlayerIndex) {
		const details = player.isAi
			? `AI · ${difficulties[player.difficulty].label} difficulty`
			: 'Human opponent';

		$summary.find('.player-details').text(details);
	}

	$summary.prop('hidden', false);
}

A simple Tic-Tac-Toe AI

Our AI is not a trained model and it does not secretly call a server. It is a small search algorithm running entirely in the browser. It imagines a move, imagines our reply, imagines its next reply, and scores the result. Very thoughtful for something that just received a racing-car token.

Before we reach that algorithm, both humans and computers need to use the same game rules.

One move pipeline for everybody

The first version’s click handler both selected a cell and performed the whole move. That no longer works because an AI does not click. We split the work into three layers:

playHumanMove() reads the clicked cell;
playAiTurn() chooses a cell with code;
both call playMoveAt(), which applies the shared win, draw, score, and turn rules.

function markCell(cellIndex, playerIndex) {
	const player = players[playerIndex];
	const $cell = $(`#game-board .cell[data-index="${cellIndex}"]`);

	board[cellIndex] = playerIndex;
	$cell
		.append(createIcon(player.icon))
		.addClass(`is-marked player-${playerIndex === 0 ? 'one' : 'two'}`)
		.attr('aria-label', `${player.name} marked this square`)
		.attr('aria-disabled', 'true')
		.prop('disabled', true);
}

function playMoveAt(cellIndex) {
	if (roundIsOver || board[cellIndex] !== null || !playersAreReady()) {
		return;
	}

	const playerIndex = currentPlayer;
	const player = players[playerIndex];
	markCell(cellIndex, playerIndex);

	const winningLine = findWinningLine(playerIndex);

	if (winningLine) {
		winningLine.forEach((index) => {
			$(`#game-board .cell[data-index="${index}"]`).addClass(
				'is-winning'
			);
		});

		player.wins += 1;
		$(`.player-card:eq(${playerIndex}) .win-count`).text(player.wins);
		finishRound(`${player.name} wins this round!`, playerIndex);
		return;
	}

	if (board.every((cell) => cell !== null)) {
		finishRound('This round is a draw.');
		return;
	}

	currentPlayer = (currentPlayer + 1) % players.length;
	beginTurn();
}

function playHumanMove() {
	if (players[currentPlayer].isAi) {
		return;
	}

	playMoveAt(Number($(this).attr('data-index')));
}

Doing this instead of creating a second “AI version” of the move code means a future rule change has one home. The guard inside playHumanMove() is deliberately repeated even though AI turns disable the board. The disabled buttons guide the interface; the state check protects the game.

Reusing the winning lines

The previous game called getWinningLines() each time it checked for a winner. Minimax will check thousands of pretend boards, so rebuilding those identical lines each time would be wasteful. A new round calculates them once, and findWinningLine() can now inspect either the real board or a board supplied by the search:

// Return the winning positions or undefined when no line matches.
function findWinningLine(playerIndex, squares = board) {
	return winningLines.find((line) =>
		line.every((cellIndex) => squares[cellIndex] === playerIndex)
	);
}

function getAvailableMoves(squares) {
	const moves = [];

	squares.forEach((square, index) => {
		if (square === null) {
			moves.push(index);
		}
	});

	return moves;
}

// Reset moves but keep names, tokens, and scores.
function startNewRound() {
	window.clearTimeout(aiTimer);
	closeDialog('round-actions');
	closeDialog('difficulty-suggestion');
	board = Array(boardSize * boardSize).fill(null);
	winningLines = getWinningLines();
	currentPlayer = humanPlayerIndex;
	roundIsOver = false;
	$('#hide-suggestions').prop('checked', false);
	renderBoard();

	if (playersAreReady()) {
		beginTurn();
	} else {
		$('#game-status').text('Set both players to begin.');
	}
}

The squares = board default keeps old calls short, while Minimax can pass its temporary board explicitly. getAvailableMoves() returns the indexes of every null cell; those are the branches the search can explore.

The Minimax algorithm

Minimax is a decision-making algorithm for two-player games where one player’s gain is the other player’s loss. The AI is the maximizing player because it wants the largest score. The human is the minimizing player because their best reply should push that score downward.

The “what” is simple: try possible moves and give each future outcome a number. The “how” is recursion—a function calls itself to look one turn farther ahead. The “be careful” is important: without a stopping condition, the recursion never ends; without restoring each pretend move, one branch leaks into the next; and on a large board, looking all the way to the end can freeze the page.

We first order empty cells from nearest the center to farthest away:

// Give promising center squares to minimax first. Move ordering does not
// change the answer, but it lets alpha-beta pruning skip more work.
function orderMoves(moves) {
	const center = (boardSize - 1) / 2;

	return moves.slice().sort((first, second) => {
		const firstRow = Math.floor(first / boardSize);
		const firstColumn = first % boardSize;
		const secondRow = Math.floor(second / boardSize);
		const secondColumn = second % boardSize;
		const firstDistance =
			Math.abs(firstRow - center) + Math.abs(firstColumn - center);
		const secondDistance =
			Math.abs(secondRow - center) + Math.abs(secondColumn - center);

		return firstDistance - secondDistance;
	});
}

slice() creates a copy before sorting, so a useful optimization does not unexpectedly rearrange the caller’s array. Center-first ordering does not make a move magically better; it simply helps the pruning step reach strong moves sooner.

Here is the recursive part:

// Minimax tries an AI move, then a human move, until the game ends or the
// search limit is reached. Alpha and beta avoid branches that cannot improve
// the result we have already found.
function minimax(squares, depth, maximizing, alpha, beta, maxDepth) {
	if (findWinningLine(aiPlayerIndex, squares)) {
		return 100000 - depth;
	}

	if (findWinningLine(humanPlayerIndex, squares)) {
		return depth - 100000;
	}

	const availableMoves = getAvailableMoves(squares);

	if (availableMoves.length === 0) {
		return 0;
	}

	if (depth >= maxDepth) {
		return evaluateBoard(squares);
	}

	if (maximizing) {
		let bestScore = -Infinity;

		for (const move of orderMoves(availableMoves)) {
			squares[move] = aiPlayerIndex;
			bestScore = Math.max(
				bestScore,
				minimax(squares, depth + 1, false, alpha, beta, maxDepth)
			);
			squares[move] = null;
			alpha = Math.max(alpha, bestScore);

			if (beta <= alpha) {
				break;
			}
		}

		return bestScore;
	}

	let bestScore = Infinity;

	for (const move of orderMoves(availableMoves)) {
		squares[move] = humanPlayerIndex;
		bestScore = Math.min(
			bestScore,
			minimax(squares, depth + 1, true, alpha, beta, maxDepth)
		);
		squares[move] = null;
		beta = Math.min(beta, bestScore);

		if (beta <= alpha) {
			break;
		}
	}

	return bestScore;
}

The first three returns are terminal results: an AI win is a very large positive score, a human win is a very large negative score, and a draw is zero. Including depth means the AI prefers a quick win over a slow one and delays an unavoidable loss as long as it can. Petty? Maybe. Correct? Also yes.

Inside each loop we place a pretend token, recurse, and immediately set that square back to null. Mutating and restoring one array is cheaper than cloning a new board at every branch, but the restore line is non-negotiable. Forget it and your imaginary games begin sharing imaginary moves, which creates very real bugs.

alpha is the best score the maximizing side can already guarantee; beta is the best score the minimizing side can already guarantee. Once beta <= alpha, that branch cannot change the final decision, so we stop exploring it. This shortcut is called alpha-beta pruning. It changes how much work we do, not which best move we find.

Scoring unfinished larger boards

A 3 × 3 board has a small enough game tree to search to the end. Our 4 × 4 through 6 × 6 boards do not. The number of possible move sequences grows wildly, so the depth table stops those searches early. When that happens, evaluateBoard() estimates who has the more promising position:

// At the search limit, reward lines the AI can still complete and penalize
// lines the human can complete. More marks in a line are worth much more.
function evaluateBoard(squares) {
	let score = 0;

	winningLines.forEach((line) => {
		const aiMarks = line.filter(
			(index) => squares[index] === aiPlayerIndex
		).length;
		const humanMarks = line.filter(
			(index) => squares[index] === humanPlayerIndex
		).length;

		if (aiMarks > 0 && humanMarks === 0) {
			score += 10 ** aiMarks;
		}

		if (humanMarks > 0 && aiMarks === 0) {
			score -= 1.1 * 10 ** humanMarks;
		}
	});

	return score;
}

A line containing marks from both players is blocked, so it contributes nothing. An open line with one AI mark earns 10; two marks earn 100; three earn 1000. The exponential score makes nearly completed lines much more important than scattered tokens. Human threats are multiplied by 1.1, giving defense a slight nudge when attack and defense otherwise look equal.

This is a heuristic: a useful estimate, not a promise of perfect play. That distinction matters. Expert is unbeatable on a normal 3 × 3 board because it can search the full remaining game, but on larger boards it is “our strongest search within a sensible browser budget,” not an all-knowing grid deity.

Finally, the top-level search tries each currently available move and keeps every move tied for the best score:

function findCalculatedMove() {
	const availableMoves = orderMoves(getAvailableMoves(board));
	const maxDepth = Math.min(
		searchDepthByBoardSize[boardSize],
		availableMoves.length
	);
	let bestScore = -Infinity;
	let bestMoves = [];

	for (const move of availableMoves) {
		board[move] = aiPlayerIndex;
		const score = minimax(
			board,
			1,
			false,
			-Infinity,
			Infinity,
			maxDepth
		);
		board[move] = null;

		if (score > bestScore) {
			bestScore = score;
			bestMoves = [move];
		} else if (score === bestScore) {
			bestMoves.push(move);
		}
	}

	return pickRandom(bestMoves);
}

Choosing randomly from equally good moves instead of always taking the first one makes repeat games less mechanical without making the AI deliberately worse. It also avoids the board’s lowest index becoming its suspiciously favorite square.

Difficulty without the “always win or tie” trap

A perfect tic-tac-toe AI sounds impressive until every game becomes the same loss or draw. We already did the hard work of finding a calculated move, so difficulty can stay wonderfully small: decide how often to use that move and how often to choose any empty square.

Mixing calculated and random moves

function chooseAiMove() {
	const availableMoves = getAvailableMoves(board);
	const difficulty = difficulties[players[aiPlayerIndex].difficulty];
	const shouldCalculate = Math.random() < difficulty.calculatedMoveChance;

	if (!shouldCalculate) {
		return pickRandom(availableMoves);
	}

	return findCalculatedMove();
}

function playAiTurn() {
	if (
		roundIsOver ||
		currentPlayer !== aiPlayerIndex ||
		!players[aiPlayerIndex].isAi
	) {
		return;
	}

	playMoveAt(chooseAiMove());
}

Easy always picks randomly. Normal calculates half of its moves. Hard calculates 85 percent, and Expert calculates every move. That gives us noticeably different personalities without maintaining four separate algorithms.

The random branch is intentionally allowed to make a bad move. If we only randomized between the best Minimax moves, every level would still be optimal—just optimal in a less predictable order. The guards in playAiTurn() matter because its call is delayed. During that pause the round might be restarted, the opponent might be changed back to human, or another setting might invalidate the scheduled turn.

Suggesting a better difficulty

The game quietly watches streaks when Player 2 is an AI. After three human wins it offers the next harder level; after two human losses it offers the next easier one. Draws break both streaks, and a two-human game resets them because difficulty no longer means anything.

function updateWinStreaks(winnerIndex) {
	if (!players[aiPlayerIndex].isAi) {
		humanWinStreak = 0;
		humanLossStreak = 0;
		return false;
	}

	if (winnerIndex === humanPlayerIndex) {
		humanWinStreak += 1;
		humanLossStreak = 0;

		if (humanWinStreak === winsBeforeDifficultySuggestion) {
			return showDifficultySuggestion(1);
		}
		return false;
	}

	if (winnerIndex === aiPlayerIndex) {
		humanLossStreak += 1;
		humanWinStreak = 0;

		if (humanLossStreak === lossesBeforeDifficultySuggestion) {
			return showDifficultySuggestion(-1);
		}
		return false;
	}

	// A draw breaks both winning and losing streaks.
	humanWinStreak = 0;
	humanLossStreak = 0;
	return false;
}

The direction is 1 for harder and -1 for easier. That lets one function move through difficultyOrder in either direction:

function showDifficultySuggestion(direction) {
	if (!showDifficultySuggestions) {
		return false;
	}

	const currentDifficulty = players[aiPlayerIndex].difficulty;
	const currentIndex = difficultyOrder.indexOf(currentDifficulty);
	const nextIndex = currentIndex + direction;

	if (nextIndex < 0 || nextIndex >= difficultyOrder.length) {
		return false;
	}

	suggestedDifficulty = difficultyOrder[nextIndex];
	suggestionDirection = direction;
	const nextLabel = difficulties[suggestedDifficulty].label;
	const message =
		direction < 0
			? `You lost ${lossesBeforeDifficultySuggestion} games in a row. Would you like to try ${nextLabel}?`
			: `You won ${winsBeforeDifficultySuggestion} games in a row. Ready to try ${nextLabel}?`;

	$('#difficulty-suggestion-message').text(message);
	$('#accept-difficulty').text(`Switch to ${nextLabel}`);
	$('#hide-suggestions').prop('checked', false);
	document.getElementById('difficulty-suggestion').showModal();
	return true;
}

The boundary check prevents suggestions below Easy or above Expert. Returning a Boolean also tells finishRound() whether the suggestion dialog replaced the normal replay dialog.

function rememberSuggestionPreference() {
	if ($('#hide-suggestions').prop('checked')) {
		showDifficultySuggestions = false;
	}
}

function closeDifficultyDialog() {
	closeDialog('difficulty-suggestion');
	suggestedDifficulty = null;
	suggestionDirection = 0;
}

// Refusing starts a fresh streak, so the question can appear again later.
function refuseDifficultySuggestion() {
	rememberSuggestionPreference();

	if (suggestionDirection < 0) {
		humanLossStreak = 0;
	} else if (suggestionDirection > 0) {
		humanWinStreak = 0;
	}

	closeDifficultyDialog();
	startNewRound();
}

function acceptDifficultySuggestion() {
	if (!suggestedDifficulty) {
		return;
	}

	const newDifficulty = suggestedDifficulty;
	rememberSuggestionPreference();
	humanWinStreak = 0;
	humanLossStreak = 0;
	closeDifficultyDialog();
	players[aiPlayerIndex].difficulty = newDifficulty;

	// The new round is visible before the summary reveals the new level.
	startNewRound();
	$('#ai-difficulty').val(newDifficulty);
	updatePlayerSummary(aiPlayerIndex);
}

“Don’t show this again” lasts for the current page visit rather than being saved permanently. That keeps the demo simple and avoids introducing localStorage for one checkbox. Refusing resets only the streak that caused the suggestion, so the same question can return after another genuine streak instead of appearing after every following round.

Some extra polish to make it feel good

The AI now works, so everything in this section is about making its behavior understandable and keeping small interface surprises out of the way. None of these pieces makes Minimax smarter, but together they make the game feel much less like a spreadsheet that occasionally places a hat.

A visible thinking turn and a locked board

The old showTurn() becomes beginTurn(). Human turns enable empty cells. AI turns lock every cell, show a thinking message, and wait 450 milliseconds before moving:

// Enable empty cells only when it is a human player's turn.
function updateBoardAvailability() {
	const humanCanPlay =
		playersAreReady() && !roundIsOver && !players[currentPlayer].isAi;
	const currentPlayerClass =
		currentPlayer === humanPlayerIndex
			? 'current-player-one'
			: 'current-player-two';
	const $board = $('#game-board');

	$board.removeClass(currentPlayerClasses).addClass(currentPlayerClass);

	$board.find('.cell').each(function () {
		const cellIndex = Number($(this).attr('data-index'));
		const canUseCell = humanCanPlay && board[cellIndex] === null;

		$(this)
			.prop('disabled', !canUseCell)
			.attr('aria-disabled', String(!canUseCell));
	});
}

function showPlayerStatus(playerIndex, message) {
	const player = players[playerIndex];
	const playerClass =
		playerIndex === humanPlayerIndex ? 'player-one' : 'player-two';
	const $playerName = $('', {
		class: `game-status__player ${playerClass}`,
		text: player.name,
	});

	$('#game-status').empty().append($playerName, message);
}

function beginTurn() {
	if (!playersAreReady() || roundIsOver) {
		updateBoardAvailability();
		return;
	}

	const player = players[currentPlayer];

	if (player.isAi) {
		showPlayerStatus(currentPlayer, ' is thinking…');
		updateBoardAvailability();

		// The short pause makes the computer turn easy to follow.
		window.clearTimeout(aiTimer);
		aiTimer = window.setTimeout(playAiTurn, 450);
		return;
	}

	showPlayerStatus(currentPlayer, ', choose an empty square.');
	updateBoardAvailability();
}

The delay is not pretending that the calculation takes 450 milliseconds—the search usually finishes much faster. It gives the player enough time to see that the turn changed. Using setTimeout() instead of a blocking delay keeps the page responsive, and every reset calls clearTimeout() so an old AI move cannot arrive late on a fresh board.

showPlayerStatus() creates the name with jQuery’s text option rather than assembling an HTML string. That keeps user-entered names as text while still letting us color the name separately from the rest of the sentence.

renderBoard() now creates every cell disabled. That is a safer starting point than guessing whether somebody can play while the buttons are being built; beginTurn() immediately calls updateBoardAvailability() with the complete current state.

Turn-colored hover shades

The board receives either .current-player-one or .current-player-two. Those classes fill two temporary custom properties used by the cell hover state:

:root {
	--player-one-hover: color-mix(
		in oklab,
		var(--paper),
		var(--player-one) 10%
	);
	--player-two-hover: color-mix(
		in oklab,
		var(--paper),
		var(--player-two) 10%
	);
}

.board.current-player-one {
	--current-player: var(--player-one);
	--current-player-hover: var(--player-one-hover);
}

.board.current-player-two {
	--current-player: var(--player-two);
	--current-player-hover: var(--player-two-hover);
}

.cell:not(:disabled):hover {
	border-color: var(--current-player);
	background: var(--current-player-hover);
	transform: translateY(-2px);
}

The hover now previews the current player’s color instead of always using Player 2’s green. We mix the pale backgrounds in oklab rather than oklch. Both are perceptual color spaces, but interpolating rectangular Lab coordinates behaved more smoothly here when the two player colors travel toward nearly white paper. With polar oklch, hue becomes unstable as chroma approaches zero, which can give very pale mixes an unexpected tint. The color-mix() reference has more examples if you want to experiment.

Keeping token choices honest

The first game rejected a duplicate token only after form submission. This version also disables any token already in use, and disables the entire human picker when AI mode is selected:

function updateTokenAvailability() {
	$('.player-form').each(function () {
		const $form = $(this);
		const playerIndex = Number($form.attr('data-player'));
		const usesAiSettings =
			playerIndex === aiPlayerIndex &&
			$form.find('[name="opponent-type"]:checked').val() === 'ai';

		$form.find('[name="icon"]').each(function () {
			const $input = $(this);
			const icon = String($input.val());
			const isUsedByOtherPlayer = players.some(
				(player, index) =>
					index !== playerIndex &&
					player.isReady &&
					player.icon === icon
			);

			$input.prop('disabled', usesAiSettings || isUsedByOtherPlayer);

			if (isUsedByOtherPlayer && $input.prop('checked')) {
				$input.prop('checked', false);
			}
		});
	});
}

This is interface help, not a replacement for validation, so setPlayer() still rejects a duplicate. Doing both means the form prevents the common mistake while the game rules still protect themselves if state changes in an unexpected order.

Native dialogs for results and confirmations

The inline replay box becomes a native

, and two more dialogs confirm a mid-game token change and suggest a difficulty. Here is the token confirmation; the other two use the same pattern and are included in the full index.html:


	Restart the game?

Using the native dialog element instead of building a pretend modal from a positioned

gives us modal behavior, a backdrop, and Escape-key events. We still decide what Escape means so every closing path runs the same cleanup.

Inside setPlayer(), this check pauses a real token change only after the game has started. Changing a name or difficulty can continue normally:

if (
	!isAi &&
	player.isReady &&
	gameHasStarted() &&
	icon !== player.icon &&
	confirmedTokenChangeForm !== this
) {
	pendingPlayerForm = this;
	window.clearTimeout(aiTimer);
	$('#token-change-confirmation-message').text(
		`Changing the token for ${player.name} will restart the current game and clear the board. Do you want to continue?`
	);
	document.getElementById('token-change-confirmation').showModal();
	return;
}

function gameHasStarted() {
	return board.some((cell) => cell !== null);
}

function closeDialog(dialogId) {
	const dialog = document.getElementById(dialogId);

	if (dialog.open) {
		dialog.close();
	}
}

function cancelTokenChange() {
	if (pendingPlayerForm) {
		const $form = $(pendingPlayerForm);
		const playerIndex = Number($form.attr('data-player'));

		$form
			.find('[name="icon"]')
			.prop('checked', false)
			.filter(function () {
				return $(this).val() === players[playerIndex].icon;
			})
			.prop('checked', true);
	}

	pendingPlayerForm = null;
	closeDialog('token-change-confirmation');

	if (playersAreReady() && !roundIsOver) {
		beginTurn();
	}
}

function confirmTokenChange() {
	const playerForm = pendingPlayerForm;

	if (!playerForm) {
		return;
	}

	pendingPlayerForm = null;
	confirmedTokenChangeForm = playerForm;
	closeDialog('token-change-confirmation');

	try {
		$(playerForm).trigger('submit');
	} finally {
		confirmedTokenChangeForm = null;
	}
}

Canceling restores the radio selection to the saved player token. Confirming resubmits the original form, and confirmedTokenChangeForm tells setPlayer() not to ask the same question again. The finally block clears that temporary permission even if a future edit makes the submit handler throw an error.

Finishing a round now chooses exactly one modal: the difficulty suggestion when a streak reaches its threshold, otherwise the normal replay dialog.

// End a round. A difficulty question takes priority over the replay dialog.
function finishRound(message, winnerIndex = null) {
	roundIsOver = true;
	$('#game-board .cell')
		.prop('disabled', true)
		.attr('aria-disabled', 'true');
	if (winnerIndex === null) {
		$('#game-status').text(message);
	} else {
		showPlayerStatus(winnerIndex, ' wins this round!');
	}
	$('#round-result').text(message);

	if (!updateWinStreaks(winnerIndex)) {
		document.getElementById('round-actions').showModal();
	}
}

Connecting the new events

The last change is the event wiring at the bottom of tic_tac_toe.js:

// Connect page events after the HTML is ready.
$(function () {
	$('.player-form').on('submit', setPlayer);
	$('#player-2-form [name="opponent-type"]').on(
		'change',
		toggleOpponentSettings
	);
	$('#size-form').on('submit', setBoardSize);
	$('#board-size').on('input', previewBoardSize);
	$('#game-board').on('click', '.cell', playHumanMove);
	$('#restart-game').on('click', startNewRound);
	$('#confirm-token-change').on('click', confirmTokenChange);
	$('#cancel-token-change').on('click', cancelTokenChange);
	$('#token-change-confirmation').on('cancel', function (event) {
		event.preventDefault();
		cancelTokenChange();
	});
	$('#round-actions').on('cancel', function (event) {
		// Escape has the same result as choosing to play another round.
		event.preventDefault();
		startNewRound();
	});
	$('#accept-difficulty').on('click', acceptDifficultySuggestion);
	$('#keep-difficulty, #close-difficulty').on(
		'click',
		refuseDifficultySuggestion
	);
	$('#difficulty-suggestion').on('cancel', function (event) {
		// Prevent the browser's automatic close so every refusal uses the
		// same counter-reset and preference logic.
		event.preventDefault();
		refuseDifficultySuggestion();
	});

	toggleOpponentSettings();
	startNewRound();
});

The board still uses event delegation, but it now calls playHumanMove instead of the old all-purpose click function. Calling toggleOpponentSettings() once on startup makes the controls agree with the initially checked AI radio button before anyone touches the form.

Notice that every dialog’s button and Escape key lead to the same named function. Centralizing that cleanup instead of sprinkling dialog.close() calls everywhere prevents a closed dialog from leaving streak counters, selected radios, or pending forms in a half-finished state.

Ready to play

That is our old two-player game upgraded with a computer opponent, without throwing away the code that already worked. Humans and the AI share one move pipeline, Minimax supplies strategic moves, random choices keep easier levels friendly, and the larger boards use a depth limit so “Expert” does not turn the browser into a small space heater.

The most useful pattern here is not specific to tic-tac-toe: keep the rules in shared functions, then let different controllers—mouse clicks, keyboard-friendly buttons, or an AI—choose the inputs. That approach can also help us add online play later, because a move received over the network could call the same playMoveAt() function.

Try the finished demo, then make it misbehave on purpose. Change the difficulty probabilities. Make the AI dramatically announce its thoughts. Adjust the search depths and watch the performance. Small games are still wonderful laboratories, especially when your lab partner is named Quinn and insists on being a boot.

Have fun!

The post How To: Add AI to our jQuery Tic-Tac-Toe first appeared on WebDevPlayground.

Why Bother With Semantic HTML?

adi — Tue, 13 Oct 2026 20:53:46 +0000

Not too long ago (12 years or so), there appeared a new HTML version. It contained lots of cool stuff. It introduced us to some new semantic elements as well.

Well, if you are anything like me, you will not blindly jump on everything new just because of how cool it sounds. Plus, there are media elements, storage, and lots of other exciting things that HTML5 brought us, so I was very busy.

However, after some time, I noticed that I was actually too busy and lazy. Those new elements could save me some work. More importantly, they can also save me some time on debugging code. At least, for me, less work is a good thing…

So, suddenly, I did not feel comfortable with the “I wrote it once, it still works, so why would I touch something that is not broken?” approach.

Want to know why? I hope by the end of this article, you will understand why I find the elements so cool. Maybe, even agree with me?

What are the semantic HTML elements?

OK, so let’s talk about semantics first. Semantics simply means that an element has certain meaning in your code.

element contains some navigation. A

That is it. The browser already knows what this element is. It receives a keyboard focus. It behaves as expected. It can be disabled. It can submit the form. Screen readers understand it.

Sure, we may still need some CSS. The default button is not going to magically match our styles. Also, we may need some JavaScript to handle the button click event.

However, why spend time implement all of those boring features? Personally I rather delagate as much as possible to the browser.

It is also true for other HTML elements. For example, if we need to navigate to some other page, an element already knows how to behave. already knows how to connect to the form field. Certain type of already has a better keyboard appearance on a smartphone.

Remember how we spent time building and adjusting accordions? HTML5 lets us use

and

. These elements already known how to expand/collapse some content on a page.

Will it replace every custom control? No. However, if the standard HTML element already does what I need, I take the free help.

If you want to see the rest of the features provided by the browser, like

, , , and a lot more, MDN has it all. It also has a nice semantic HTML introduction page. And yes, I love the little

The data-player="0" attribute connects this form to player zero in our JavaScript array. Programmers usually start counting at zero; we are fun at parties.

The empty .form-message will hold validation errors. aria-live="polite" asks screen readers to announce new messages without rudely interrupting whatever they are already reading. The summary begins with the Boolean hidden attribute and appears after the form is successfully submitted.

Making an SVG token picker

The icons live in token-icons.svg as SVG elements. Here is the top hat:

currentColor is a handy little trick: the icon’s stroke inherits the CSS color of wherever we display it. One drawing can therefore be red for Player 1, green for Player 2, and another color when selected.

Each icon choice is still an ordinary radio button with an ordinary label:


	
	
		
		Top hat

The visible drawing is decorative, while “Top hat” remains available to a screen reader. Repeat this label for car, ship, and boot, changing both the radio value and the symbol after #token-.

We hide the small native radio circle and style its neighboring as the big clickable choice:

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.icon-picker {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

.icon-option {
	position: relative;
}

.icon-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.icon-option > span {
	display: grid;
	place-items: center;
	min-height: 3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--muted);
	background: var(--paper);
}

.icon-option input:checked + span {
	border-color: currentColor;
	color: var(--accent-dark);
	background: var(--surface-soft);
}

.icon-option input:focus-visible + span {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

Notice that the radio input itself is invisible but not display: none. It can still receive keyboard focus, and the final rule draws that focus around our custom-looking control.

Our first JavaScript: players and game state

Now open tic_tac_toe.js. We wrap everything in a function so our variables do not leak into the global scope:

// Wrap the demo so its variables do not become global variables.
(function ($) {
	'use strict';

	// Only these local SVG symbols may be used as player tokens.
	const allowedIcons = new Set(['hat', 'car', 'ship', 'boot']);
	const boardSizeClasses =
		'board-size-3 board-size-4 board-size-5 board-size-6';

	// Player data stays together in one small array.
	const players = [
		{ name: 'Player 1', icon: 'hat', wins: 0, isReady: false },
		{ name: 'Player 2', icon: 'car', wins: 0, isReady: false },
	];

	let boardSize = 3;
	let board = [];
	let currentPlayer = 0;
	let roundIsOver = false;
    // The rest of the code...
})(jQuery);

The $ parameter is our private nickname for jQuery. The four let variables describe the changing state of one round. Keeping that state in JavaScript—rather than trying to reconstruct it from colors and classes in the HTML—will make the game logic much easier to reason about.

We also need to create token images from JavaScript when somebody plays a move or saves their settings:

	// Make a reusable SVG that points to the local icon file.
	function createIcon(iconName) {
		const svg = document.createElementNS(
			'http://www.w3.org/2000/svg',
			'svg'
		);
		const use = document.createElementNS(
			'http://www.w3.org/2000/svg',
			'use'
		);

		svg.setAttribute('aria-hidden', 'true');
		use.setAttribute('href', `token-icons.svg#token-${iconName}`);
		svg.appendChild(use);

		return svg;
	}

SVG elements have their own XML namespace, which is why we use createElementNS() rather than jQuery’s shorter $(' form here.

Saving a player

When a setup form is submitted, we validate it, update the matching player object, and fill the summary:

	// Save one player's form and update the visible summary.
	function setPlayer(event) {
		event.preventDefault();

		const $form = $(this);
		const playerIndex = Number($form.attr('data-player'));
		const otherPlayerIndex = (playerIndex + 1) % players.length;
		const name = String($form.find('[name="name"]').val()).trim();
		const icon = String($form.find('[name="icon"]:checked').val());
		const $message = $form.find('.form-message');

		$message.text('');

		if (!name) {
			$message.text('Please enter a display name.');
			$form.find('[name="name"]').trigger('focus');
			return;
		}

		if (!allowedIcons.has(icon)) {
			$message.text('Please choose a token icon.');
			return;
		}

		if (
			players[otherPlayerIndex].isReady &&
			players[otherPlayerIndex].icon === icon
		) {
			$message.text(
				'Please choose a token the other player is not using.'
			);
			return;
		}

		players[playerIndex].name = name;
		players[playerIndex].icon = icon;
		players[playerIndex].isReady = true;

		const $playerCard = $form.closest('.player-card');
		const $summary = $playerCard.find('.player-summary');
		$summary.find('.summary-token').empty().append(createIcon(icon));
		$summary.find('.summary-name').text(name);
		$summary.find('.win-count').text(players[playerIndex].wins);
		$summary.prop('hidden', false);
		$form.find('.button--player').text(`Update Player ${playerIndex + 1}`);
		$playerCard.find('.player-settings').prop('open', false);

		// Changing a setup starts a fair, empty round.
		startNewRound();
	}

There are two different kinds of validation here. HTML’s required attribute helps the user, but JavaScript still checks the submitted data. The allowedIcons set also makes sure an unexpected token name cannot be turned into an SVG file reference. Finally, the two players cannot choose the same icon; a hat-versus-hat battle would get confusing rather quickly.

The names beginning with $, such as $form and $summary, are not special syntax. They are simply a convention that reminds us those variables contain jQuery objects.

Requirement 2: a board from 3 × 3 to 6 × 6

The board starts empty in the HTML because JavaScript is going to build the correct number of cells. Around it we place a size control, a status message, and the end-of-round controls:

Set both players to begin.

is the semantic place to show the range’s current value. The board status is another polite live region, so changes such as “Ada, choose an empty square” and “Grace wins this round!” can be announced by assistive technology.

Drawing boards with CSS Grid

The board stays square thanks to aspect-ratio. A size class decides how many rows and columns it has:

.board {
	display: grid;
	gap: 0.4rem;
	width: 100%;
	max-width: 34rem;
	aspect-ratio: 1;
	margin: 0 auto;
}

.board-size-3 {
	grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
}

.board-size-4 {
	grid-template: repeat(4, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
}

.board-size-5 {
	grid-template: repeat(5, minmax(0, 1fr)) / repeat(5, minmax(0, 1fr));
}

.board-size-6 {
	grid-template: repeat(6, minmax(0, 1fr)) / repeat(6, minmax(0, 1fr));
}

For example, repeat(4, minmax(0, 1fr)) means “make four equal tracks, and allow them to shrink all the way down to zero if necessary.” We apply it once before and once after the slash: rows first, columns second.

Each cell is a real

Mahjong Game – Adding Features

adi — Thu, 20 May 2010 20:07:06 +0000

Though it’s been a while, I think the time has come to revisit one of my previous tutorials: the Mahjong game. For those of you that haven’t read it, the Mahjong tutorial went throughthe stages of creating a very basic Mahjong game: the graphics, the layouts, the boards and all the rest. Since I published this series of tutorials, I’ve been asked about various of features such as hint and shuffle, and have decided that it’s about time for me to add them… so here goes

Argh! Where is that last pair?

Adding hints to the game is a fairly easy task, since we already have the ability to check which blocks are free. Even better: because we’ve marked the free blocks with a special class name, retrieving them at a later stage is just a matter of using a selector. Right now you may be thinking that showing a hint is a bit more complicated than just finding the free blocks; after all, a move requires two matching blocks. And you’re right, there is a bit more to it than that. Let’s see how we can do it:

function showHint(event){
	event.preventDefault();
	// Get the free blocks
	var $blocks = $("#game_board .block.free");
	var foundMatch = false;
	for(var x=0,total=$blocks.length;x 1 ){
			$match.filter(":first,:last").addClass("hint");
			foundMatch = true;
		}
		$block = $match = null;
	}
	$blocks = null;
	return false;
};

What we’ve done here is checked each free block on the board to see if there are more free blocks of the same class. The logic here is very basic: there are no priorities, nor any forward planning. This means that while this method will always find a free pair if one exists, it will by no means guarantee a “win” for the player.

If I could just move things around a bit…

The next feature we’re going to look at is shuffling the board. In order to shuffle the board we need to change the locations of all the blocks while maintaining the occupied spots in the layout, otherwise things could get a bit weird. But like the hint feature, it’s a bit more complicated then that. If you followed the previous posts you may remember that each block remembers its index in the layout, its layer, whether it’s covered or not, its z-index, and some more attributes, some of which help us determine whether the block is free. So in order not to mess up everything, we need to separate the position spot attributes (layer, index, z-index, top, left, covered) from the block attributes. Let’s see how we can do that:

function shuffleBoard(event){
	event.preventDefault();
	var spots = [];
	// Get all the blocks
	var $blocks = $("#game_board .block");
	$.each($blocks, function(index, el){
		// Save the used position so we can maintain the layout
		$block = $(el);
		var layer = $block.metadata()['layer'];
		var index = $block.metadata()['index'];
		spots.push({css: {
			top: $block.css("top"),
			left: $block.css("left"),
			"z-index": $block.css("z-index")
		}, layer: layer, index: index, covered: $block.metadata()['covered']});
		$block.removeClass('layer_'+layer).removeClass('index_'+index);
		$block = null;
	});
	// Now shuffle the positions and return the blocks
	spots = shuffle(spots);
	// Place the blocks again
	$.each($blocks, function(index, el){
		$block = $(el);
		var spotInfo = spots.pop();
		$block.css(spotInfo.css);
		// Alter the block's saved metadata to match the new position
		var mdata = $block.metadata();
		mdata['index'] = spotInfo.index;
		mdata['layer'] = spotInfo.layer;
		mdata['covered'] = spotInfo.covered;
		$block.data("metadata", mdata);
		$block.addClass('layer_'+spotInfo.layer).addClass('index_'+spotInfo.index);
		$block = null;
	});
	
	// Check for free blocks again, since we changed everything
	$blocks.removeClass("free").removeClass("hint");
	$(document).trigger("changed_num_blocks");
	
	$blocks = null;
	return false;
}

Thats about it: get all the blocks, extract their position information, and shuffle the positions array so we can put the blocks in a different order. After that, since we changed everything, we need to determine which blocks are free in the new order and inform the user of the number of pairs available.

A new look

They say you can’t have a new version without some graphical makeover, so I apologize that the game looks the same… but I do have a new, beetle-shaped layout for you, courtesy of Maurice de Regt. So head over to the demo and see how it looks :).

Some more code is required to get the finishing touches and interconnect all the features, but I do believe we’ve got the core of it covered. As always, you can find the rest of the javascript in the game demo itself:

Zip file for this tutorial

Demo for this tutorial

So until next time, have fun!

Adi Gabai

The post Mahjong Game – Adding Features first appeared on WebDevPlayground.

Using the keyboard arrow keys

adi — Sat, 05 Dec 2009 09:40:18 +0000

Today’s post is a rather short and simple one. In most client-based games today, you can move using your keyboard. Browser-based games, however, are usually controlled using the mouse. But though using the arrow or WASD keys to interact with web pages is not too common, it can still be quite useful.

In a web page, any key you press triggers an event, so using the keyboard to control a browser-based game is as simple as listening for and catching these events. Listening for keyboard events is fairly easy if you’re using JavaScript, and with jQuery it’s even easier. Before we get properly started, I’d like to introduce a very simple and useful jQuery plugin called HotKeys, which can help you attach to events in a simple manner. You can find it here, and binding with it is a simple matter of:

$(document).bind('keydown', 'Ctrl+c', fn);

Sometimes, however, you want to do things yourself and not use a plugin. As I said, that is simple as well. You probably already know how to bind an input box to the Enter key:

$("#my_input_field").keydown(function(event){
	If ( event.keyCode == 13 ){
		// Do whatever – enter key was pressed
}
});

Binding to other keys is pretty much the same. All you need to know is the code for your wanted key. For example, if you want to support the arrow keys you can use something like this:

$(document).keydown(function(event){
	switch (event.keyCode) {
			case 37:
				moveLeft();
				break
			case 38:
				moveUp();
				break;
			case 39:
				moveRight();
				break;
			case 40:
				moveDown();
				break;
		}});

You can also add support for the space key if you want; its code is 32.

’till next time,
Adi Gabai

The post Using the keyboard arrow keys first appeared on WebDevPlayground.

Mahjong Game – The End

adi — Sat, 14 Nov 2009 22:20:56 +0000

Over the course of the previous posts, we’ve built and set up the entire infrastructure for our mahjong game. All that is left now is to create the actual game logic. Let’s start by going over the required functionality. What do we have in this game?

The blocks are arranged in layers, and there can be multiple layers on a given board
In each turn, the player must select two free, matching blocks to remove them from the board
The game is won when there are no more blocks on the board
The game is lost if there are still blocks on the board, but no moves are available to the player

In the previous post, we created a script tag for each block on the board, to help us to transfer the block metadata to the game client. In order to be able to read this metadata, we are going to use one of my favorite jquery plugins: metadata. The metadata plugin can read data about each element from attributes or script tags—in our case we used script tags—so using this method to fetch data is as simple as adding the following line somewhere at the start of the script: $.metadata.setType("elem", "script");

Selecting Blocks

As stated above, each turn consists of the player selecting two blocks; if the blocks match each other and are not blocked by other blocks, they are removed from the board. Blocks are considered free if they can be moved either left or right without disturbing another block (i.e., there is no block immediately to their left or right, and there is no block above them). Let’s take a look at how we can check whether a block is free:

function freeToMove(el){
	var isFree = false;
	// If the element was marked free it can't be changed
	if ( el.is(".free") ){ 
		return true;
	}
        // Get some information with the metadata plugin
	var index = el.metadata()["index"];
	var layer = el.metadata()["layer"];
	
	// Check the same layer
	var $parent = el.parent("div#game_board");
	var cols = $parent.metadata()["cols"];
	var current_col = (index+1)%cols;
	var same_layer_class = ".layer_"+layer;
	var left_side_class = false;
	var right_side_class = false;
	if ( current_col != 1 ){
		left_side_class = "div.index_"+(index-2)+same_layer_class;
		left_side_class += ",div.index_"+(index-2-cols)+same_layer_class;
		left_side_class += ",div.index_"+(index-2+cols)+same_layer_class;
	} 
	// Make sure there is room for a full block or dont check it
	if ( current_col < (cols - 1) ){
		right_side_class = "div.index_"+(index+2)+same_layer_class;
		right_side_class += ",div.index_"+(index+2-cols)+same_layer_class;
		right_side_class += ",div.index_"+(index+2+cols)+same_layer_class;
	}
	if (( $parent.find(left_side_class).length == 0 ) ||
		( $parent.find(right_side_class).length == 0 )){
			/* 
			 * Nothing found on the right side or on the left side, 
			 * so the element is free from the sides...
			 * But is it free from above?  
			 * The server saved us some work by telling us if the block is
			 * covered or not.
			 */
			if ( el.metadata()["covered"] ){
				var upper_layer_class = ".layer_"+(layer+1);
				// The blocks above can be in 0.5 distance apart so we need to check a few classes
				// half before, the same, half after and the rows...
			
				var upper_classes = "div.index_"+(index-1)+upper_layer_class; // a bit to the left
				upper_classes += ",div.index_"+(index)+upper_layer_class; // directory above
				upper_classes += ",div.index_"+(index+1)+upper_layer_class; // a bit to the right
				upper_classes += ",div.index_"+(index-cols)+upper_layer_class; // a bit above
				upper_classes += ",div.index_"+(index+cols)+upper_layer_class; // a bit below
				upper_classes += ",div.index_"+(index-1-cols)+upper_layer_class; // a bit above to the left
				upper_classes += ",div.index_"+(index-1+cols)+upper_layer_class; // a bit below to the left
				upper_classes += ",div.index_"+(index+1-cols)+upper_layer_class; // a bit above to the right
				upper_classes += ",div.index_"+(index+1+cols)+upper_layer_class; // a bit below to the right
				// Even one of those blocks will prevent us from taking the block out
				if ( $parent.find(upper_classes).length == 0 ){
					isFree = true;
				}
			} else {
				// Not covered we are ok
				isFree = true;
			}
	}
	$parent = null;
	return isFree;
}

Whew, that was a bit long. But at least it wasn’t complicated: What we did here was check whether the block has already been marked as free (since once a block is marked as free, it can’t ever be blocked again). If it’s not already marked as free, we then determine whether there are blocks to the left and right of the block. If there aren’t, we check the layer above the block, to see whether it’s covered by a block from that layer.
Now, let’s see what happens when the user selects a block. To do that, we will use the toggleBlock function:

function toggleBlock(event){
	var $block = $(this);
	// Check if block is free
	var index = $block.metadata()["index"];
	var layer = $block.metadata()["layer"];
	$block.toggleClass("selected");
	// Did we just marked this block?
	if ( $block.is(".selected") ) {
		$(document).trigger("flipped_block");
		// Make sure the block is free for marking
		if ( freeToMove($block) ){
			$block.find("img").attr("src", "images/selected_tile.png");
			// Check how many blocks selected if pair - act
			var $selected = $block.parent("div").find(".selected");
			if ($selected.length == 2){
				// Two blocks are free to move and selected, check if we 
				// have a match
				var block_class = $block.metadata()["single"] ? 
								$block.metadata()["group_class"] : 
								$block.metadata()["block_class"];
											
				var $matched_blocks = $selected.filter("."+block_class);
				if ( $matched_blocks.length == 2 ){
					$(document).trigger("found_match", 
									{elements: $matched_blocks});
				} else {
					$(document).trigger("not_a_match", 
									{elements: $selected});
				}
				var $matched_cards = null;
			}			
			$selected = null;
		} else {
			$block.toggleClass("selected");
			$(document).trigger("blockNotFree", {element: $block});
		}
	} else {
		$block.find("img").attr("src", "images/hovered_tile.png");
	}
	
	$block = null;
};

The toggleBlock function is basically our “onClick”-type function: it will be called every time a block is clicked and select or unselect the block, assuming it’s not blocked by another. As can be expected, it uses the freeToMove function we just defined to determine this. In addition, if two free blocks are selected, the toggleBlock function will check for a match, and raise the appropriate event. This event will in turn call a function that will handle the blocks’ removal from the board, and check for a win/lose condition.

Removing Blocks

Removing blocks from the board and checking if the player won is fairly simple:

function foundMatchingBlocks(event, params){
	var $elements = params.elements;
	$elements.remove();

	// Check if we have blocks left
	if ( $("#game_board div.block").length == 0 ){
		// Game won
		$(document).trigger("game_won", {});
	}
	// Don't halt the progress to make this change
	setTimeout(function(){
		$(document).trigger("changed_num_blocks");
	}, 1);
	$elements = null;
};

One thing worth take a closer look at is the setTimeout function right in the middle: in my experience, when you start operations that can take a while it’s best to isolate them and separate them from our current call, which requires a more immediate response. You can see that within setTimeout’s scope we’re only triggering a custom event. We’re merely leaving a hook for future features – specifically, showing how many free blocks remain. This event can take a while to run, since it needs to scan the board for free elements (something that will take some time on IE), so putting these events in a different, unrelated scope can prevent our game from looking unresponsive. Please note that if the event was to trigger something which had to end before we could continue, we would have had to find a different method.

Now that we can handle two matching blocks, we also need to handle cases where the blocks do not match. This can be done using a simple function like this:

function clearMarkedBlocks(event, params){
	params.elements.removeClass("selected").find("img").attr("src", "images/hovered_tile.png").hide();
};

Someone Won?

Up until now we’ve been happily toggling blocks and removing matched pairs, but what do we do if someone won? We’ve seen that our foundMatchingBlocks function checks whether there are no more blocks left (our winning condition) and triggers the proper event, but what happens then? And also, what if there are no more moves?

function gameWon(){	
	var $game_board = $("#game_board_container");
	var $player_won = $("#player_won");
	$game_board.hide();
	$player_won.show();
	$("#start_again").show();
	$game_board = $player_won = null;
};

function gameOver(){
	var $game_board = $("#game_board_container");
	var $player_lost = $("#player_lost");
	$game_board.hide();
	$player_lost.show();
	$("#start_again").show();
	
	$game_board = $player_lost = null;
};

Above are two really simple functions that simply handle the display of winning and losing. But… wait a minute… when and how do we check for the losing condition (no matching blocks left)? Well… remember the setTimeout-triggered event we talked about? Every time we remove blocks from the board we also trigger the changed_num_blocks event, which fires the following function:


function updateFreeBlocks(){
	$("#availableMoves").text("...");
	setTimeout(function(){
		var free = findFreeBlocks();
		$("#availableMoves").text(free);
		if ( !free ){
			$(document).trigger("game_over");
		}
	}, 1);	
};

The updateFreeBlocks function checks how many matching pairs are left on the board. If there are no matching pairs left, updateFreeBlocks will trigger the game over event; otherwise, it will just update the display with the new number of remaining matches. Because we already know how to tell whether a block is free, checking if we have any matches left is pretty simple. We can do it by mapping the free blocks, and counting for possible pairs, like so:

function findFreeBlocks(){
	var $blocks = $("#game_board .block");
	var block_classes = {};
	var pairs = 0;
	$.each($blocks, function(index, el){
		var $block = $(el);
		// Check if the block is free
		if ( freeToMove($block) || $block.is(".free") ){
			$block.addClass("free");
			var class_name = ($block.metadata()["single"] ?
								 $block.metadata()["group_class"]									
								: $block.metadata()["block_class"]);
			// If free set the counter 
			block_classes[class_name] = ++block_classes[class_name] || 1;
			if ( block_classes[class_name] == 2 ){
				++pairs;
				block_classes[class_name] = null;
				delete block_classes[class_name];
			}
		}
		$block = null;
	});

	$blocks = null;
	return pairs;
}

That’s Not All

Some more code is required to get the finishing touches done on the game, but I do believe we’ve got the core of the game covered. As always, you can find the rest of the javascript in the game demo itself:

Zip file for this tutorial

Demo for this tutorial

So until next time, have fun!

Adi Gabai

The post Mahjong Game – The End first appeared on WebDevPlayground.

Mahjong Game – The Board

adi — Fri, 06 Nov 2009 15:37:04 +0000

In the previous posts we created most of the graphics needed for the mahjong game, and built the layout files that we will use. Now it’s time to put those layout files to some use.

The Layout Class

Our first step now will be to create a Layout class that will read our layout files. Let’s say we have a mahjong directory in which we’ve created a layout directory, which in turn contains our layout files.
The constructor for our Layout class can look something like this:

function __construct($layout_name) {
	$this->file = "layouts".DIRECTORY_SEPARATOR.
                         $layout_name.".inc.php";
	$this->loaded = $this->load_layout_from_file();
}

Every time the class is loaded, it will go and fetch a layout file, which can then be processed like so:

private function load_layout_from_file(){
	if ( file_exists($this->file) ){
		include $this->file;
		$this->map = $layout;
		$this->rows = $rows;
		$this->cols = $cols;
		return is_array($this->map);
	} else {
		return FALSE;
	}
}

Since our layer file already contains the variables ($layout, $rows, $cols), the process of loading and processing takes little time. By including the file we gain access to those variables, and can save them in our class. The layout variable should always be an array, since the layout itself is basically an array of positions.

At this point we can read the layout file and store it in our class, but we still need to build a game board out of it. To do that, we’re going to need two more classes: one to handle the board and one to handle a block on the board (AKA tile). But before we rush off to build these classes, let’s take another look at our layout file, because there’s quite a bit more information we can get out of it.

Another responsibility of the Layout class is processing the location of each block in each layer of the layout, and providing relevant information about it, such as its position or whether or not it is covered by a higher layer.
Here’s some code to clarify things:
Numbers of layers in the layout:

public function num_of_layers(){
	return count($this->map);
}

The position of a block:

public function get_block_coords($index){
	++$index; // Easier to calc
	$b_width = constant("BLOCK_WIDTH");
	$b_height = constant("BLOCK_HEIGHT");
		
	// Find the index column
	$col = ($index % $this->cols) ? $index % $this->cols : $this->cols;
		
	// Find the index row
	$row = ceil($index / $this->cols);
		
	// Pieces on the board can be 0.5 apart
	$top = (($row - 1) * (constant('BLOCK_HEIGHT') / 2))-(($row-1)*2);
	$left = (($col - 1) * (constant('BLOCK_WIDTH') / 2))-(($col-1)*2);
		
	return array("pos"=>array("top"=>$top, "left"=>$left));
}

In the above method you can see that we’re placing the blocks according to their index in the array, but since our array has in fact double the actual number of columns and rows, we need to halve the result in order to get the right position. The end result of this method is the left and top positions of the block’s html element.

In addition to providing the positions of the separate blocks, the Layout class also needs to know how to provide the coordinates of the entire layer. We can do this by adding the following loop:

public function get_active_coords_by_layer($layer){
	$active = $this->get_active_indexes_by_layer($layer);
	$coords = array();
	for($i=0,$total=count($active);$i < $total;++$i){
		$coords[$i] = $this->get_block_coords($active[$i]);
		// Change the location to give a bit of a 3d look
		$coords[$i]["pos"]["top"] = $coords[$i]["pos"]["top"] - ($layer * 6);
		$coords[$i]["pos"]["left"] = $coords[$i]["pos"]["left"] - ($layer * 6);
		$coords[$i]["layer"] = $layer;
		$coords[$i]["index"] = $active[$i];
		$coords[$i]["zIndex"] = $this->map[$layer][$active[$i]];
		// Save some of the browser work since we are faster and see if this block is covered.
		// Indexes that might get in the way in upper layers are the ones that are
		// directly above, slightly to the left and slightly to the right of the block
		$covered = false;
		if ($this->is_block_spot($layer+1, $active[$i]) ||
			$this->is_block_spot($layer+1, $active[$i]-1) || 
			$this->is_block_spot($layer+1, $active[$i]+1) ||
			$this->is_block_spot($layer+1, $active[$i]+$this->cols) ||
			$this->is_block_spot($layer+1, $active[$i]-$this->cols) ||
			$this->is_block_spot($layer+1, $active[$i]-1+$this->cols) ||
			$this->is_block_spot($layer+1, $active[$i]+1+$this->cols) ||
			$this->is_block_spot($layer+1, $active[$i]-1-$this->cols) ||
			$this->is_block_spot($layer+1, $active[$i]+1-$this->cols)){
			$covered = true;
		}
		$coords[$i]["covered"] = ($covered) ? 'true' : 'false';
	}		
	return $coords;
}

What we did here was take the array holding the current layer, filter out the indexes which don’t contain blocks, so that we’re left only with cells that actually represent blocks. For each one of these cells, we checked the position value for the block, and used that to see if it is covered by a block in a higher layer. If you’re wondering how we can filter the active cells, it can be done like this:

private function check_has_block($var){
	return($var>0);
}
private function get_active_indexes_by_layer($layer){
	return array_keys(array_filter($this->map[$layer], array($this, "check_has_block")));
}

First we filter the array to get just the cells whose value is higher than zero, and then we request the keys of those cells.

Now our Layout class can really supply us with what we need in order to build the board, but as you can see it doesn’t build anything; it just returns an array of coordinates, which will be used to actually build the board (like in the Memory game). The one that will actually build the board will be the Board class, which will use the Block and Layout classes to generate that bodacious board-building code. And since we’ve already completed our Layout class, let’s get started on the Block class.

The Block Class

The Block class is pretty simple. Upon its creation it will get its index in the graphic map file we created earlier (i.e., which block it represents), and will then position the background image in the map file. It will do this by checking which row and column it’s located in; combined with the (already known) block dimensions, this provides the needed information. The block’s index in the graphics file will also tell the Block class if it’s a normal numbered block, or a group of special blocks that can exist only once and match each other.

function __construct($index) {
	$this->index = ++$index;
		
	// The structure of the image file is known
	$cols = constant("COLS_IN_IMAGE");
	$last_row_index = constant("LAST_ROW_MARKER");
	$special_group_size = constant("SPECIAL_GROUP_SIZE");
	if ( $index <= $last_row_index ){
		$this->row = ceil($index / $cols);
		$this->col = ($index % $cols) ? $index % $cols : $cols;
	} else {
		// We are at the last row - special groups
		$this->row = constant("ROWS_IN_IMAGE");;
		$this->col = $index - $last_row_index;
		$group_index = ceil($this->col / $special_group_size);
		$this->css_extra_class = "special_group_".$group_index;
		$this->single = TRUE;
	}
	$this->top = 0 - (($this->row - 1) * constant('BLOCK_HEIGHT'));
	$this->left = 0 - (($this->col - 1) * constant('BLOCK_WIDTH'));
	$this->css_class = $this->prefix.$index;
}

After setting all of these values, the block knows how to generate its css and html markup:

public function get_css_block(){
	return '.'.$this->get_name().'{background-position: '.
		$this->get_left().'px '.$this->get_top().'px;}';
}

public function get_positioned_html_block($params){
	$covered = $params["covered"];
	$pos = $params["pos"];
	$layer = $params["layer"];
	$index = $params["index"];
	$zIndex = $params["zIndex"];
		
	$style = ' style="top:'.$pos["top"].'px;left:'.$pos["left"].
		 'px;z-index:'.$zIndex.';" ';
	$classes = 'block '.$this->get_name().' '.
		   $this->css_extra_class.' index_'.$index.
		   ' layer_'.$layer;
	return "r".
			''.
				''.
				''.
			'';
}

As you can see in the above html method, the block will get its layout information as a parameter just to enable it to generate the markup; as an entity it only knows its type and which graphic to display.

Finally, the Board Class

As we’ve said before, the one that will bring all of the above together and use it all to create the actual board will be the Board class.
When the board is initialized it will gather all the required details:

function __construct($layout) {
	$blocks = array();
	$s_blocks = array(); // Some blocks are special
		
	// The css for a generic board needs to be the first so that it can be overriden easily
	$this->css[] = ".block{".
		"width: ".(constant('BLOCK_WIDTH'))."px;".
		"height:".(constant('BLOCK_HEIGHT'))."px;".
		"background: url(".constant('TILES_IMAGE').") no-repeat scroll;".
		"background-position: 0px 0px;".
		"position:absolute;".
		"float:none;".
	"}";
	// We run through all the blocks and get the block object and css for each of them
	// In addition to that, we need to separate the singles from the normal blocks so they will not be duplicated
	for ( $i = 0; $i < constant('BASE_CARDS'); ++$i ) {
		$block = new Block($i);
		if ( $block->can_duplicate() ){
			$blocks[] = $block;
		} else {
			$s_blocks[] = $block;
		}
		
		$this->css[] = $block->get_css_block();
	}
	// We need to have 2 pairs of each block, for a total of 4
	$this->blocks = array_merge($blocks, $blocks, $blocks, $blocks);
			
	// The special blocks are not duplicated, but we still need them
	$this->blocks = array_merge($this->blocks, $s_blocks);
			
	// Shuffle the blocks to create the order on the board
	shuffle($this->blocks);
			
	// Get the layout
	$this->layout = new Layout($layout);
}

After the Board class is initialized, we can easily get the html markup and the needed css:

function get_css(){
	return implode("n",$this->css);
}
		
function get_html(){
	$cols = $this->layout->get_visible_cols();
	$rows = $this->layout->get_visible_rows();
	$board_width =  $cols * constant("BLOCK_WIDTH");
	$board_height = $rows * constant("BLOCK_HEIGHT");
	$board_html = '';
	$board_html .= '';
	$layer = 0; // The first layer
	$blocks_counter = 0;
	for ( $layer=0, $num_of_layers=$this->layout->num_of_layers(); $layer < $num_of_layers ; ++$layer){		
		$active_blocks = $this->layout->get_active_coords_by_layer($layer);		
		// For each block in this layer
		for ($i=0,$total=count($active_blocks);$i<$total;++$i,++$blocks_counter){
			$block = $this->get_block($blocks_counter);
			$params = array("pos"=>$active_blocks[$i]["pos"],
						"index"=>$active_blocks[$i]["index"],
						"layer"=>$layer+1,
						"zIndex"=>$active_blocks[$i]["zIndex"],
						"covered"=>$active_blocks[$i]["covered"]);
			$board_html .= $block->get_positioned_html_block($params);
		}
	}
	$board_html .= '';		
	print $board_html;
}

Thats about it. A simple file with a call to the following code can get us a nice looking mahjong game board. But we are still only halfway there: we still need to add the game logic, and we will do just that in our next post.



...

get_html();
?>

Until then, have fun!

Adi Gabai

The post Mahjong Game – The Board first appeared on WebDevPlayground.

Mahjong Game – The Layout

adi — Fri, 09 Oct 2009 12:16:30 +0000

In the previous post we created most of the graphics needed for the mahjong game. Now, it is time to create the board itself.

Since we are dealing with a lot of elements here (at least 144 objects for the tiles alone), it is better to build the layout on the server side. To do this, we will use PHP. We already know some of the code since we used it in the Memory game but we have a lot of new additions here.

We know we only have one graphic file
The board does not have a quadrangular (square-like) shape.
The board is made up of several layers

Before we start, remember: today we’re only going to create the logic for the creation of the game board; we’re not going to touch the gameplay logic just yet. Let’s start by creating a layout file. There are number of ways to create a layout file. The one I’m about to show here is used mainly for its simplicity and is probably not the most efficient way, but it will do for now. We are going to use Excel, or any other application that can generate a csv from a table. I guess I could spend the time to build a layout builder for the game, but as I don’t have much time to spare, the csv will do for now.

What I did was to create a “table” with 30 columns and 16 rows in order to draw the first layout. Each tile will span 2 cells horizontally and vertically (a 4-cell square), but we will only use the top left cell to represent the tile. In this table we will fill in the first layer of the layout, but before we do that we first need to understand the limitations of our game client. The game is for a web browser, so in order to put one element on top of another element in a browser, we need to make use of positioning and z-index. Positioning allows us to say where we want each element to be, and the z-index allows us to tell the browser which element is higher than another. This wouldn’t be an issue for us if we were using 2D tiles, but because in the last post we created 3-dimensional tiles, adjacent tiles will by necessity overlap one another, and we will need to avoid situations like this one:

If we left the z-index out of the picture, the browser would render the layout with the default behavior of placing each element on top of the previously created element, but that would leave us little room for adjustment if we needed to place a certain tile on top of another. Such a situation would give us quite a headache, even with the basic layout.

So now that we know that the z-index is a factor, we can start filling our table. In our table, each cell will contain one of the following: If the cell is not the top left cell of a tile, it will contain a 0; otherwise, it will contain the tile’s z-index. For the first layout, we’ll use incrementing z-index values to make it easy to understand; for the second, we will generally use the same small number and only use others when we need to change the default behavior, to make it quicker :). Getting back to our table for the first layer, go ahead and fill out the cells as in this image.

As you can see, the filled blocks kind of look like a turtle, which is the classic layout for mahjong. If you take a closer look at the table, you will notice the value of cell A8 is inconsistent with the rest, since in this position the default behavior is not what we want (we want the tile in A8 to be “lower” than the tile in C7, even though it is created after it), and so we use a lower z-index. The same is true for cells AA8 and AC8, except in these cells we will use a higher z-index rather than a lower one (because we want them to be higher than the tile in cell Y9, even though they are created before it). Generally speaking, we only need to tweak the z-index values in situations where the tiles are not flush with each other, like in the picture above.

Now that we have our first layer, the second is even easier to build. Because each layer’s tiles are always placed on top of existing tiles in the previous layer(literally on top, not just overlapping like the situations we’ve had so far), we are limited in where we can place the tiles. Create another table below the first one with the same number of rows and columns and then fill it like in this image.

Now that you’ve seen how to build the first and second layers, the rest are really easy, but in case you want to see how they’re done, you can view them in level 3, level 4 and level 5.

Now that we have all the layers in our spreadsheet, we need to convert them to a format that PHP can work with quickly. To do so, we will use a middle man in the form of a csv (comma-separated values) file. Let’s create a directory called layout under our mahjong directory. In it we will put all the layout files. Create a new file called classic.inc.php to be included in our php script, and open this file for editing. In the beginning of the file we will have some details about our layout: the number of columns and rows and an array of levels for the layout, like so:

$rows = 16;
$cols = 30;
$layout[0] = array(
	0,0,1,0,2,0,3,0,4,0,5,0,6,0,7,0,8,0,9,0,10,0,11,0,12,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,13,0,14,0,15,0,16,0,17,0,18,0,19,0,20,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,21,0,22,0,23,0,24,0,25,0,26,0,27,0,28,0,29,0,30,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,31,0,32,0,33,0,34,0,35,0,36,0,37,0,38,0,39,0,40,0,41,0,42,0,0,0,0,0,
	30,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,59,0,
	0,0,46,0,47,0,48,0,49,0,50,0,51,0,52,0,53,0,54,0,55,0,56,0,57,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,58,0,59,0,60,0,61,0,62,0,63,0,64,0,65,0,66,0,67,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,68,0,69,0,70,0,71,0,72,0,73,0,74,0,75,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,76,0,77,0,78,0,79,0,80,0,81,0,82,0,83,0,84,0,85,0,86,0,87,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);
$layout[1] = array(
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,100,0,100,0,100,0,100,0,100,0,100,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,100,0,100,0,100,0,100,0,100,0,100,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,100,0,100,0,100,0,100,0,100,0,100,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,100,0,100,0,100,0,100,0,100,0,100,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,100,0,100,0,100,0,100,0,100,0,100,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,100,0,100,0,100,0,100,0,100,0,100,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);
// $layout[2] = ... and so on

To keep the example short I left out some of the levels, but adding them is a simple matter of copying and pasting from your csv file and adding a comma to the end of each line (except for the last line in each layer). What we did here was create a layout array, which holds each layer as an array. Our array is one-dimensional, but since we know how many rows and columns comprise it, we can use that information to “divide” the array and build our layout.
Now that we have the php file we are finally ready to read and process it, and this is what we will do in our next post.

If you want to see another example of a layout, I created another layout in the shape of a cat. You can download all the relevant files here.

So until next time, have fun

Adi Gabai

The post Mahjong Game – The Layout first appeared on WebDevPlayground.

Mahjong Game – The Graphics

adi — Sun, 04 Oct 2009 20:40:43 +0000

The next game we’re going to build is a Mahjong solitaire game. Mahjong is a tile matching game which I feel is a natural step forward from the Memory game we created in the previous post, so if you haven’t read that post yet, you might want to give it a look.

Since this is a more complicated game, I decided it would be best to tackle it in several posts instead of just one. In this first post we’ll create the graphics needed for the game. Let’s start by considering what this game needs to include. If you search the web for even a few minutes you will find that there are several versions of this game, each with its own set of rules. To make things easier, our own basic version of the game will use simplified versions of some rules, and ignore others (like score) entirely.

So what does that leave us with?

Multiple sets of tiles:
27 Common tiles, consisting of 3 sets of numbered tiles, each set with 1-9 images of the set icon (e.g., flowers, cars). A Common tile must be matched to its exact counterpart (e.g., six of cars matches six of cars)

4 Picture tiles. Picture tiles have only a single large icon on them, and work the same as Common tiles, in that each tile can only be matched to its exact counterpart (e.g., pink clock matches pink clock)

4 Single tiles. These tiles feature a picture (not an icon) but no numbers, and each tile can be matched to any of the others (e.g., squirrel matches beach)
With the exception of the Single tiles, there are 2 pairs of each tile (144 tiles total)
The board can have several different layouts.
In each turn the player must select two matching tiles, in accordance to the behaviors described above, and the rules described below.
If the player selects two valid, matching tiles, the tiles are removed from the board.
The game is won when there are no more tiles on the board.
The game is lost if there are still tiles on the board, but no more moves are available to the player.

As I said, we are going to start by creating the game’s graphics. Since we have about 35 different tiles with different graphics on them, we will be dealing with a lot of objects, which means we are going to suffer a hit to performance. Therefore, whatever we do next must take performance into account. What does performance have to do with the graphics, you ask? To answer that question, let’s consider how we did things in the Memory game: In that game, we used separate image files for each card. If we did the same here, we would trigger a lot of different network calls, and even if we used caching it would still be slow, because we’d have to move around a whole bunch of different graphic files; unlike the Memory game, where we had relatively few cards, and therefore relatively few graphic files (actually, now that I’ve made that observation, I think I need to go and apply the solution which I’m about to share to the Memory game, too). To work around the performance issue, we could combine all the tiles into one big graphic file, which we could preload if we wanted. If we used caching, the performance would be even better. Because all of our tiles have the same dimensions, I think it would be very easy to use a single file for all of them.

So let’s get to it. Go ahead and open your favorite graphics software; in this example I’ll be using Adobe Fireworks, but I’m pretty sure any program will do. The first thing we need to create is our basic building block: the tile. Since Mahjong boards have layers, we need to make sure our tiles have a 3D look. To do that, we will draw a rectangle with a height of 68 and a width of 50. I chose white as the background color and a shade of gray for the stroke (or borders): #999999. To get the 3D effect, we will need to give this image some depth. We can do this by drawing a 4 pixel diagonal line from the upper right corner to the lower right side with the same color as the stroke. Do the same at both of the bottom corners. The end result will be a rectangle with 3 diagonal lines coming out of its corners:

Draw lines to connect the diagonals and create the 3D rectangle:

We now have 2 big empty spaces created by the lines we added. I filled them up with a lighter shade of gray: #cccccc.
So the final image is:

YAY! We now have a basic empty tile! We can now create a new file with a height of 360 and a size of 486 and fill it with our new tiles (make sure you are accurate in positioning them side-by-side. The end result should look like this:

Excellent! We are now ready to fill in the tiles. The structure of this file is as follows: the 3 upper rows contain the Common tiles. The 4th contains two sets of Picture tiles, and the last row contains 4 Single tiles (remember, these tiles will not be duplicated).
For icons you can just use whatever you want. Just make sure you are not violating any copyrights while doing so.
My final image looks like this:

Now we have our tiles image ready. In my next post we will take this file and extract single blocks from it for display. We will also create the logic to duplicate the tiles according to our game guidelines.

Remember: When using a lot of images in one webpage it is wise to reduce network call by having one file that includes all the images when possible (at least when they are for the same purpose and are the same size).

So until next time, have fun

Adi Gabai

The post Mahjong Game – The Graphics first appeared on WebDevPlayground.

A Basic Memory Game with jQuery and PHP

adi — Mon, 21 Sep 2009 18:14:38 +0000

So, I got up this morning to find that my 3.5 year old daughter is busy playing on my laptop. She decided she wants to play so she found the CD for her game, opened the DVD drive and loaded her game. She was very busy playing when I got up, and needless to say I was quite surprised. I figured it was time to create some new games for her, so I thought I’d start with a basic Memory game (some may know it as Concentration). You know, the one with lots of face down cards where you need to find pairs of matching cards.

So let’s break down what’s in this game:

Pairs of cards
Raising the level increases the number of cards
In each turn the player flips over 2 cards
Matching cards are removed from the board
The player wins when there are no more cards
To keep things interesting – some effects

We have a lot to cover in this little guide so in order to keep things as short and quick as we can I’m going to skip some of the phases in building this game. If you want to see those phases, they can all be found in the demo.

To understand this guide you need to know some basic javascript & jQuery, and some PHP. There are some excellent guides for these topics all over the web to get you started or answer your questions.

1. Pairs of cards

In order to create the cards that will be used in the game I used an array to hold the available image files. I used 20 different image files in order to create a randomness factor for the images (assuming I will use less than 40 cards). When the board needs to be initialized, we select some random elements from the array of image files according to the number of cards we need on the board, and then we create card objects from each file. Since we know we need two of each card on the board, we “double” the array by merging it with itself. And now, a quick shuffle and the array for the board is done.

// Shuffle the available image files array so  
// we won't pick the same ones every time
shuffle($card_files);
// Get the card objects
$cards = array();
for ( $i = 0; $i < $num_of_cards; ++$i ){
	$cards[$i] = new Card($card_files[$i]);
	$this->css[] = $cards[$i]->get_css_block();
}
// Double the array so that we'll have pairs
$this->cards = array_merge($cards, $cards);
	
// Shuffle the cards to create their order on the board
shuffle($this->cards);

What is a card? Well a card will be displayed in the game, we will need to know how to build its css properties in such a way that we will have an element with the right background image and so on. As you can see below, the Card class is quite simple:

class Card{	
	private $css_class = "";
	private $url = "";
		
	function __construct($url) {
		$this->url = $url;
		$this->css_class = $this->extract_name($url);
	}
		
	function get_name(){
		return $this->css_class;
	}
		
	function get_css_block(){
		return "n.".$this->get_name()."{background:url(".$this->url.") center center no-repeat;}";
	}
		
	function get_html_simple_block(){
		return "rget_name()."'}">";
	}
		
	function get_html_block(){
		return "rget_name()."'}">
				r
				r
			";
	}
	private function extract_name($str){
		$tmp = pathinfo($str);
		return $tmp['filename'];
	}
}

The Card object creates its css class name based on the file name. It handles the its own html markup and css markup, and that’s about it. The Board class that we saw pieces from earlier will handle the building of the board’s html and css using the Card class.

2. Raising the level increases the number of cards

In the code above we used a variable called num_of_cards. This variable’s value is determined by the level of the current game: At low levels we will have relatively few cards, but as the level increases, so does the number of cards on the board.
Let’s look at the code for this:

private var $modes = array(6, 8, 10, 12, 15, 18);
...
$num_of_cards = $this->modes[$level - 1];

This code was also taken from the Board class. Let’s see how it adds up by taking a look at how we initialize the Board class and set the level:

$level = 1;

if (isset($_REQUEST['level']) ) {
	$level = $_REQUEST['level'];
		
	$board = new Board($level, $CARDS);
	$_SESSION['board'] = $board;
} else {
	if (!isset($_SESSION['board'])) {
		$board = new Board($level, $CARDS);
		$_SESSION['board'] = $board;
	} else {
		$board = $_SESSION['board'];
	}
}

If the user sends a request for a certain level, we use it for every game he plays from this moment on. If no request is sent, we use the default first level (1). In addition, we can see that we only set the board once per session, unless the a level request is sent, which is almost true (later on we will see that we also reset the board after the player wins). Saving the board in the session is done with the future in mind: as you will see in this post, the logic of matching the cards is carried out, for the moment, by the client. But if you want the game’s logic to be more secure, it should be carried out in the server, and then the server will need to know how the game board is built. For now, let’s go back to our subject.

Just before we move on to see how the player turns the cards we need to actually see how we build the board:


...

get_html();
?>

3. In each turn the player flips over 2 cards

Now that we have our board, it’s time to add some interactivity and the main gameplay. We will use a special (and excellent) jQuery plugin to handle the flipping for us. You may have noticed before that, when we built the card’s html block, we actually built a wrapper and two elements inside; one for the back side and one for the front. This markup is recognized by the QuickFlip plugin (which you can get here). Now there are two things we need to do. First, we need to register the Click events for the cards. Second, when a card is clicked, we need to trigger the flip and run a check to see if:

The two cards match, but there are still cards on the board
The two cards don’t match
The two cards match, and there are no cards left on the board (i.e., the player has finished the game)

Let’s take a look:

var chk_cards_timeout = null;

$(document).ready(function(){
	$(".card").bind("click", toggleCard);
	$(".card").quickFlip();
});

function toggleCard(event){
	if ( chk_cards_timeout != null ){
		clearTimeout(chk_cards_timeout);
		chk_cards_timeout = null;
		checkCards();
	}
	var $card = $(this);
	if($card.children(".off").is(":visible")){
		$(document).trigger("flipping_cards");
		var num_already_opened = $card.parent("#game_board").find(".card>.on:visible").length;
		var css_class = $card.metadata()["toggle"];
		$card.children(".on").addClass(css_class);
		$card.quickFlipper();
		
		if ( num_already_opened == 1 ){
			chk_cards_timeout = setTimeout(checkCards, 1000);
		}
	}
	$card = null;
};

In order to do its job, QuickFlip will duplicate our elements, so we want our selectors to be more precise. That’s why we’re using the direct child (>) directive in our css selector. We can also see the use of the setTimeout function since in case we have two cards turned over, we want to give the user a second or two to look at them before we turn them face down again. We added the card’s css class to its element according to the metadata which we got when the Board class built the html (metadata is another excellent jquery plugin that can be found here).
If you noticed the line: $(document).trigger(“flipping_cards”); we are also triggering a custom event which we can bind to later with different plugins for the game if we will want to, if you haven’t already done so you can read about custom events in my previous post: jQuery custom events.

4. Matching cards are removed from the board

Now that the player can flip a card to see its image, we need to check if we have a match or not. If we have a match, the cards will be removed from the board; if we don’t, the cards will be turned face down again.

$(document).ready(function(){
	$(document).bind("found_match", matchingCards);
	$(document).bind("no_match", resetOnCards);
});

function checkCards(){
	$on_cards = $("#game_board .card>.on:visible");
	if ( $on_cards.length == 2 ){
		$(document).trigger("player_made_move");
		// Get the first object css class
		var css_class = $on_cards.parent(".card").metadata()["toggle"];
		$matched_cards = $on_cards.filter("."+css_class);
		var event_name = "no_match";
		if ( $matched_cards.length == 2 ){
			event_name = "found_match";
		} 
		$(document).trigger(event_name, {css_class: css_class});
		$matched_cards = null;
	}
	clearTimeout(chk_cards_timeout);
	chk_cards_timeout = null;
	$on_cards = null;
};

function resetOnCards(event){
	$cards = $(".on:visible");
	$.each($cards, function(index, card){
		$card = $(card);
		var css_class = $card.parent(".card").metadata()["toggle"];
		$card.trigger("card_closing");
		$card.removeClass(css_class);
		$card.parent(".card").quickFlipper();
		$card = null;
	});
	$cards = null;
};

function matchingCards(event, params){
	$cards = $("."+params.css_class+".on:visible");
	$.each($cards, function(index, card){
		var $card = $(card);
		$card.trigger("card_removed");
		$card.parent(".card").unbind("*").before("").remove();
		$card = null;
	});
	
	$cards_left = $("#game_board>.card");
	if ( $cards_left.length == 0 ){
		$(document).trigger("game_won", {});
		/* 
		 * quickFlip has a problem when working in IE: when the last 
		 * bound element is removed, a problem which is caused by the 
		 * bound resize event on the window causes
		 * the end game to get stuck when the game is over...
		 */
		$(window).unbind("resize");
	}
	$cards_left = $cards = null;
};

5. The player wins when there are no more cards

In the above code we check if no more cards are left; if that is the case, the player_won event is triggered. When this event fires we need to do several things: We need to notify the server that the player won, and we need to show the player a message letting him know that he won. Let’s see how it goes:

$(document).ready(function(){
	$(document).bind("game_won", gameWon);
});

function gameWon(){
	$.getJSON(document.location.href, {won: 1}, notifiedServerWin);
	var $game_board = $("#game_board");
	var $player_won = $("#player_won");
	$game_board.hide();
	$player_won.show();
	$game_board = $player_won = null;
};

function notifiedServerWin(data){
	$("#start_again").show();
}

We can see that we notify the server with a simple ajax request. The server will then reset the board for us and remember the win.

if ( isset($_REQUEST["won"]) ){
	// if we won we need to reset the game board
	unset($_SESSION['board']);
	$_SESSION['games_won'] = ++$_SESSION['games_won'];
	$response = array("status" => "ok");
	exit(json_encode($response));
}

6. To keep things interesting – some effects

At this point the game is basically working, and it’s time to add some sound to it. Usually I absolutely hate sounds in web pages but since this is a game, it’s allowed :). So in order to add the sound, we are going to use the “hooks” we left in the code in the shape of custom events. We are going to use a Flash object with some preloaded mp3s for the sound effects. The communication between the JavaScript and the Flash (actionscript) is pretty simple these days, but it’s not in the scope of this guide. However, if you want a guide on this let me know in the comments and I’ll post one. For the purpose of this guide, let’s assume we have a Flash object that can accept commands and output sounds. We will use swfobject to embed the flash object to the page.

Now that’s done, it time to handle the binding the events and triggering the sounds. We want the sound to play when the player flips a card over, when we wins the game, and when a match is found.

$(document).ready(function(){
	$(document).bind("flipping_cards.sound", playFlip);
	$(document).bind("game_won.sound", playCheer);
	$(document).bind("found_match", playMatch);
});

function playCheer(){
	var sfxMovie=getFlashMovieObject("sfx_movie");
	try{
		sfxMovie.cheer();
	} catch(e) {};
};

function playFlip(){
	var sfxMovie=getFlashMovieObject("sfx_movie");
	try{
		sfxMovie.flip();
	} catch(e) {};
};

function playMatch(){
	var sfxMovie=getFlashMovieObject("sfx_movie");
	try{
		sfxMovie.match();
	} catch(e) {};
};

That’s it! You can check how everything fits in place and view all the code by looking at the demo.

Zip file for this tutorial

Demo for this tutorial

So until next time, have fun!

Adi Gabai

The post A Basic Memory Game with jQuery and PHP first appeared on WebDevPlayground.

WebDevPlayground

How To: Add AI to our jQuery Tic-Tac-Toe

What are we adding?

An interface for a human or AI opponent

Switching the opponent controls

Giving our game a little more state

Saving either kind of opponent

A simple Tic-Tac-Toe AI

One move pipeline for everybody

Reusing the winning lines

The Minimax algorithm

Scoring unfinished larger boards

Difficulty without the “always win or tie” trap

Mixing calculated and random moves

Suggesting a better difficulty

Some extra polish to make it feel good

A visible thinking turn and a locked board

Turn-colored hover shades

Keeping token choices honest

Native dialogs for results and confirmations

Why Bother With Semantic HTML?

What are the semantic HTML elements?

It helps the next developer

Mahjong Game – Adding Features

Argh! Where is that last pair?

If I could just move things around a bit…

A new look

Using the keyboard arrow keys

Mahjong Game – The End

Selecting Blocks

Removing Blocks

Someone Won?

That’s Not All

Mahjong Game – The Board

The Layout Class

The Block Class

Finally, the Board Class

Mahjong Game – The Layout

Mahjong Game – The Graphics

A Basic Memory Game with jQuery and PHP

1. Pairs of cards

2. Raising the level increases the number of cards

3. In each turn the player flips over 2 cards

4. Matching cards are removed from the board

5. The player wins when there are no more cards

6. To keep things interesting – some effects