2048小游戏：揭秘如何用JavaScript、HTML和CSS创建自己的Web端游戏

前言

2048是一款风靡全球的数字益智游戏，它简单易玩，却令人欲罢不能。这款游戏最早由意大利程序员加布里埃尔·奇鲁利于2014年开发，迅速风靡全球。玩家需要通过滑动屏幕上的数字方块，使相邻的相同数字方块合并成一个更大的数字方块。最终目标是将方块合并成一个带有数字“2048”的方块。

对于我们这些程序员来说，与其只顾玩游戏，不如亲自开发一个2048游戏，既可以体验游戏的乐趣，也可以锻炼自己的编程能力。接下来，我们就来一起用JavaScript、HTML和CSS来实现一个Web端的2048小游戏。

游戏界面设计

2048游戏的界面非常简单，由一个4x4的方块网格组成。每个方块中可以包含一个数字，数字的范围从2到2048。玩家可以通过滑动屏幕上的方块，使相邻的相同数字方块合并成一个更大的数字方块。

为了实现游戏的界面，我们需要使用HTML和CSS来创建一个4x4的方块网格。我们可以使用以下HTML代码来创建方块网格：

<div id="game-board">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

然后，我们可以使用CSS来设置方块网格的样式。我们可以使用以下CSS代码来设置方块网格的样式：

#game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  border: 1px solid black;
}

.row {
  display: flex;
  justify-content: center;
}

.cell {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  font-size: 20px;
}

这样，我们就创建了一个4x4的方块网格。接下来，我们需要在方块网格中随机放置一些数字方块。

数字方块生成

为了在方块网格中随机放置数字方块，我们需要使用JavaScript。我们可以使用以下JavaScript代码来在方块网格中随机放置数字方块：

function generateRandomNumber() {
  // 生成一个0到3之间的随机整数
  let randomNumber = Math.floor(Math.random() * 4);

  // 生成一个2或4的随机整数
  let randomValue = Math.random() < 0.5 ? 2 : 4;

  // 返回一个对象，包含随机整数和随机值
  return {
    randomNumber: randomNumber,
    randomValue: randomValue
  };
}

function placeRandomNumber() {
  // 获取一个随机数对象
  let randomNumberObject = generateRandomNumber();

  // 获取随机整数和随机值
  let randomNumber = randomNumberObject.randomNumber;
  let randomValue = randomNumberObject.randomValue;

  // 获取随机方块
  let randomCell = document.querySelectorAll('.cell')[randomNumber];

  // 如果随机方块为空，则将随机值放入随机方块
  if (!randomCell.innerHTML) {
    randomCell.innerHTML = randomValue;
  } else {
    // 如果随机方块不为空，则递归调用placeRandomNumber()函数
    placeRandomNumber();
  }
}

placeRandomNumber();
placeRandomNumber();

这样，我们就随机在方块网格中放置了两个数字方块。

方块滑动和合并

为了实现方块的滑动和合并，我们需要使用JavaScript。我们可以使用以下JavaScript代码来实现方块的滑动和合并：

document.addEventListener('keydown', (event) => {
  // 获取按键代码
  let keyCode = event.keyCode;

  // 根据按键代码移动方块
  switch (keyCode) {
    case 37: // 左箭头
      moveLeft();
      break;
    case 38: // 上箭头
      moveUp();
      break;
    case 39: // 右箭头
      moveRight();
      break;
    case 40: // 下箭头
      moveDown();
      break;
  }
});

function moveLeft() {
  // 获取所有方块
  let cells = document.querySelectorAll('.cell');

  // 遍历所有方块
  for (let i = 0; i < cells.length; i++) {
    // 获取当前方块
    let currentCell = cells[i];

    // 获取当前方块的值
    let currentValue = currentCell.innerHTML;

    // 如果当前方块不为空
    if (currentValue) {
      // 获取当前方块左侧的方块
      let leftCell = currentCell.previousElementSibling;

      // 如果左侧方块为空
      if (!leftCell.innerHTML) {
        // 将当前方块的值移动到左侧方块
        leftCell.innerHTML = currentValue;

        // 将当前方块的值清空
        currentCell.innerHTML = '';
      } else if (leftCell.innerHTML === currentValue) {
        // 如果左侧方块的值与当前方块的值相同
        // 将当前方块的值与左侧方块的值合并
        leftCell.innerHTML = parseInt(currentValue) + parseInt(leftCell.innerHTML);

        // 将当前方块的值清空
        currentCell.innerHTML = '';
      }
    }
  }
}

function moveUp() {
  // 获取所有方块
  let cells = document.querySelectorAll('.cell');

  // 遍历所有方块
  for (let i = 0; i < cells.length; i++) {
    // 获取当前方块
    let currentCell = cells[i];

    // 获取当前方块的值
    let currentValue = currentCell.innerHTML;

    // 如果当前方块不为空
    if (currentValue) {
      // 获取当前方块上方的方块
      let topCell = currentCell.parentElement.previousElementSibling.children[i];

      // 如果上方方块为空
      if (!topCell.innerHTML) {
        // 将当前方块的值移动到上方方块
        topCell.innerHTML = currentValue;

        // 将当前方块的值清空
        currentCell.innerHTML = '';
      } else if (topCell.innerHTML === currentValue) {
        // 如果上方方块的值与当前方块的值相同
        // 将当前方块的值与上方方块的值合并
        topCell.innerHTML = parseInt(currentValue) + parseInt(topCell.innerHTML);

        // 将当前方块的值清空
        currentCell.innerHTML = '';
      }
    }
  }
}

function moveRight() {
  // 获取所有方块
  let cells = document.querySelectorAll('.cell');

  // 遍历所有方块
  for (let i = cells.length - 1; i >= 0; i--) {
    // 获取当前方块
    let currentCell = cells[i];

    // 获取当前方块的值
    let currentValue = currentCell.innerHTML;

    // 如果当前方块不为空
    if (currentValue) {
      // 获取当前方块右侧的方块
      let rightCell = currentCell.nextElementSibling;

      // 如果右侧方块为空
      if (!rightCell.innerHTML) {
        //