Squarsh
Sometimes I make random stuff on the internet, and put it here for people to use.
Play tic tac toe 2.0
Tic Tac Toe
Each player has 4 pieces. On placing a 4th, the oldest disappears.
Player X's turn
Reset Game
(function () { var cells = Array.from(document.querySelectorAll("#tic-tac-toe-game .ttt-cell")); var statusEl = document.getElementById("ttt-status"); var resetBtn = document.getElementById("ttt-reset"); var currentPlayer = "X"; var board = ["", "", "", "", "", "", "", "", ""]; var gameOver = false; var moveHistory = { X: [], O: [] }; var winningCombos = [ [0,1,2],[3,4,5],[6,7,8], [0,3,6],[1,4,7],[2,5,8], [0,4,8],[2,4,6] ]; function setStatus(msg) { statusEl.textContent = msg; } function handleCellClick(e) { var cell = e.currentTarget; var index = parseInt(cell.getAttribute("data-index")); if (gameOver || board[index] !== "") return; board[index] = currentPlayer; cell.textContent = currentPlayer; moveHistory[currentPlayer].push(index); if (moveHistory[currentPlayer].length > 3) { var oldest = moveHistory[currentPlayer].shift(); board[oldest] = ""; cells[oldest].textContent = ""; cells[oldest].classList.remove("win"); } cells.forEach(c => c.classList.remove("win")); if (checkWin(currentPlayer)) { gameOver = true; setStatus("Player " + currentPlayer + " wins!"); highlightWinningCells(currentPlayer); disableBoard(); return; } currentPlayer = currentPlayer === "X" ? "O" : "X"; setStatus("Player " + currentPlayer + "'s turn"); } function checkWin(player) { return winningCombos.some(combo => combo.every(i => board[i] === player) ); } function highlightWinningCells(player) { winningCombos.forEach(combo => { if (combo.every(i => board[i] === player)) { combo.forEach(i => cells[i].classList.add("win")); } }); } function disableBoard() { cells.forEach(c => c.classList.add("disabled")); } function resetGame() { board.fill(""); moveHistory.X = []; moveHistory.O = []; currentPlayer = "X"; gameOver = false; cells.forEach(c => { c.textContent = ""; c.classList.remove("disabled", "win"); }); setStatus("Player X's turn"); } cells.forEach(c => c.addEventListener("click", handleCellClick)); resetBtn.addEventListener("click", resetGame); })();