2048小游戲實現

將創建一個完整的2048小游戲，包含游戲核心邏輯和美觀的用戶界面。
在這里插入圖片描述

設計思路

4x4網格布局
響應式設計，適配不同設備
分數顯示和最高分記錄
鍵盤控制（方向鍵）和觸摸滑動支持
游戲狀態提示（勝利/失敗）

完整代碼實現

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2048小游戲</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}.container {max-width: 500px;width: 100%;}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}h1 {color: #776e65;font-size: 60px;font-weight: 700;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);}.scores-container {display: flex;gap: 10px;}.score-box {background: #bbada0;color: white;padding: 10px 15px;border-radius: 6px;text-align: center;min-width: 100px;position: relative;}.score-box:after {content: attr(data-label);display: block;font-size: 12px;font-weight: bold;text-transform: uppercase;color: #eee4da;}.score {font-size: 22px;font-weight: bold;}.game-intro {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}.game-explanation {color: #776e65;font-size: 16px;line-height: 1.4;max-width: 250px;}.restart-button {background: #8f7a66;color: #f9f6f2;border: none;border-radius: 6px;padding: 12px 20px;font-size: 18px;font-weight: bold;cursor: pointer;transition: all 0.2s;}.restart-button:hover {background: #7c6b5a;transform: scale(1.05);}.game-container {background: #bbada0;border-radius: 6px;padding: 15px;position: relative;box-shadow: 0 10px 30px rgba(0,0,0,0.15);}.grid-container {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;background: rgba(238, 228, 218, 0.35);border-radius: 6px;padding: 10px;position: relative;touch-action: none;}.grid-cell {background: rgba(238, 228, 218, 0.35);border-radius: 4px;height: 0;padding-bottom: 100%;}.tile-container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding: 10px;}.tile {position: absolute;width: calc(25% - 12.5px);height: calc(25% - 12.5px);border-radius: 4px;display: flex;justify-content: center;align-items: center;font-size: 35px;font-weight: bold;transition: all 0.15s ease;z-index: 10;}.tile-2 { background: #eee4da; color: #776e65; }.tile-4 { background: #ede0c8; color: #776e65; }.tile-8 { background: #f2b179; color: #f9f6f2; }.tile-16 { background: #f59563; color: #f9f6f2; }.tile-32 { background: #f67c5f; color: #f9f6f2; }.tile-64 { background: #f65e3b; color: #f9f6f2; }.tile-128 { background: #edcf72; color: #f9f6f2; font-size: 30px; }.tile-256 { background: #edcc61; color: #f9f6f2; font-size: 30px; }.tile-512 { background: #edc850; color: #f9f6f2; font-size: 30px; }.tile-1024 { background: #edc53f; color: #f9f6f2; font-size: 25px; }.tile-2048 { background: #edc22e; color: #f9f6f2; font-size: 25px; }.tile-super { background: #3c3a32; color: #f9f6f2; font-size: 20px; }.game-message {display: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(238, 228, 218, 0.73);border-radius: 6px;flex-direction: column;justify-content: center;align-items: center;z-index: 100;}.game-message.game-won, .game-message.game-over {display: flex;}.game-message p {font-size: 50px;font-weight: bold;color: #776e65;margin-bottom: 20px;}.instructions {margin-top: 30px;color: #776e65;text-align: center;line-height: 1.6;font-size: 16px;}@media (max-width: 520px) {.header {flex-direction: column;align-items: flex-start;}h1 {font-size: 50px;margin-bottom: 15px;}.game-intro {flex-direction: column;align-items: flex-start;gap: 15px;}.tile {font-size: 24px;}.tile-128, .tile-256, .tile-512 {font-size: 22px;}.tile-1024, .tile-2048 {font-size: 18px;}}</style>
</head>
<body><div class="container"><div class="header"><h1>2048</h1><div class="scores-container"><div class="score-box" data-label="分數"><div class="score" id="score">0</div></div><div class="score-box" data-label="最高分"><div class="score" id="best-score">0</div></div></div></div><div class="game-intro"><div class="game-explanation">合并相同數字的方塊，得到2048方塊！</div><button class="restart-button" id="restart-button">新游戲</button></div><div class="game-container"><div class="grid-container"><!-- 4x4網格 --><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="grid-cell"></div><div class="tile-container" id="tile-container"></div><div class="game-message" id="game-message"><p id="message-text"></p><button class="restart-button" id="keep-playing-button">繼續游戲</button></div></div></div><div class="instructions"><p><strong>游戲指南：</strong>使用鍵盤方向鍵（↑, ↓, ←, →）或觸摸屏滑動移動方塊。當兩個相同數字的方塊碰撞時，它們會合并成它們的和！</p></div></div><script>document.addEventListener('DOMContentLoaded', () => {// 游戲常量const GRID_SIZE = 4;const CELL_SIZE = 20; // 百分比const CELL_GAP = 2;   // 百分比// 游戲狀態let grid = [];let score = 0;let bestScore = localStorage.getItem('bestScore') || 0;let gameOver = false;let gameWon = false;// DOM元素const gridContainer = document.querySelector('.grid-container');const tileContainer = document.getElementById('tile-container');const scoreDisplay = document.getElementById('score');const bestScoreDisplay = document.getElementById('best-score');const restartButton = document.getElementById('restart-button');const gameMessage = document.getElementById('game-message');const messageText = document.getElementById('message-text');const keepPlayingButton = document.getElementById('keep-playing-button');// 初始化游戲function initGame() {// 重置游戲狀態grid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(0));tileContainer.innerHTML = '';score = 0;gameOver = false;gameWon = false;// 更新UIupdateScore();gameMessage.className = 'game-message';// 添加初始方塊addRandomTile();addRandomTile();// 渲染游戲板render();}// 添加隨機方塊function addRandomTile() {const emptyCells = [];// 查找所有空格子for (let row = 0; row < GRID_SIZE; row++) {for (let col = 0; col < GRID_SIZE; col++) {if (grid[row][col] === 0) {emptyCells.push({ row, col });}}}// 如果有空格子，隨機選擇一個并添加2或4if (emptyCells.length > 0) {const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;}}// 渲染游戲板function render() {tileContainer.innerHTML = '';for (let row = 0; row < GRID_SIZE; row++) {for (let col = 0; col < GRID_SIZE; col++) {const value = grid[row][col];if (value !== 0) {const tile = document.createElement('div');tile.className = `tile tile-${value}`;tile.textContent = value;// 設置位置tile.style.left = `${col * (CELL_SIZE + CELL_GAP) + CELL_GAP}%`;tile.style.top = `${row * (CELL_SIZE + CELL_GAP) + CELL_GAP}%`;tileContainer.appendChild(tile);}}}}// 移動方塊function move(direction) {if (gameOver) return;let moved = false;let newGrid = JSON.parse(JSON.stringify(grid));// 根據方向處理移動switch (direction) {case 'up':for (let col = 0; col < GRID_SIZE; col++) {const column = [];for (let row = 0; row < GRID_SIZE; row++) {if (newGrid[row][col] !== 0) {column.push(newGrid[row][col]);}}// 合并相同數字for (let i = 0; i < column.length - 1; i++) {if (column[i] === column[i + 1]) {column[i] *= 2;score += column[i];column.splice(i + 1, 1);}}// 更新列for (let row = 0; row < GRID_SIZE; row++) {newGrid[row][col] = row < column.length ? column[row] : 0;}}break;case 'down':for (let col = 0; col < GRID_SIZE; col++) {const column = [];for (let row = GRID_SIZE - 1; row >= 0; row--) {if (newGrid[row][col] !== 0) {column.push(newGrid[row][col]);}}// 合并相同數字for (let i = 0; i < column.length - 1; i++) {if (column[i] === column[i + 1]) {column[i] *= 2;score += column[i];column.splice(i + 1, 1);}}// 更新列for (let row = GRID_SIZE - 1; row >= 0; row--) {newGrid[row][col] = (GRID_SIZE - 1 - row) < column.length ? column[GRID_SIZE - 1 - row] : 0;}}break;case 'left':for (let row = 0; row < GRID_SIZE; row++) {const rowData = [];for (let col = 0; col < GRID_SIZE; col++) {if (newGrid[row][col] !== 0) {rowData.push(newGrid[row][col]);}}// 合并相同數字for (let i = 0; i < rowData.length - 1; i++) {if (rowData[i] === rowData[i + 1]) {rowData[i] *= 2;score += rowData[i];rowData.splice(i + 1, 1);}}// 更新行for (let col = 0; col < GRID_SIZE; col++) {newGrid[row][col] = col < rowData.length ? rowData[col] : 0;}}break;case 'right':for (let row = 0; row < GRID_SIZE; row++) {const rowData = [];for (let col = GRID_SIZE - 1; col >= 0; col--) {if (newGrid[row][col] !== 0) {rowData.push(newGrid[row][col]);}}// 合并相同數字for (let i = 0; i < rowData.length - 1; i++) {if (rowData[i] === rowData[i + 1]) {rowData[i] *= 2;score += rowData[i];rowData.splice(i + 1, 1);}}// 更新行for (let col = GRID_SIZE - 1; col >= 0; col--) {newGrid[row][col] = (GRID_SIZE - 1 - col) < rowData.length ? rowData[GRID_SIZE - 1 - col] : 0;}}break;}// 檢查是否有移動moved = JSON.stringify(grid) !== JSON.stringify(newGrid);if (moved) {grid = newGrid;addRandomTile();updateScore();render();checkGameStatus();}}// 檢查游戲狀態function checkGameStatus() {// 檢查是否達到2048for (let row = 0; row < GRID_SIZE; row++) {for (let col = 0; col < GRID_SIZE; col++) {if (grid[row][col] === 2048 && !gameWon) {gameWon = true;messageText.textContent = '恭喜你贏了！';gameMessage.className = 'game-message game-won';}}}// 檢查是否有空格子for (let row = 0; row < GRID_SIZE; row++) {for (let col = 0; col < GRID_SIZE; col++) {if (grid[row][col] === 0) {return;}}}// 檢查是否可以移動for (let row = 0; row < GRID_SIZE; row++) {for (let col = 0; col < GRID_SIZE; col++) {const value = grid[row][col];// 檢查右側if (col < GRID_SIZE - 1 && grid[row][col + 1] === value) {return;}// 檢查下方if (row < GRID_SIZE - 1 && grid[row + 1][col] === value) {return;}}}// 如果沒有空格子且無法移動，游戲結束gameOver = true;messageText.textContent = '游戲結束！';gameMessage.className = 'game-message game-over';}// 更新分數function updateScore() {scoreDisplay.textContent = score;// 更新最高分if (score > bestScore) {bestScore = score;localStorage.setItem('bestScore', bestScore);}bestScoreDisplay.textContent = bestScore;}// 鍵盤控制document.addEventListener('keydown', (event) => {switch (event.key) {case 'ArrowUp':move('up');break;case 'ArrowDown':move('down');break;case 'ArrowLeft':move('left');break;case 'ArrowRight':move('right');break;}});// 觸摸控制let touchStartX, touchStartY;gridContainer.addEventListener('touchstart', (event) => {touchStartX = event.touches[0].clientX;touchStartY = event.touches[0].clientY;event.preventDefault();});gridContainer.addEventListener('touchmove', (event) => {event.preventDefault();});gridContainer.addEventListener('touchend', (event) => {if (!touchStartX || !touchStartY) return;const touchEndX = event.changedTouches[0].clientX;const touchEndY = event.changedTouches[0].clientY;const dx = touchEndX - touchStartX;const dy = touchEndY - touchStartY;// 確定主要移動方向if (Math.abs(dx) > Math.abs(dy)) {// 水平移動if (dx > 0) {move('right');} else {move('left');}} else {// 垂直移動if (dy > 0) {move('down');} else {move('up');}}// 重置觸摸起點touchStartX = null;touchStartY = null;});// 按鈕事件restartButton.addEventListener('click', initGame);keepPlayingButton.addEventListener('click', () => {gameMessage.className = 'game-message';});// 初始化游戲initGame();bestScoreDisplay.textContent = bestScore;});</script>
</body>
</html>

功能說明

游戲核心功能：
- 4x4網格布局
- 方塊移動和合并邏輯
- 隨機生成新方塊（90%概率生成2，10%概率生成4）
- 分數計算（每次合并累加得分）
- 最高分記錄（使用localStorage保存）
游戲狀態：
- 勝利條件：創建出2048方塊
- 失敗條件：棋盤填滿且無法繼續合并
- 游戲結束后可重新開始
控制方式：
- 鍵盤方向鍵（↑, ↓, ←, →）
- 觸摸屏滑動操作（支持移動設備）
UI設計：
- 響應式布局，適配不同屏幕尺寸
- 不同數字的方塊有不同的顏色
- 分數顯示和最高分記錄
- 游戲狀態提示（勝利/失敗）