LabEx
登录免费加入

使用 JavaScript 构建滑动拼图游戏

JavaScriptBeginner
立即练习

介绍

欢迎来到这个使用 JavaScript 构建简单滑动拼图游戏的项目。在本指南结束时，你将拥有一个可以在浏览器中玩的 3x3 滑动拼图游戏。该游戏将具有编号的方块、一个计时器以及用于开始、暂停和重置游戏的控件。

无需任何先验经验，但对 JavaScript 和 HTML 有基本的了解会有所帮助。让我们开始吧！

👀 预览

滑动拼图游戏预览

🎯 任务

在这个项目中，你将学习：

  • 如何在 HTML 中设计游戏布局
  • 如何为游戏编写 CSS 样式
  • 如何在 JavaScript 中初始化游戏变量
  • 如何实现移动函数来处理方块的移动
  • 如何确定可能的方块移动
  • 如何实现游戏计时器
  • 如何使用开始、暂停和重置函数来控制游戏流程
  • 如何在开始时或重置时随机打乱方块
  • 如何在页面加载时初始化游戏

🏆 成果

完成这个项目后，你将能够：

  • 使用 HTML 设计游戏布局
  • 使用 CSS 对元素进行样式设置
  • 使用 JavaScript 实现游戏逻辑
  • 处理用户输入并基于此执行操作
  • 操作 DOM 以更新游戏状态并显示信息

在 HTML 中设计游戏布局

按照上一部分的说明，在 index.html 中设计游戏布局。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>拼图</title>
    <link rel="stylesheet" type="text/css" href="puzzle.css" />
    <script type="text/javascript" src="puzzle.js"></script>
  </head>
  <body>
    <div id="container">
      <!-- 最外层的 DIV，用于包含内部结构 -->
      <div id="game">
        <!-- 游戏区域，即大的 DIV 块 -->
        <div id="d1"
        <!-- 小的 DIV，即 8 个小方块。点击时执行 move() 函数。参数是显示的数字，这样我们就知道点击了哪个方块 -->
        <div id="d2"
        <div id="d3"
        <div id="d4"
        <div id="d5"
        <div id="d6"
        <div id="d7"
        <div id="d8"
      </div>
      <div id="control">
        <!-- 游戏控制区域 -->
        <p>
          <rowspan id="timeText">总时间</rowspan>
          <!--  “总时间” -->
          <rowspan id="timer"></rowspan>
        </p>
        <!-- 显示游戏时间的区域 -->
        <p>
          <rowspan id="start"
          <!--  “开始” -->
          <rowspan id="reset"
          <!--  “重试” -->
        </p>
        <!-- 显示控制按钮的区域 -->
      </div>
    </div>
  </body>
</html>

编写 CSS 样式

完成布局结构后，就该用 CSS 样式美化我们的游戏了。在此阶段，你可以根据自己的喜好自定义和设计游戏，添加独特的风格和细节。你也可以引入更多装饰元素来提升游戏的美观度。不过，需要注意的是：如果你更改了游戏主 DIV 的大小，确保同时调整相应的 JavaScript 代码。我们稍后会更深入地讨论这一点。

在 puzzle.css 中添加：

* {
  padding: 0;
  margin: 0;
  border: 0;
}
/* “*”是一个通配符，用于去除所有元素的默认样式，因为某些浏览器可能会添加默认样式，这可能会导致布局问题。 */

body {
  width: 100%;
  height: 100%;
}
/* 将 body 的高度和宽度设置为 100%，使其根据浏览器屏幕大小自动适应。 */

#container {
  position: relative;
  width: 620px;
  height: 450px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 1px;
}
/* 这是包裹所有元素的 DIV。设置为宽度 620px 和高度 450px。这个尺寸可以增大，但不能减小。它应该足够大以包含所有内部元素。 */

#game {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 5px;
  display: inline-block;
  background-color: #ffe171;
  box-shadow: 0 0 10px #ffe171;
}
/* 这是游戏区域 DIV。其大小是根据较小方块的尺寸计算得出的。这里，方块设置为 150px×150px，所以游戏区域是 150px×3，即 450px。 */

