热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js实现九宫格拼图小游戏

本文主要分享了js实现九宫格拼图小游戏的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧

效果如下:

代码如下:



 
 
 


 
1
2
3
4
5
6
7
8

总用时

开始 重来

设计思路:

我们要做的就是设置一个大 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,那么它就可以往这个方向移动了。

提示:因为实验中使用的随机打乱方块的算法非常简单,但是存在 bug,有 50% 的概率生成的顺序是无法复原的,这个时候就只能点击重新开始。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


推荐阅读
author-avatar
吴佩珠淑杰
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有