LabEx
登录免费加入

使用 jQuery 的 2048 网页游戏

JavaScriptBeginner
立即练习

介绍

2048 是一款极其流行且易于上手的游戏，它在全球掀起了一股热潮。如果你还没有玩过，可以在手机上下载体验一下。本项目将指导你使用 HTML、CSS、JavaScript 和 jQuery 创建 2048 游戏的网页版。

  • 了解 Web 应用程序的开发过程
  • 探索如何使应用程序在移动设备上响应式显示，以适应各种尺寸的屏幕，并处理布局和初始化
  • 利用 JavaScript 和 jQuery 编写游戏逻辑，实现方块移动并确定游戏结果。

👀 预览

2048 游戏预览动画

🎯 任务

在本项目中，你将学习：

  • 如何使用 HTML 和 CSS 创建 2048 网页游戏的页面布局
  • 如何在 JavaScript 和 jQuery 中实现游戏逻辑
  • 如何处理方块移动和方块合并
  • 如何在网页浏览器中测试和运行网页游戏

🏆 成果

完成本项目后，你将能够：

  • 为 2048 游戏开发一个响应式 Web 应用程序
  • 利用 JavaScript 和 jQuery 编写游戏逻辑和功能
  • 在游戏中实现方块移动和合并
  • 在网页浏览器中测试和运行网页游戏

开发准备

先不考虑页面样式，2048 游戏可以抽象为一个二维数组。在初始状态下，需要随机生成两个数字。随机生成的数字只能是 2 或 4。在后续实现中，我们将使 2 和 4 的出现概率相等。当然，你也可以让 4 出现的概率更小。

0 0 0 0
2 0 0 0
0 0 2 0

接下来，当我按下方向键时，数字会向该方向移动，并且相邻的相同数字会合并。然后，会再随机生成一个数字。例如，如果我们按上→左→上，界面可能会变成：

2 0 2 0
0 0 0 0
0 0 0 0
4 0 0 0

4 0 0 0
0 0 0 0
0 0 2 0
4 0 0 0

8 0 2 0
0 0 0 0
0 4 0 0

这样，我们不断移动和合并数字，直到数字无法再合并或者直到出现 2048，游戏结束。如你所见，游戏的核心就是操作这个二维数组。

项目文件结构

首先，我们需要在 ~/project 路径下创建以下文件结构：

~/project
 |__ index.html
 |__ main.js
 |__ support.js
 |__ showanimation.js
 |__ style.css

jquery.min.js 已经放在 ~/project 路径下，所以你可以直接使用它。

现在让我们正式开始编码任务！我们将从页面布局开始，逐步完成诸如初始化棋盘和移动数字方块等模块。

页面布局

如你所见，2048 游戏是基于 16 个方块构建的。下面，我们将使用 div + css 来绘制这些 4X4 的单元格。请将以下代码添加到 index.html 文件中：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>2048 游戏</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="showanimation.js"></script>
    <script type="text/javascript" src="support.js"></script>
  </head>
  <body>
    <header>
      <h1>2048 游戏</h1>
      <a href="javascript:new_game();" id="new_game_button">新游戏</a>
      <p>分数：<span id="score">0</span></p>
    </header>
    <div id="grid_container">
      <div class="grid_cell" id="grid_cell_0_0"></div>
      <div class="grid_cell" id="grid_cell_0_1"></div>
      <div class="grid_cell" id="grid_cell_0_2"></div>
      <div class="grid_cell" id="grid_cell_0_3"></div>

      <div class="grid_cell" id="grid_cell_1_0"></div>
      <div class="grid_cell" id="grid_cell_1_1"></div>
      <div class="grid_cell" id="grid_cell_1_2"></div>
      <div class="grid_cell" id="grid_cell_1_3"></div>

      <div class="grid_cell" id="grid_cell_2_0"></div>
      <div class="grid_cell" id="grid_cell_2_1"></div>
      <div class="grid_cell" id="grid_cell_2_2"></div>
      <div class="grid_cell" id="grid_cell_2_3"></div>

      <div class="grid_cell" id="grid_cell_3_0"></div>
      <div class="grid_cell" id="grid_cell_3_1"></div>
      <div class="grid_cell" id="grid_cell_3_2"></div>
      <div class="grid_cell" id="grid_cell_3_3"></div>
    </div>
  </body>
