使用JavaScript构建滑动拼图游戏

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

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

👀 预览

滑动拼图游戏预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") subgraph Lab Skills javascript/variables -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/data_types -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/cond_stmts -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/loops -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/functions -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/array_methods -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/dom_select -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/dom_manip -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} javascript/event_handle -.-> lab-445694{{"`使用JavaScript构建滑动拼图游戏`"}} end

在 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" onclick="move(1)">1</div>
        <!-- 小的 DIV,即 8 个小方块。点击时执行 move() 函数。参数是显示的数字,这样我们就知道点击了哪个方块 -->
        <div id="d2" onclick="move(2)">2</div>
        <div id="d3" onclick="move(3)">3</div>
        <div id="d4" onclick="move(4)">4</div>
        <div id="d5" onclick="move(5)">5</div>
        <div id="d6" onclick="move(6)">6</div>
        <div id="d7" onclick="move(7)">7</div>
        <div id="d8" onclick="move(8)">8</div>
      </div>
      <div id="control">
        <!-- 游戏控制区域 -->
        <p>
          <rowspan id="timeText">总时间</rowspan>
          <!--  “总时间” -->
          <rowspan id="timer"></rowspan>
        </p>
        <!-- 显示游戏时间的区域 -->
        <p>
          <rowspan id="start" onclick="start()">开始</rowspan>
          <!--  “开始” -->
          <rowspan id="reset" onclick="reset()">重试</rowspan>
          <!--  “重试” -->
        </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 教程