2048无线小游戏

步骤1、创建一个文本文档随意重命名2、复制文章底部的代码到文档中保存3、关闭窗口给文档重命名后缀改为“.html”的格式4、保存之后就可以了代码!DOCTYPE html html langen head meta charsetUTF-8 title2048 Game/title link relstylesheet hrefstyle.css /head body header h12048/h1 button idnewGameButtonNew Game/button pScore: span idscore0/span/p /header div idgrid-container div classgrid-cell idgrid-cell-0-0/div div classgrid-cell idgrid-cell-0-1/div div classgrid-cell idgrid-cell-0-2/div div classgrid-cell idgrid-cell-0-3/div div classgrid-cell idgrid-cell-1-0/div div classgrid-cell idgrid-cell-1-1/div div classgrid-cell idgrid-cell-1-2/div div classgrid-cell idgrid-cell-1-3/div div classgrid-cell idgrid-cell-2-0/div div classgrid-cell idgrid-cell-2-1/div div classgrid-cell idgrid-cell-2-2/div div classgrid-cell idgrid-cell-2-3/div div classgrid-cell idgrid-cell-3-0/div div classgrid-cell idgrid-cell-3-1/div div classgrid-cell idgrid-cell-3-2/div div classgrid-cell idgrid-cell-3-3/div /div div idgameoverGAME OVER/div script srcscript.js/script /body script const board Array.from({ length: 4 }, () Array(4).fill(0)); let score 0; document.addEventListener(DOMContentLoaded, () { document.getElementById(newGameButton).addEventListener(click, newGame); document.addEventListener(keydown, handleKeyPress); newGame(); }); function newGame() { for (let i 0; i 4; i) { for (let j 0; j 4; j) { board[i][j] 0; } } score 0; updateScore(); generateNewNumber(); generateNewNumber(); updateBoard(); document.getElementById(gameover).style.display none; } function generateNewNumber() { let emptyCells []; for (let i 0; i 4; i) { for (let j 0; j 4; j) { if (board[i][j] 0) { emptyCells.push({ x: i, y: j }); } } } if (emptyCells.length 0) return; const { x, y } emptyCells[Math.floor(Math.random() * emptyCells.length)]; board[x][y] Math.random() 0.9 ? 2 : 4; } function updateBoard() { for (let i 0; i 4; i) { for (let j 0; j 4; j) { const cell document.getElementById(grid-cell-${i}-${j}); cell.textContent board[i][j] 0 ? : board[i][j]; cell.style.backgroundColor getBackgroundColor(board[i][j]); } } } function getBackgroundColor(value) { switch (value) { case 2: return #eee4da; case 4: return #ede0c8; case 8: return #f2b179; case 16: return #f59563; case 32: return #f67c5f; case 64: return #f65e3b; case 128: return #edcf72; case 256: return #edcc61; case 512: return #edc850; case 1024: return #edc53f; case 2048: return #edc22e; default: return #cdc1b4; } } function handleKeyPress(event) { switch (event.key) { case ArrowUp: moveUp(); break; case ArrowDown: moveDown(); break; case ArrowLeft: moveLeft(); break; case ArrowRight: moveRight(); break; } generateNewNumber(); updateBoard(); if (isGameOver()) { document.getElementById(gameover).style.display block; } } function moveUp() { for (let j 0; j 4; j) { let compressed compress(board.map(row row[j])); for (let i 0; i 4; i) { board[i][j] compressed[i]; } } } function moveDown() { for (let j 0; j 4; j) { let compressed compress(board.map(row row[j]).reverse()).reverse(); for (let i 0; i 4; i) { board[i][j] compressed[i]; } } } function moveLeft() { for (let i 0; i 4; i) { board[i] compress(board[i]); } } function moveRight() { for (let i 0; i 4; i) { board[i] compress(board[i].reverse()).reverse(); } } function compress(row) { let newRow row.filter(val val ! 0); for (let i 0; i newRow.length - 1; i) { if (newRow[i] newRow[i 1]) { newRow[i] * 2; score newRow[i]; newRow[i 1] 0; } } newRow newRow.filter(val val ! 0); while (newRow.length 4) { newRow.push(0); } updateScore(); return newRow; } function updateScore() { document.getElementById(score).textContent score; } function isGameOver() { for (let i 0; i 4; i) { for (let j 0; j 4; j) { if (board[i][j] 0) return false; if (i 3 board[i][j] board[i 1][j]) return false; if (j 3 board[i][j] board[i][j 1]) return false; } } return true; } /script style body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #faf8ef; } header { text-align: center; margin-bottom: 20px; } h1 { font-size: 60px; margin: 0; } button { padding: 10px 20px; font-size: 16px; margin-top: 10px; cursor: pointer; } p { font-size: 24px; margin: 10px 0; } #grid-container { width: 460px; height: 460px; padding: 20px; background-color: #bbada0; border-radius: 10px; position: relative; display: grid; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); gap: 20px; } .grid-cell { width: 100px; height: 100px; background-color: #ccc0b3; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #776e65; } #gameover { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 48px; padding: 20px; border-radius: 10px; } /style /html