/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const BOARD_SIZE = 4; const INITIAL_TILES = 2; function generateEmptyBoard() { return Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => 0) ); } function addRandomTile(board: number[][]) { const emptyCells = []; for (let r = 0; r < BOARD_SIZE; r++) { for (let c = 0; c < BOARD_SIZE; c++) { if (board[r][c] === 0) { emptyCells.push({ r, c }); } } } if (emptyCells.length > 0) { const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)]; board[r][c] = Math.random() < 0.9 ? 2 : 4; } return board; } function App() { const [board, setBoard] = useState(() => { const initialBoard = generateEmptyBoard(); for (let i = 0; i < INITIAL_TILES; i++) { addRandomTile(initialBoard); } return initialBoard; }); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); const [won, setWon] = useState(false); const moveBoard = useCallback((direction: 'left' | 'right' | 'up' | 'down') => { const newBoard = board.map(row => [...row]); let moved = false; let newScore = score; const rotateBoard = (board: number[][], times: number) => { for (let rotation = 0; rotation < times; rotation++) { board = board[0].map((_, index) => board.map(row => row[index]).reverse()); } return board; }; const slide = (row: number[]) => { const filteredRow = row.filter(cell => cell !== 0); for (let i = 0; i < filteredRow.length - 1; i++) { if (filteredRow[i] === filteredRow[i + 1]) { filteredRow[i] *= 2; newScore += filteredRow[i]; filteredRow.splice(i + 1, 1); } } while (filteredRow.length < BOARD_SIZE) { filteredRow.push(0); } return filteredRow; }; let rotatedBoard: number[][]; switch (direction) { case 'left': rotatedBoard = newBoard.map(slide); moved = JSON.stringify(rotatedBoard) !== JSON.stringify(newBoard); break; case 'right': rotatedBoard = newBoard.map(row => slide(row.reverse()).reverse()); moved = JSON.stringify(rotatedBoard) !== JSON.stringify(newBoard); break; case 'up': rotatedBoard = rotateBoard(newBoard, 1).map(slide); rotatedBoard = rotateBoard(rotatedBoard, 3); moved = JSON.stringify(rotatedBoard) !== JSON.stringify(newBoard); break; case 'down': rotatedBoard = rotateBoard(newBoard, 1).map(row => slide(row.reverse()).reverse()); rotatedBoard = rotateBoard(rotatedBoard, 3); moved = JSON.stringify(rotatedBoard) !== JSON.stringify(newBoard); break; } if (moved) { addRandomTile(rotatedBoard); setBoard(rotatedBoard); setScore(newScore); } const hasWon = rotatedBoard.some(row => row.includes(2048)); const hasLost = rotatedBoard.every(row => row.every(cell => cell !== 0)) && !canMove(rotatedBoard); if (hasWon) setWon(true); if (hasLost) setGameOver(true); }, [board, score]); const canMove = (board: number[][]) => { for (let r = 0; r < BOARD_SIZE; r++) { for (let c = 0; c < BOARD_SIZE; c++) { if (board[r][c] === 0) return true; if (c < BOARD_SIZE - 1 && board[r][c] === board[r][c + 1]) return true; if (r < BOARD_SIZE - 1 && board[r][c] === board[r + 1][c]) return true; } } return false; }; const resetGame = () => { const initialBoard = generateEmptyBoard(); for (let i = 0; i < INITIAL_TILES; i++) { addRandomTile(initialBoard); } setBoard(initialBoard); setScore(0); setGameOver(false); setWon(false); }; useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (gameOver || won) return; switch (e.key) { case 'ArrowLeft': moveBoard('left'); break; case 'ArrowRight': moveBoard('right'); break; case 'ArrowUp': moveBoard('up'); break; case 'ArrowDown': moveBoard('down'); break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [moveBoard, gameOver, won]); return (

2048

Score: {score}

{board.map((row, rowIndex) => (

{row.map((cell, cellIndex) => (

{cell > 0 ? cell : ''}

))}

{(gameOver || won) && (

{won ? 'You Won!' : 'Game Over!'}

Score: {score}

)}

Use arrow keys to move tiles

View Source

); } const styles = { container: { display: 'flex', flexDirection: 'column', alignItems: 'center', fontFamily: 'Arial, sans-serif', backgroundColor: '#faf8ef', minHeight: '100vh', padding: '20px', }, scoreContainer: { marginBottom: '20px', }, score: { fontSize: '24px', fontWeight: 'bold', }, board: { display: 'flex', flexDirection: 'column', backgroundColor: '#bbada0', borderRadius: '5px', padding: '10px', }, row: { display: 'flex', }, cell: { width: '80px', height: '80px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '5px', borderRadius: '5px', fontSize: '24px', fontWeight: 'bold', }, tileColors: { 0: { backgroundColor: '#cdc1b4', color: '#776e65' }, 2: { backgroundColor: '#eee4da', color: '#776e65' }, 4: { backgroundColor: '#ede0c8', color: '#776e65' }, 8: { backgroundColor: '#f2b179', color: 'white' }, 16: { backgroundColor: '#f59563', color: 'white' }, 32: { backgroundColor: '#f67c5f', color: 'white' }, 64: { backgroundColor: '#f65e3b', color: 'white' }, 128: { backgroundColor: '#edcf72', color: 'white' }, 256: { backgroundColor: '#edcc61', color: 'white' }, 512: { backgroundColor: '#edc850', color: 'white' }, 1024: { backgroundColor: '#edc53f', color: 'white' }, 2048: { backgroundColor: '#edc22e', color: 'white' }, }, gameOverOverlay: { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.7)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1000, }, gameOverContent: { backgroundColor: 'white', padding: '30px', borderRadius: '10px', textAlign: 'center', }, resetButton: { marginTop: '15px', padding: '10px 20px', backgroundColor: '#8f7a66', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', }, instructions: { marginTop: '20px', color: '#776e65', }, sourceLink: { marginTop: '20px', color: '#776e65', textDecoration: 'none', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` 2048 Game

`, { headers: { "content-type": "text/html", }, }); }

Play2048Game

Versions

v0