#game div {
  position: absolute;
  width: 149px;
  height: 149px;
  box-shadow: 1px 1px 2px #777;
  background-color: #20a6fa;
  color: white;
  text-align: center;
  font-size: 150px;
  line-height: 150px;
  cursor: pointer;
  -webkit-transition: 0.3s; /* Chrome 浏览器前缀 */
  -moz-transition: 0.3s; /* 适用于 Firefox */
  -ms-transition: 0.3s; /* 适用于 IE */
  -o-transition: 0.3s; /* 适用于 Opera */
  transition: 0.3s;
}
/* 这设置了小方块的大小。定位为绝对定位，位置的变化不会影响其他元素的位置。宽度和高度均为 149px。值得注意的是，有一个盒子阴影，增加了其整体尺寸。“transition:0.3s”属性使变化以动画形式呈现，所以当方块的位置改变时，会自动播放动画。 */

#game div:hover {
  color: #ffe171;
}
/* 为方块设置鼠标悬停动画。当鼠标悬停在元素上时，这些属性会替换上面的属性，鼠标移开时恢复原状。这里，我们改变了字体颜色。 */

#control {
  width: 150px;
  height: 450px;
  display: inline-block;
  float: right;
}
/* 控制部分。“display:inline-block”允许元素保持块级属性，同时不占用整行，“float:right”将其定位在右侧。 */

#control rowspan {
  height: 25px;
  font-size: 20px;
  color: #222;
  margin-top: 10px;
}
/* 控制区域中按钮的通用样式。 */

#start {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #4c98f5;
  text-align: center;
  cursor: pointer;
}
/* “开始”按钮的样式。“cursor:pointer”使鼠标悬停时光标变为手型符号。 */

#reset {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171; /* 字体阴影 */
  border-radius: 5px; /* 圆角 */
  box-shadow: 2px 2px 5px #4c98f5; /* 盒子阴影 */
  text-align: center; /* 文本居中 */
  cursor: pointer;
}
/* “重置”按钮的样式。 */

#d1 {
  left: 0px;
}
#d2 {
  left: 150px;
}
#d3 {
  left: 300px;
}
#d4 {
  top: 150px;
}
#d5 {
  top: 150px;
  left: 150px;
}
#d6 {
  top: 150px;
  left: 300px;
}
#d7 {
  top: 300px;
}
#d8 {
  left: 150px;
  top: 300px;
}
/* 按顺序为每个方块预定义的位置。 */

设置好样式是向前迈出的重要一步。接下来，我们将继续编写 JavaScript 逻辑，让我们的拼图游戏动起来。建议按照上述说明进行初始样式设置。一旦对游戏功能有了很好的理解，你就可以发挥创造力，进一步自定义样式。然而，过早进行不明智的更改可能会导致意外的故障。

在 JavaScript 中初始化游戏变量

在添加游戏功能之前，先初始化重要的游戏状态变量。

在 puzzle.js 中添加：

// puzzle.js

var time = 0;
// 保存经过的时间
var pause = true;
// 表示游戏是否暂停的标志，true 表示已暂停
var set_timer;
// 定时器函数
var d = new Array(10);
// 存储当前在大 DIV 中的小 DIV 的编号
var d_direct = new Array(
  [0],
  [2, 4], // 编号为 1 的大 DIV 可以移动到位置 2 和 4
  [1, 3, 5],
  [2, 6],
  [1, 5, 7],
  [2, 4, 6, 8],
  [3, 5, 9],
  [4, 8],
  [5, 7, 9],
  [6, 8]
);
// 保存大 DIV 可能的移动位置
var d_posXY = new Array(
  [0],
  [0, 0], // 第一个数字表示左边距，第二个数字表示上边距。例如，第一个方块的位置是左边距:0px，上边距:0px
  [150, 0],
  [300, 0],
  [0, 150],
  [150, 150],
  [300, 150],
  [0, 300],
  [150, 300],
  [300, 300]
);
// 大 DIV 的位置
d[1] = 1;
d[2] = 2;
d[3] = 3;
d[4] = 4;
d[5] = 5;
d[6] = 6;
d[7] = 7;
d[8] = 8;
d[9] = 0;
// 默认排列，第九个大 DIV 为空，所以是 0。我们用 0 表示空白方块。

实现移动功能

创建一个函数，使方块能够根据用户交互进行移动。

在 puzzle.js 中添加：

// puzzle.js