</html>

接下来，我们需要为页面和每个单元格添加样式。请将以下代码添加到 style.css 文件中：

body {
  padding: 50px 0px;
}

header {
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

header h1 {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  margin: 0 auto;
  color: #776e65;
  padding: 20px 0px;
}

header #new_game_button {
  display: block;
  margin: 0px auto;
  width: 100px;
  padding: 10px 10px;
  background-color: #8f7a66;
  font-family: Arial;
  color: white;
  border-radius: 10px;
  text-decoration: none;
}

header #new_game_button:hover {
  background-color: #9f8b77;
}

header p {
  font-family: Arial;
  font-size: 25px;
  margin: 5px auto;
}

#grid_container {
  width: 460px;
  height: 460px;
  padding: 20px;
  margin: 0px auto;
  background-color: #bbada0;
  border-radius: 10px;
  position: relative;
}

.grid_cell {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  background-color: #ccc0b3;
  position: absolute;
}

.number_cell {
  border-radius: 6px;
  font-family: Arial;
  font-weight: bold;
  font-size: 60px;
  line-height: 100px;
  text-align: center;
  position: absolute;
}

完成此步骤后，使用预览功能打开 index.html 文件，

2048 游戏的 HTML 代码

我们应该会看到以下结果：

2048 游戏网格布局

初始化棋盘

随着移动设备的日益普及，我们需要处理对各种屏幕尺寸的适应性。

在游戏开始时，我们需要在棋盘上生成两个随机数。这通过 JavaScript 代码实现。

在 main.js 中，添加以下内容：

var board = new Array(); // 每个单元格中的数字
var score = 0; // 分数
var has_conflicted = new Array(); // 解决连续消除的标志
var startx = 0; // 触摸移动屏幕时的起始 x 坐标
var starty = 0; // 触摸移动屏幕时的起始 y 坐标
var endx = 0; // 触摸移动屏幕时的结束 x 坐标
var endy = 0; // 触摸移动屏幕时的结束 y 坐标
var success_string = "成功";
var gameover_string = "游戏结束";

// 在 HTML 文档加载后初始化棋盘
$(document).ready(function () {
  // 处理适应性
  prepare_for_mobile();
  new_game();
});

// 开始新游戏
function new_game() {
  // 初始化棋盘
  init();
  // 在两个随机单元格中生成数字
  generate_one_number();
}

// 初始化
function init() {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      var grid_cell = $("#grid_cell_" + i + "_" + j);
      grid_cell.css("top", get_pos_top(i, j));
      grid_cell.css("left", get_pos_left(i, j));
    }
  }
  for (var i = 0; i < 4; i++) {
    board[i] = new Array();
    has_conflicted[i] = new Array();
    for (var j = 0; j < 4; j++) {
      board[i][j] = 0;
      has_conflicted[i][j] = false;
    }
  }
  update_board_view();
  score = 0;
  update_score(score);
}

// 更新棋盘视图
function update_board_view() {
  $(".number_cell").remove();
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      $("#grid_container").append(
        '<div class="number_cell" id="number_cell_' + i + "_" + j + '"></div>'
      );
      var number_cell = $("#number_cell_" + i + "_" + j);
      if (board[i][j] == 0) {
        number_cell.css("width", "0px");
        number_cell.css("height", "0px");
        number_cell.css("top", get_pos_top(i, j) + cell_side_length / 2);
        number_cell.css("left", get_pos_left(i, j) + cell_side_length / 2);
      } else {
        number_cell.css("width", cell_side_length);
        number_cell.css("height", cell_side_length);
        number_cell.css("top", get_pos_top(i, j));
        number_cell.css("left", get_pos_left(i, j));
        number_cell.css(
          "background-color",
          get_number_background_color(board[i][j])
        );
        number_cell.css("color", get_number_color(board[i][j]));
        number_cell.text(board[i][j]);
      }
      has_conflicted[i][j] = false;
    }
  }
  $(".number_cell").css("line-height", cell_side_length + "px");
  $(".number_cell").css("font-size", 0.6 * cell_side_length + "px");
}

