HTML+CSS+JS实现2048经典小游戏（附完整源码）

news2024/11/19 18:42:53

2048 小游戏的目标是通过合并数字单元格，最终在 4x4 的棋盘上创建一个值为 2048 的单元格。

一、预览效果

在这里插入图片描述

二、程序源码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048 Game</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <div class="game-container">
        <div class="score-container">
            分数: <span id="score">0</span>
        </div>
        <div class="game-board" id="game-board">
            <!-- 这里将动态生成游戏单元格 -->
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>

css代码

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #faf8ef;
    font-family: 'Arial', sans-serif;
}

.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.score-container {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #776e65;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    gap: 10px;
    background-color: #bbada0;
    padding: 10px;
    border-radius: 10px;
}

.cell {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cdc1b4;
    border-radius: 5px;
    font-size: 24px;
    font-weight: bold;
    color: #776e65;
}

.cell-2 { background-color: #eee4da; }
.cell-4 { background-color: #ede0c8; }
.cell-8 { background-color: #f2b179; color: #f9f6f2; }
.cell-16 { background-color: #f59563; color: #f9f6f2; }
.cell-32 { background-color: #f67c5f; color: #f9f6f2; }
.cell-64 { background-color: #f65e3b; color: #f9f6f2; }
.cell-128 { background-color: #edcf72; color: #f9f6f2; }
.cell-256 { background-color: #edcc61; color: #f9f6f2; }
.cell-512 { background-color: #edc850; color: #f9f6f2; }
.cell-1024 { background-color: #edc53f; color: #f9f6f2; }
.cell-2048 { background-color: #edc22e; color: #f9f6f2; }

js代码

// game.js
document.addEventListener('DOMContentLoaded', () => {
    const gameBoard = document.getElementById('game-board');
    const scoreElement = document.getElementById('score');
    const size = 4;
    let cells = [];
    let score = 0;

    function createBoard() {
        for (let i = 0; i < size * size; i++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            gameBoard.appendChild(cell);
            cells.push(cell);
        }
        addNumber();
        addNumber();
    }

    function addNumber() {
        let emptyCells = cells.filter(cell => cell.innerText === '');
        if (emptyCells.length === 0) return;
        let randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        randomCell.innerText = Math.random() > 0.1 ? 2 : 4;
        randomCell.classList.add(`cell-${randomCell.innerText}`);
    }

    function move(direction) {
        let hasMoved = false;
        for (let i = 0; i < size; i++) {
            let rowOrCol = [];
            for (let j = 0; j < size; j++) {
                let index = direction === 'left' || direction === 'right' ? i * size + j : j * size + i;
                rowOrCol.push(cells[index]);
            }
            if (direction === 'right' || direction === 'down') rowOrCol.reverse();
            let newRowOrCol = slide(rowOrCol);
            if (direction === 'right' || direction === 'down') newRowOrCol.reverse();
            for (let j = 0; j < size; j++) {
                let index = direction === 'left' || direction === 'right' ? i * size + j : j * size + i;
                if (cells[index].innerText !== newRowOrCol[j].innerText) hasMoved = true;
                cells[index].innerText = newRowOrCol[j].innerText;
                cells[index].className = 'cell';
                if (cells[index].innerText !== '') cells[index].classList.add(`cell-${cells[index].innerText}`);
            }
        }
        if (hasMoved) {
            addNumber();
            updateScore();
            if (checkGameOver()) {
                setTimeout(() => alert('游戏结束!'), 100);
            }
        }
    }

    function slide(rowOrCol) {
        let arr = rowOrCol.filter(cell => cell.innerText !== '').map(cell => parseInt(cell.innerText));
        for (let i = 0; i < arr.length - 1; i++) {
            if (arr[i] === arr[i + 1]) {
                arr[i] *= 2;
                score += arr[i];  // 更新分数
                arr.splice(i + 1, 1);
            }
        }
        while (arr.length < size) arr.push('');
        return arr.map(num => {
            let cell = document.createElement('div');
            cell.classList.add('cell');
            cell.innerText = num;
            return cell;
        });
    }

    function handleKey(e) {
        switch (e.key) {
            case 'ArrowUp':
                move('up');
                break;
            case 'ArrowDown':
                move('down');
                break;
            case 'ArrowLeft':
                move('left');
                break;
            case 'ArrowRight':
                move('right');
                break;
        }
    }

    function updateScore() {
        scoreElement.innerText = score;
    }

    function checkGameOver() {
        for (let i = 0; i < size; i++) {
            for (let j = 0; j < size; j++) {
                let index = i * size + j;
                if (cells[index].innerText === '') return false;
                if (j < size - 1 && cells[index].innerText === cells[index + 1].innerText) return false;
                if (i < size - 1 && cells[index].innerText === cells[index + size].innerText) return false;
            }
        }
        return true;
    }

    createBoard();
    document.addEventListener('keydown', handleKey);
});