bom实现方块移动_html5实现简单的拼图小游戏

  本项目是基于 HTML+CSS+JavaScript 实现网页版的拼图游戏。实现过程中将用到 HTML5,CSS3 及 JavaScript 相关知识。完成这个项目,可以进一步扎实前端基础知识。
 
  九宫格拼图相信大家都玩过了,看似简单的小游戏,但实现起来其实并不那么简单。在以前,写程序是程序员的专利,只有他们才能做出一个软件来。但是现在不同了。科技的进步和经济的发展,使得每个人都可以使用计算机。特别是 HTML5 和 CSS3 的流行,使得制作一个基本的游戏变得简单。
 
  下面我们就来做一个九宫格拼图。它的玩法是移动空格块旁边的方块,使得它们按照方块上面标的数字顺序排好。最终的效果:
 
  本实验涉及以下知识点:
 
  HTML5CSS3JavaScript
 
  Vscode
 
  本项目难度一般,适合刚学完前端基础(HTML+CSS+JavaScript)的同学作为练手项目。
 
  附件:
 
  根据下面的效果图来观察思考,我们要做的就是设置一个大 DIV 用来包裹里面的小 DIV,然后在里面设置 8 个小 DIV,从 1 开始给他们编号。右边设置两个按钮,点击开始的时候开始计时,完成拼图后停止计时,并弹出一个框,提示完成了。重来按钮是当用户觉得当前有难度的时候,点击重来可以重新开始一个新的拼图,把所有方块打乱顺序,然后开始计时。
 
  我们的重点就是当鼠标点击其中一个方块时,要判断当前方块是否可移动,如果可移动,则移动到相应的位置,如不可移动,则不做任何事。当移动完一块后,要判断是否完成拼图。
 
  我们把那个大 DIV 想象成一个盒子,它有九个位置,从 1 开始,到 9 编号,他们的位置和编号都是不会变的。把里面的 8 个小 DIV 想象成 8 个小盒子,给他们设置 top 和 left 就可以控制他们的位置。每个小 DIV 从 1 开始到 8 编号。他们的位置是可以随意改变的。所以当小 DIV 的编号和大 DIV 的编号全部重合时,就完成了拼图。
 
  所以重点就只有一个了。那就是如何判断是否可移动。这个也简单。我们设置一个一维数组变量,用来保存大 DIV 它里面装的小 DIV 的编号。如果大 DIV 没有小方块,也就表面它是空白块,那么就设为 0。如果当前大 DIV 有小 DIV,那就设置为小 DIV 的编号。然后再设置一个二维数组变量,用来保存大 DIV 的可移动编号。也就是保存这个大 DIV 它所有的可去的位置。比如大 DIV 编号为 2 的,它只能向 1 号,3 号,5 号这三个方向移动。又比如 5,它能向 2、4、6、8 这四个方向移动。我们循环遍历这个变量,如果对应的方向它 没有方块,也就是值为 0,那么它就可以往这个方向移动了。
 
  1.准备相关开发工具
 
  2.建立下面的目录结构:
 
  在puzzle.html中我们有下面的代码:
 
  布局文件就写完了。这里为了简化逻辑,更易编写代码,我们把所有操作都封装了。只要执行 move(2),就是点击了编号为 2 的小方块,后面的一系列操作都完成了。
 
  布局写完了,现在我们为游戏编写样式,使得它更漂亮。在这一步,大家就可以自己自由发挥了,你可以写出自己的风格,让游戏更漂亮。也可以添加更多的元素来装饰你的游戏。但是注意了,游戏 DIV 的大小如果改变了,一定要记得修改 js 代码,稍后我们会详细讲解。
 
  puzzle.css
 
  好了,样式也编写好了。最后再编写一个 js 控制代码,我们的拼图就可以用了。编写样式的时候大家还是先根据我这里的来,等完成了整个游戏,了解游戏逻辑的时候你们再自己发挥想象力去更改样式,不然可能会出现未知的错误。
 
  完成这步,打开  应该能看到下面的效果了:
 
  puzzle.js
 
  好了,所有代码都已经编写完成了。现在点击桌面上的  文件,使用 浏览器 打开,就能看到效果了。点击上面的方块就可以移动。
 
  通过此项目,我们利用 HTML5 + CSS3 + JavaScript,实现了一个简单的拼图游戏。
 
  这里说明一下,因为实验中使用的随机打乱方块的算法非常简单,但是存在 bug,有 50% 的概率生成的顺序是无法复原的,这个时候就只能点击重新开始。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61794.shtml

张贴在2