// 在随机单元格中生成一个数字
function generate_one_number() {
  if (nospace(board)) {
    return false;
  }
  // 随机位置
  var randx = parseInt(Math.floor(Math.random() * 4));
  var randy = parseInt(Math.floor(Math.random() * 4));
  var time = 0;
  while (time < 50) {
    if (board[randx][randy] == 0) {
      break;
    }
    randx = parseInt(Math.floor(Math.random() * 4));
    randy = parseInt(Math.floor(Math.random() * 4));
    time++;
  }
  if (time == 50) {
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 4; j++) {
        if (board[i][j] == 0) {
          randx = i;
          randy = j;
        }
      }
    }
  }
  // 随机数字
  var rand_number = Math.random() < 0.5 ? 2 : 4;
  // 在随机位置显示随机数字
  board[randx][randy] = rand_number;
  show_number_with_animation(randx, randy, rand_number);
  return true;
}

// 处理适应性
function prepare_for_mobile() {
  if (document_width > 500) {
    grid_container_width = 500;
    cell_side_length = 100;
    cell_space = 20;
  }
  $("#grid_container").css("width", grid_container_width - 2 * cell_space);
  $("#grid_container").css("height", grid_container_width - 2 * cell_space);
  $("#grid_container").css("padding", cell_space);
  $("#grid_container").css("border-radius", 0.02 * grid_container_width);
  $(".grid_cell").css("width", cell_side_length);
  $(".grid_cell").css("height", cell_side_length);
  $(".grid_cell").css("border-radius", 0.02 * grid_container_width);
}

优化游戏逻辑

接下来，我们需要改进游戏逻辑，包括移动数字方块以及检查游戏是否结束。在 support.js 中完成以下代码：

document_width = window.screen.availWidth; // 屏幕宽度
grid_container_width = 0.92 * document_width; // 游戏棋盘的宽度
cell_side_length = 0.18 * document_width; // 每个网格单元格的大小
cell_space = 0.04 * document_width; // 每个网格单元格之间的间距

// 获取相应网格单元格距离游戏棋盘顶部的距离
function get_pos_top(i, j) {
  return cell_space + i * (cell_space + cell_side_length);
}

// 获取相应网格单元格距离游戏棋盘左侧的距离
function get_pos_left(i, j) {
  return cell_space + j * (cell_space + cell_side_length);
}

// 获取相应数字的背景颜色
function get_number_background_color(number) {
  switch (number) {
    case 2:
      return "#eee4da";
      break;
    case 4:
      return "#ede0c8";
      break;
    case 8:
      return "#f2b179";
      break;
    case 16:
      return "#f59563";
      break;
    case 32:
      return "#f67c5f";
      break;
    case 64:
      return "#f65e3b";
      break;
    case 128:
      return "#edcf72";
      break;
    case 256:
      return "#edcc61";
      break;
    case 512:
      return "#9c0";
      break;
    case 1024:
      return "#33b5e5";
      break;
    case 2048:
      return "#09c";
      break;
    case 4096:
      return "#a6c";
      break;
    case 8192:
      return "#93c";
      break;
  }
  return "黑色";
}

// 获取相应数字的颜色
function get_number_color(number) {
  if (number <= 4) return "#776e65";
  return "白色";
}

// 检查游戏棋盘上是否有任何空的网格单元格
function nospace(board) {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      if (board[i][j] == 0) {
        return false;
      }
    }
  }
  return true;
}

增强动画效果

接下来，我们需要增强动画效果，包括显示数字方块和更新分数。这些代码都位于 showanimation.js 中：

// 显示数字方块的动画
function show_number_with_animation(i, j, rand_number) {
  var number_cell = $("#number_cell_" + i + "_" + j);
  number_cell.css("background-color", get_number_background_color(rand_number));
  number_cell.css("color", get_number_color(rand_number));
  number_cell.text(rand_number);
  number_cell.animate(
    {
      width: cell_side_length,
      height: cell_side_length,
      top: get_pos_top(i, j),
      left: get_pos_left(i, j)
    },
    50
  );
}

// 更新分数
function update_score(score) {
  $("#score").text(score);
}

移动数字方块

完成布局和初始化后，我们现在将实现移动和消除数字方块的功能，直到游戏成功或失败。

