Projekt: Piškvorky

Jan 3, 2026

Leden 2026

Cílem projektu bylo postavit hru Piškvorky a zároveň procvičit organizaci kódu mimo globální scope.

Hlavní témata: Factory Functions a Module Pattern.

Co projekt dělá

Klasická hra pro dva hráče v prohlížeči:

• střídání hráčů X/O na mřížce 3x3,
• detekce výhry i remízy,
• zobrazení hráče na tahu,
• restart bez reloadu,
• volitelná jména hráčů.

Architektura

Nejdůležitější částí bylo rozdělení odpovědností:

1. Module Pattern (IIFE): Pro věci, které ve hře existují jen jednou (herní deska, ovládání displeje).
2. Factory Function: Pro věci, kterých může být více (hráči).

Herní deska (Gameboard)

Deska je jen jedna, takže jsem použil Modul. Pole board je schované uvnitř funkce a není přístupné přímo z konzole (zapouzdření):

const Gameboard = (() => {
	let board = ["", "", "", "", "", "", "", "", ""];

	const getBoard = () => board;

	const setMark = (index, mark) => {
		if (board[index] === "") {
			board[index] = mark;
			return true;
		}
		return false;
	};

	const reset = () => {
		board = board.map(() => "");
	};

	return { getBoard, setMark, reset };
})();

Hráči (Players)

Hráči jsou dva, takže potřebuji továrnu na jejich výrobu:

const Player = (name, mark) => {
	return { name, mark };
};

const player1 = Player("Marek", "X");
const player2 = Player("PC", "O");

Logika hry a kontrola výhry

Řízení hry (GameController) je také modul. Drží informaci o tom, kdo je na řadě, a po každém tahu kontroluje výhru.

Výherní kombinace jsem uložil jako pole indexů:

const winningCombinations = [
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8], // Řádky
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8], // Sloupce
	[0, 4, 8],
	[2, 4, 6], // Diagonály
];

function checkWin(board) {
	return winningCombinations.some((combination) => {
		return combination.every((index) => {
			return board[index] === currentPlayer.mark;
		});
	});
}

Použití some() a every() výrazně zjednodušilo kontrolu výherních kombinací.

Propojení s HTML (DOM)

Logika a vykreslování jsou oddělené. DisplayController řeší pouze DOM.

• poslouchá kliknutí na buňky,
• předává index tahu do GameController,
• po validním tahu překresluje desku.

Co jsem si odnesl

• Lepší práci s modulárním vanilla JS kódem.
• Jistotu ve struktuře aplikace bez frameworku.
• Čitelnější herní logiku díky rozdělení na menší části.

GitHub: projekt piškvorky