当前位置：首页 > news >正文

HTML实现的2048游戏

news 来源：原创 2025/6/12 21:19:15

以下是一个纯HTML实现的2048游戏代码，包含CSS和JavaScript：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>2048 Game</title><style>body {font-family: Arial, sans-serif;text-align: center;background-color: #faf8ef;}.container {width: 450px;margin: 0 auto;}.header {display: flex;justify-content: space-between;margin-bottom: 20px;}h1 {font-size: 80px;margin: 0;color: #776e65;}.score-container {background: #bbada0;padding: 15px 25px;border-radius: 6px;color: white;font-weight: bold;text-align: center;}.score-title {font-size: 13px;display: block;}.score-value {font-size: 25px;}.game-container {background: #bbada0;border-radius: 6px;width: 450px;height: 450px;padding: 15px;position: relative;margin: 0 auto;}.grid {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 15px;width: 100%;height: 100%;}.cell {background: rgba(238, 228, 218, 0.35);border-radius: 3px;display: flex;justify-content: center;align-items: center;font-size: 45px;font-weight: bold;color: #776e65;position: relative;}.tile-2 {background: #eee4da;}.tile-4 {background: #ede0c8;}.tile-8 {background: #f2b179;color: white;}.tile-16 {background: #f59563;color: white;}.tile-32 {background: #f67c5f;color: white;}.tile-64 {background: #f65e3b;color: white;}.tile-128 {background: #edcf72;color: white;font-size: 40px;}.tile-256 {background: #edcc61;color: white;font-size: 40px;}.tile-512 {background: #edc850;color: white;font-size: 40px;}.tile-1024 {background: #edc53f;color: white;font-size: 35px;}.tile-2048 {background: #edc22e;color: white;font-size: 35px;}.game-message {display: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(238, 228, 218, 0.73);z-index: 100;flex-direction: column;align-items: center;justify-content: center;border-radius: 6px;}.game-message.game-won {background: rgba(237, 194, 46, 0.5);color: white;}.game-message.game-over {background: rgba(238, 228, 218, 0.73);color: #776e65;}.game-message p {font-size: 60px;font-weight: bold;margin: 0;}.game-message .lower {margin-top: 30px;}.game-message button {background: #8f7a66;color: white;border: none;border-radius: 3px;padding: 10px 20px;font-size: 18px;cursor: pointer;}.game-message button:hover {background: #9f8b77;}.instructions {margin-top: 30px;color: #776e65;}</style>
</head>
<body><div class="container"><div class="header"><h1>2048</h1><div class="score-container"><span class="score-title">SCORE</span><span class="score-value" id="score">0</span></div></div><div class="game-container"><div class="grid" id="grid"></div><div class="game-message" id="game-message"><p id="message-text"></p><div class="lower"><button id="keep-going-button">Keep going</button><button id="retry-button">Try again</button></div></div></div><div class="instructions"><p>Join the numbers and get to the <strong>2048 tile!</strong></p><p>Use <strong>arrow keys</strong> to move the tiles.</p></div></div><script>document.addEventListener('DOMContentLoaded', () => {const grid = document.getElementById('grid');const scoreDisplay = document.getElementById('score');const gameMessage = document.getElementById('game-message');const messageText = document.getElementById('message-text');const retryButton = document.getElementById('retry-button');const keepGoingButton = document.getElementById('keep-going-button');let board = [];let score = 0;let gameWon = false;// Initialize the gamefunction initGame() {// Create empty boardboard = [[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]];score = 0;gameWon = false;updateScore();// Clear the gridgrid.innerHTML = '';// Create cellsfor (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {const cell = document.createElement('div');cell.className = 'cell';cell.id = `cell-${i}-${j}`;grid.appendChild(cell);}}// Hide game messagegameMessage.style.display = 'none';// Add two initial tilesaddRandomTile();addRandomTile();// Render the boardrenderBoard();}// Add a random tile (2 or 4) to an empty cellfunction addRandomTile() {const emptyCells = [];// Find all empty cellsfor (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {if (board[i][j] === 0) {emptyCells.push({row: i, col: j});}}}// If there are empty cells, add a new tileif (emptyCells.length > 0) {const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];board[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;return true;}return false;}// Render the boardfunction renderBoard() {for (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {const cell = document.getElementById(`cell-${i}-${j}`);const value = board[i][j];// Clear the cellcell.className = 'cell';cell.textContent = '';// If the cell has a value, add the appropriate class and contentif (value > 0) {cell.textContent = value;cell.classList.add(`tile-${value}`);}}}}// Update the score displayfunction updateScore() {scoreDisplay.textContent = score;}// Check if the game is overfunction isGameOver() {// Check if there are any empty cellsfor (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {if (board[i][j] === 0) {return false;}}}// Check if any adjacent cells have the same valuefor (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {if (j < 3 && board[i][j] === board[i][j + 1]) {return false;}if (i < 3 && board[i][j] === board[i + 1][j]) {return false;}}}return true;}// Check if the player has won (reached 2048)function checkWin() {for (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {if (board[i][j] === 2048) {return true;}}}return false;}// Show game message (win or lose)function showGameMessage(won) {if (won) {messageText.textContent = 'You Win!';gameMessage.classList.add('game-won');gameMessage.classList.remove('game-over');keepGoingButton.style.display = 'inline-block';} else {messageText.textContent = 'Game Over!';gameMessage.classList.add('game-over');gameMessage.classList.remove('game-won');keepGoingButton.style.display = 'none';}gameMessage.style.display = 'flex';}// Move tiles leftfunction moveLeft() {let moved = false;for (let i = 0; i < 4; i++) {// Remove zeroslet row = board[i].filter(val => val !== 0);// Merge adjacent equal valuesfor (let j = 0; j < row.length - 1; j++) {if (row[j] === row[j + 1]) {row[j] *= 2;score += row[j];row[j + 1] = 0;moved = true;if (row[j] === 2048) {gameWon = true;}}}// Remove zeros again after mergingrow = row.filter(val => val !== 0);// Add zeros to the endwhile (row.length < 4) {row.push(0);}// Check if the row has changedif (JSON.stringify(board[i]) !== JSON.stringify(row)) {moved = true;}board[i] = row;}return moved;}// Move tiles rightfunction moveRight() {let moved = false;for (let i = 0; i < 4; i++) {// Remove zeroslet row = board[i].filter(val => val !== 0);// Merge adjacent equal values (from right)for (let j = row.length - 1; j > 0; j--) {if (row[j] === row[j - 1]) {row[j] *= 2;score += row[j];row[j - 1] = 0;moved = true;if (row[j] === 2048) {gameWon = true;}}}// Remove zeros again after mergingrow = row.filter(val => val !== 0);// Add zeros to the beginningwhile (row.length < 4) {row.unshift(0);}// Check if the row has changedif (JSON.stringify(board[i]) !== JSON.stringify(row)) {moved = true;}board[i] = row;}return moved;}// Move tiles upfunction moveUp() {let moved = false;for (let j = 0; j < 4; j++) {// Get columnlet column = [board[0][j], board[1][j], board[2][j], board[3][j]];// Remove zeroscolumn = column.filter(val => val !== 0);// Merge adjacent equal valuesfor (let i = 0; i < column.length - 1; i++) {if (column[i] === column[i + 1]) {column[i] *= 2;score += column[i];column[i + 1] = 0;moved = true;if (column[i] === 2048) {gameWon = true;}}}// Remove zeros again after mergingcolumn = column.filter(val => val !== 0);// Add zeros to the endwhile (column.length < 4) {column.push(0);}// Check if the column has changedfor (let i = 0; i < 4; i++) {if (board[i][j] !== column[i]) {moved = true;board[i][j] = column[i];}}}return moved;}// Move tiles downfunction moveDown() {let moved = false;for (let j = 0; j < 4; j++) {// Get columnlet column = [board[0][j], board[1][j], board[2][j], board[3][j]];// Remove zeroscolumn = column.filter(val => val !== 0);// Merge adjacent equal values (from bottom)for (let i = column.length - 1; i > 0; i--) {if (column[i] === column[i - 1]) {column[i] *= 2;score += column[i];column[i - 1] = 0;moved = true;if (column[i] === 2048) {gameWon = true;}}}// Remove zeros again after mergingcolumn = column.filter(val => val !== 0);// Add zeros to the beginningwhile (column.length < 4) {column.unshift(0);}// Check if the column has changedfor (let i = 0; i < 4; i++) {if (board[i][j] !== column[i]) {moved = true;board[i][j] = column[i];}}}return moved;}// Handle keyboard eventsfunction handleKeyPress(event) {if (gameMessage.style.display === 'flex' && !gameWon) {return;}let moved = false;switch (event.key) {case 'ArrowLeft':moved = moveLeft();break;case 'ArrowRight':moved = moveRight();break;case 'ArrowUp':moved = moveUp();break;case 'ArrowDown':moved = moveDown();break;default:return;}if (moved) {addRandomTile();renderBoard();updateScore();if (gameWon) {showGameMessage(true);} else if (isGameOver()) {showGameMessage(false);}}}// Event listenersdocument.addEventListener('keydown', handleKeyPress);retryButton.addEventListener('click', initGame);keepGoingButton.addEventListener('click', () => {gameMessage.style.display = 'none';gameWon = false;});// Start the gameinitGame();});</script>
</body>
</html>