function move(id) {
  // 移动函数
  var i = 1;
  for (i = 1; i < 10; ++i) {
    if (d[i] == id) break;
  }
  // 此循环找到小 DIV 在大 DIV 中的位置
  var target_d = 0;
  // 保存小 DIV 可能的移动位置，0 表示无法移动
  target_d = whereCanTo(i);
  // 找出小 DIV 可以移动到的位置。如果返回 0，表示无法移动，否则返回目标位置编号
  if (target_d != 0) {
    d[i] = 0;
    // 将当前大 DIV 的编号设为 0，因为小 DIV 已移动，所以当前大 DIV 现在为空
    d[target_d] = id;
    // 将目标大 DIV 设置为点击的小 DIV 的编号
    document.getElementById("d" + id).style.left = d_posXY[target_d][0] + "px";
    document.getElementById("d" + id).style.top = d_posXY[target_d][1] + "px";
    // 最后，将点击的小 DIV 的位置设置为目标大 DIV 的位置
  }

  var finish_flag = true;
  // 表示游戏是否完成的标志，true 表示已完成
  for (var k = 1; k < 9; ++k) {
    if (d[k] != k) {
      finish_flag = false;
      break;
    }
  }
  // 从 1 开始迭代，检查每个大 DIV 的编号。如果它们的顺序不正确，游戏未完成。
  if (finish_flag == true) {
    if (!pause) start();
    alert("恭喜！");
  }
  // 如果为 true，游戏完成。如果未暂停，调用暂停函数并显示成功消息。
}

确定可能的方块移动

创建一个函数，根据方块当前的位置来确定它可以移动到哪里。

在 puzzle.js 中添加：

// puzzle.js

function whereCanTo(cur_div) {
  // 用于确定给定 DIV 是否可以移动以及移动到哪个位置的函数
  var j = 0;
  var move_flag = false;
  for (j = 0; j < d_direct[cur_div].length; ++j) {
    if (d[d_direct[cur_div][j]] == 0) {
      move_flag = true;
      break;
    }
  }
  if (move_flag == true) {
    return d_direct[cur_div][j];
  } else {
    return 0;
  }
  // 如果可以移动，返回目标位置编号，否则返回 0
}

实现游戏定时器

添加一个定时器函数，用于记录游戏过程中经过的时间。

在 puzzle.js 中添加：

// puzzle.js

function timer() {
  // 定时器函数，每秒执行一次
  time += 1;
  var min = parseInt(time / 60); // 将秒数转换为分钟数
  var sec = time % 60; // 获取剩余的秒数
  document.getElementById("timer").innerHTML = min + " 分钟 " + sec + " 秒";
}

控制游戏流程

实现根据用户输入来开始、暂停或重置游戏的功能。

在 puzzle.js 中添加：

// puzzle.js

function start() {
  // 开始或暂停游戏
  if (pause) {
    document.getElementById("start").innerHTML = "暂停";
    pause = false;
    set_timer = setInterval(timer, 1000);
  } else {
    document.getElementById("start").innerHTML = "开始";
    pause = true;
    clearInterval(set_timer);
  }
}
function reset() {
  // 重置游戏
  time = 0;
  random_d();
  if (pause) start();
}

随机打乱方块

创建一个函数，用于在游戏开始时或重置时随机打乱方块。

在 puzzle.js 中添加：

// puzzle.js

function random_d() {
  // 随机打乱方块
  for (var i = 9; i > 1; --i) {
    var to = parseInt(Math.random() * (i - 1) + 1);
    if (d[i] != 0) {
      document.getElementById("d" + d[i]).style.left = d_posXY[to][0] + "px";
      document.getElementById("d" + d[i]).style.top = d_posXY[to][1] + "px";
    }
    if (d[to] != 0) {
      document.getElementById("d" + d[to]).style.left = d_posXY[i][0] + "px";
      document.getElementById("d" + d[to]).style.top = d_posXY[i][1] + "px";
    }
    var tem = d[to];
    d[to] = d[i];
    d[i] = tem;
  }
}

在页面加载时初始化游戏

最后，确保在网页加载时，游戏方块会显示出来并准备好开始游戏。

在 puzzle.js 中添加：

// puzzle.js

// 在页面加载时初始化游戏
window.onload = function () {
  reset();
};

运行项目

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

  • 页面效果如下： puzzle game page preview

总结

你现在已经成功地以结构化和有组织的方式使用 JavaScript 构建了一个滑动拼图游戏！逐步的分解应该会让学习者更容易理解游戏逻辑的每个组件。请记住，这只是一个基本版本，还有很大的改进和添加功能的空间。深入研究并让它成为你自己的作品。编码愉快！

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

JavaScript 入门

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

构建一个井字棋网页应用

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

创建打地鼠网页游戏

javascriptweb-development