使用JavaScript实现网页版2048小游戏(附源码)

引言

2048是一款风靡全球的数字拼图游戏,由意大利开发者Gabriele Cirulli在2014年开发。这款游戏的目标是通过上下左右滑动来移动瓷砖,当两个相同数字的瓷砖碰撞时,它们会合并成一个新的瓷砖,其值为原来的两倍。每次移动后,会在随机位置生成一个新的数字瓷砖(通常是2或4)。如果无法再进行任何有效的移动,则游戏结束。本文将详细介绍如何使用HTML、CSS和JavaScript实现一个完整的网页版2048小游戏。

游戏的基本结构

在开始编写代码之前,我们需要明确游戏的基本结构。2048游戏的核心是一个4x4的网格(可以扩展到其他尺寸),玩家可以通过上下左右滑动来移动瓷砖。以下是游戏的基本组成部分:

  1. 游戏面板:一个4x4的网格,用于显示瓷砖。
  2. 得分面板:显示当前分数以及重新开始按钮。
  3. 用户输入:处理用户的键盘或触摸输入,以控制瓷砖的移动。
  4. 核心逻辑:包括移动、合并、添加新数字、检测游戏结束等。
HTML结构

首先,我们需要创建一个基本的HTML页面结构。这个结构包括一个得分面板和一个游戏棋盘。


<body>
    <div id="score-panel">
        <div>分数: <span id="score">0</span></div>
        <button>重新开始</button>
    </div>
    <div id="game-board"></div>
    <script></script>
</body>
CSS样式

接下来,我们定义一些基本的CSS样式来美化游戏界面。这些样式包括背景颜色、字体大小、瓷砖的颜色和布局等。


body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #faf8ef;
    margin: 0;
    font-family: Arial, sans-serif;
}
#score-panel {
    width: 95%;
    max-width: 360px;
    margin-bottom: 20px;
}
#game-board {
    width: 95%;
    max-width: 360px;
    display: grid;
    gap: 5px;
}
.tile {
    width: 100%;
    height: 100%;
    background-color: #eee4da;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #776e65;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
JavaScript逻辑

核心的游戏逻辑主要通过JavaScript实现。我们将分为几个部分来介绍:初始化游戏、处理用户输入、移动和合并瓷砖、添加新数字、检测游戏结束状态以及动态调整瓷砖大小。

1.初始化游戏

首先,我们需要初始化游戏面板和相关变量。这包括创建一个4x4的二维数组来表示游戏面板,并在其中随机放置两个初始数字瓷砖。


const boardSize = 4;
let board = Array(boardSize).fill(null).map(() => Array(boardSize).fill(0));
let score = 0;
let tileSize = 80;
function addNewNumber() {
    let options = [];
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            if (board[i][j] === 0) options.push([i, j]);
        }
    }
    if (options.length > 0) {
        let [row, col] = options[Math.floor(Math.random() * options.length)];
        board[row][col] = Math.random() < 0.9 ? 2 : 4;
    }
}
function renderBoard() {
    const gameBoard = document.getElementById('game-board');
    gameBoard.style.gridTemplateColumns = `repeat(${boardSize}, ${tileSize}px)`;
    gameBoard.style.gridTemplateRows = `repeat(${boardSize}, ${tileSize}px)`;
    gameBoard.innerHTML = '';
    board.forEach((row, rowIndex) => {
        row.forEach((num, colIndex) => {
            const tile = document.createElement('div');
            tile.classList.add('tile');
            tile.textContent = num !== 0 ? num : '';
            tile.dataset.row = rowIndex;
            tile.dataset.col = colIndex;
            gameBoard.appendChild(tile);
        });
    });
    document.getElementById('score').textContent = score;
}
2.处理用户输入

为了处理用户的键盘和触摸输入,我们需要监听相关的事件,并根据用户的操作来更新游戏面板。

document.addEventListener('keydown', handleKeydown);
document.addEventListener('touchstart', handleTouchStar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值