JavaScript实现2048小游戏，我终于赢了一把！

2023-11-02 15:54:28

2048小游戏简介

2048是一款益智游戏，由意大利程序员Gabriele Cirulli于2014年开发。这款游戏的目标是将棋盘上的数字合并，最终得到数字“2048”。游戏规则很简单：玩家可以通过上下左右四个方向移动数字，如果两个相同数字相遇，它们将合并成一个更大的数字。游戏的难点在于，随着数字越来越大，移动的空间也越来越少，玩家需要动用策略和技巧来实现最终目标。

JavaScript实现思路

在开始编码之前，我们先来梳理一下实现2048小游戏的思路：

首先，我们需要创建一个包含16个单元格的棋盘。
随机生成一个数字（2或4）并将其放置在棋盘的随机位置。
当玩家移动数字时，我们需要检查数字是否可以移动到相邻的单元格，以及是否可以与其他数字合并。
当两个相同数字合并时，我们需要计算新数字的值并将新数字放置在合并后的单元格中。
如果棋盘上没有更多可移动的数字，游戏结束。

编写页面和画布代码

现在，让我们开始编码。首先，我们需要创建一个HTML页面和一个画布元素：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="game-canvas" width="400px" height="400px"></canvas>

  <script src="2048.js"></script>
</body>
</html>

在HTML页面中，我们创建了一个画布元素，用于显示游戏。画布的宽度和高度都为400像素。

接下来，我们需要在JavaScript文件中编写代码来实现游戏的逻辑。

绘制背景

首先，我们需要绘制游戏的背景。我们可以使用以下代码来绘制一个简单的背景：

const canvas = document.getElementById("game-canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, 400, 400);

这段代码首先获取画布元素的上下文，然后使用fillStyle属性设置填充颜色为白色，并使用fillRect方法绘制一个白色矩形，填充整个画布。

绘制好全部卡片

接下来，我们需要绘制游戏中的卡片。我们可以使用以下代码来绘制一个卡片：

function drawCard(x, y, value) {
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(x * 100, y * 100, 100, 100);

  ctx.fillStyle = "#000000";
  ctx.font = "bold 24px Arial";
  ctx.fillText(value, x * 100 + 25, y * 100 + 50);
}

这个函数接受三个参数：x和y是卡片的位置，value是卡片的值。函数首先绘制一个白色的矩形，然后在矩形内部绘制卡片的值。

我们可以使用以下代码来绘制全部的卡片：

for (let i = 0; i < 4; i++) {
  for (let j = 0; j < 4; j++) {
    drawCard(i, j, 0);
  }
}

这段代码使用两个嵌套循环来遍历棋盘上的所有单元格，并为每个单元格绘制一个卡片。

随机生成一个卡片（2或者4）

接下来，我们需要随机生成一个卡片（2或4）并将其放置在棋盘的随机位置。我们可以使用以下代码来实现：

function generateCard() {
  const emptyCells = [];
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (grid[i][j] === 0) {
        emptyCells.push({ x: i, y: j });
      }
    }
  }

  const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
  grid[randomCell.x][randomCell.y] = Math.random() < 0.9 ? 2 : 4;
}

这个函数首先找到棋盘上所有为空的单元格，然后从这些单元格中随机选择一个单元格，并将其值设置为2或4（2的概率为90%，4的概率为10%）。

键盘事件监听（上、下、左、右键监听）

接下来，我们需要监听键盘事件，以便玩家可以通过上下左右四个方向移动数字。我们可以使用以下代码来实现：

document.addEventListener("keydown", function(event) {
  switch (event.keyCode) {
    case 37: // left
      moveLeft();
      break;
    case 38: // up
      moveUp();
      break;
    case 39: // right
      moveRight();
      break;
    case 40: // down
      moveDown();
      break;
  }
});

这段代码首先监听键盘的keydown事件，然后根据玩家按下的键（上下左右键），调用相应的函数来移动数字。

根据键盘的方向，处理数字的移动合并

最后，我们需要编写代码来处理数字的移动和合并。我们可以使用以下代码来实现：

function moveLeft() {
  for (let i = 0; i < 4; i++) {
    for (let j = 1; j < 4; j++) {
      if (grid[i][j] !== 0) {
        const nextCell = j - 1;
        if (grid[i][nextCell] === 0) {
          grid[i][nextCell] = grid[i][j];
          grid[i][j] = 0;
        } else if (grid[i][nextCell] === grid[i][j]) {
          grid[i][nextCell] *= 2;
          grid[i][j] = 0;
        }
      }
    }
  }
}

function moveUp() {
  // ...
}

function moveRight() {
  // ...
}

function moveDown() {
  // ...
}

这些函数接受一个方向参数（left、up、right或down），并根据参数来移动数字。函数首先遍历棋盘上的所有单元格，然后检查每个单元格中的数字是否可以移动到相邻的单元格，以及是否可以与其他数字合并。如果可以移动或合并，函数将执行相应的操作并更新棋盘。

加入成功和失败条件

最后，我们需要加入成功和失败条件。我们可以使用以下代码来实现：

function checkWin() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (grid[i][j] === 2048) {
        return true;
      }
    }
  }

  return false;
}

function checkLose() {
  // ...
}