在 main.js 中添加以下代码：

// 监听键盘箭头键移动
$(document).keydown(function (event) {
  if ($("#score").text() == success_string) {
    new_game();
    return;
  }
  switch (event.keyCode) {
    case 37: // 左
      event.preventDefault();
      if (move_left()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    case 38: // 上
      event.preventDefault();
      if (move_up()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    case 39: // 右
      event.preventDefault();
      if (move_right()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    case 40: // 下
      event.preventDefault();
      if (move_down()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    default:
      break;
  }
});

// 监听移动设备上的 touchstart 事件
document.addEventListener("touchstart", function (event) {
  startx = event.touches[0].pageX;
  starty = event.touches[0].pageY;
});

// 监听移动设备上的 touchmove 事件
document.addEventListener("touchmove", function (event) {
  event.preventDefault();
});

// 监听移动设备上的 touchend 事件
document.addEventListener("touchend", function (event) {
  endx = event.changedTouches[0].pageX;
  endy = event.changedTouches[0].pageY;

  var deltax = endx - startx;
  var deltay = endy - starty;
  if (
    Math.abs(deltax) < 0.3 * document_width &&
    Math.abs(deltay) < 0.3 * document_width
  ) {
    return;
  }
  if ($("#score").text() == success_string) {
    new_game();
    return;
  }
  // x轴移动
  if (Math.abs(deltax) >= Math.abs(deltay)) {
    if (deltax > 0) {
      // 向右移动
      if (move_right()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    } else {
      // 向左移动
      if (move_left()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    }
  } else {
    // y 轴移动
    if (deltay > 0) {
      // 向下移动
      if (move_down()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    } else {
      // 向上移动
      if (move_up()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    }
  }
});

// 向左移动
function move_left() {
  if (!can_move_left(board)) {
    return false;
  }
  // 向左移动
  for (var i = 0; i < 4; i++) {
    for (var j = 1; j < 4; j++) {
      if (board[i][j] != 0) {
        for (var k = 0; k < j; k++) {
          if (board[i][k] == 0 && no_block_horizontal(i, k, j, board)) {
            show_move_animation(i, j, i, k);
            board[i][k] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[i][k] == board[i][j] &&
            no_block_horizontal(i, k, j, board) &&
            !has_conflicted[i][k]
          ) {
            show_move_animation(i, j, i, k);
            board[i][k] += board[i][j];
            board[i][j] = 0;
            // 添加分数
            score += board[i][k];
            update_score(score);
            has_conflicted[i][k] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// 向右移动
function move_right() {
  if (!can_move_right(board)) {
    return false;
  }
  // 向右移动
  for (var i = 0; i < 4; i++) {
    for (var j = 2; j >= 0; j--) {
      if (board[i][j] != 0) {
        for (var k = 3; k > j; k--) {
          if (board[i][k] == 0 && no_block_horizontal(i, j, k, board)) {
            show_move_animation(i, j, i, k);
            board[i][k] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[i][k] == board[i][j] &&
            no_block_horizontal(i, j, k, board) &&
            !has_conflicted[i][k]
          ) {
            show_move_animation(i, j, i, k);
            board[i][k] += board[i][j];
            board[i][j] = 0;
            // 添加分数
            score += board[i][k];
            update_score(score);
            has_conflicted[i][k] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// 向上移动
function move_up() {
  if (!can_move_up(board)) {
    return false;
  }
  // 向上移动
  for (var j = 0; j < 4; j++) {
    for (var i = 1; i < 4; i++) {
      if (board[i][j] != 0) {
        for (var k = 0; k < i; k++) {
          if (board[k][j] == 0 && no_block_vertical(j, k, i, board)) {
            show_move_animation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[k][j] == board[i][j] &&
            no_block_vertical(j, k, i, board) &&
            !has_conflicted[k][j]
          ) {
            show_move_animation(i, j, k, j);
            board[k][j] += board[i][j];
            board[i][j] = 0;
            // 添加分数
            score += board[k][j];
            update_score(score);
            has_conflicted[k][j] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// 向下移动
function move_down() {
  if (!can_move_down(board)) {
    return false;
  }
  // 向下移动
  for (var j = 0; j < 4; j++) {
    for (var i = 2; i >= 0; i--) {
      if (board[i][j] != 0) {
        for (var k = 3; k > i; k--) {
          if (board[k][j] == 0 && no_block_vertical(j, i, k, board)) {
            show_move_animation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[k][j] == board[i][j] &&
            no_block_vertical(j, i, k, board) &&
            !has_conflicted[k][j]
          ) {
            show_move_animation(i, j, k, j);
            board[k][j] += board[i][j];
            board[i][j] = 0;
            // 添加分数
            score += board[k][j];
            update_score(score);
            has_conflicted[k][j] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// 检查游戏是否成功或失败
function is_gameover() {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      if (board[i][j] == 2048) {
        update_score(success_string);
        return;
      }
    }
  }
  if (nospace(board) && nomove(board)) {
    gameover();
  }
}

// 游戏结束时更新游戏结束文本
function gameover() {
  update_score(gameover_string);
}

改进 support.js

接下来，我们需要改进 support.js 中的代码，包括检查是否可以移动或仍能移动。

// 检查是否可以向左移动
function can_move_left(board) {
  for (var i = 0; i < 4; i++) {
    for (var j = 1; j < 4; j++) {
      if (board[i][j] != 0) {
        if (board[i][j - 1] == 0 || board[i][j] == board[i][j - 1]) {
          return true;
        }
      }
    }
  }
  return false;
}

// 检查是否可以向右移动
function can_move_right(board) {
  for (var i = 0; i < 4; i++) {
    for (var j = 2; j >= 0; j--) {
      if (board[i][j] != 0) {
        if (board[i][j + 1] == 0 || board[i][j] == board[i][j + 1]) {
          return true;
        }
      }
    }
  }
  return false;
}

// 检查是否可以向上移动
function can_move_up(board) {
  for (var j = 0; j < 4; j++) {
    for (var i = 1; i < 4; i++) {
      if (board[i][j] != 0) {
        if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]) {
          return true;
        }
      }
    }
  }
  return false;
}

// 检查是否可以向下移动
function can_move_down(board) {
  for (var j = 0; j < 4; j++) {
    for (var i = 2; i >= 0; i--) {
      if (board[i][j] != 0) {
        if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {
          return true;
        }
      }
    }
  }
  return false;
}

// 检查水平方向是否没有阻挡
function no_block_horizontal(row, col1, col2, board) {
  for (var i = col1 + 1; i < col2; i++) {
    if (board[row][i] != 0) {
      return false;
    }
  }
  return true;
}

// 检查垂直方向是否没有阻挡
function no_block_vertical(col, row1, row2, board) {
  for (var i = row1 + 1; i < row2; i++) {
    if (board[i][col] != 0) {
      return false;
    }
  }
  return true;
}

// 检查是否仍能移动
function nomove(board) {
  if (
    can_move_down(board) ||
    can_move_up(board) ||
    can_move_right(board) ||
    can_move_left(board)
  ) {
    return false;
  }
  return true;
}

完成游戏

最后，我们需要完善 showanimation.js 中的代码，包括显示移动动画和合并动画。

// 网格移动时的动画效果
function show_move_animation(fromx, fromy, tox, toy) {
  var number_cell = $("#number_cell_" + fromx + "_" + fromy);
  number_cell.animate(
    {
      top: get_pos_top(tox, toy),
      left: get_pos_left(tox, toy)
    },
    200
  );
}

至此，我们的网页版 2048 游戏就完成了。

运行与测试

在网页浏览器中打开 index.html。

显示 index html 的网页浏览器

要查看以下效果，请点击 WebIDE 右下角的上线按钮，并切换到“Web 8080”标签页。

实时预览演示

总结

在本项目中，我们使用 HTML、CSS、JavaScript 和 jQuery 实现了一个网页版的 2048 游戏。我们还学习了如何使其兼容移动设备。相信通过这个项目，你可以加深对前端技术的理解，并提高你的综合应用能力。

✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习✨ 查看解决方案并练习
相关 JavaScript 课程
JavaScript 入门

JavaScript 入门

javascriptweb-development
构建一个井字棋网页应用

构建一个井字棋网页应用

javascriptweb-development
创建打地鼠网页游戏

创建打地鼠网页游戏

javascriptweb-development