JavaScript版拼图小游戏-阿里云开发者社区

开发者社区> 文艺小青年> 正文

JavaScript版拼图小游戏

简介:
+关注继续查看

慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例

拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较

在线预览(Chrome):http://sandbox.runjs.cn/show/pcwfu7i5

 

拼图游戏其实挺简单,主要是涉及到一些细节的处理,以下是我的自己在实现中涉及到的问题:

  1. 图片的切割与拼接
  2. 如何随机布局
  3. 如何切换图片
  4. 拖动图片溢出处理
  5. 怎么知道图片是否还原成功

 

实现思路:

为了简单,我只做了3组选择,3*3 , 6*6 , 9*9 当然你要设4*4都是可以了,维持这个思路与算法就OK了

在一个容器中,我们把布局按照3*3切割,可以把这个看做一个二维矩阵

row = 3   //3行
col = 3  //3列

二维矩阵会形成一张九宫格的图,如下:

 

初始化:3*3的矩阵图

0 1 2
3 4 5
6 7 8

给每一个碎片图排一个序,3*3 = 9个

页面上的每一次碎片图的变化,其实完全可以映射成内存中对应的originalOrder这个数组的变化

此时碎片图的真实排序就是 originalOrder= [ 0,1,2,3,4,5,6,7,8,9 ]

 

移动结束:新3*3矩阵图

8 4 2
3 1 7
6 5 0

新的映射表 randomOrder = [ 8,4,2,3,1,7,6,5,0 ]

每一次变化后,计算下原始的矩阵排序与变化后的矩阵排序是否一致

originalOrder == randomOrder  判断是否还原成功

 

具体的细节实现可以直接参考源码

附上我的git下载地址: https://github.com/JsAaron/puzzleGame

如果需要更详细的教程,可以之后关注下慕课上的新课程~~


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/4585600.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《Java 2D游戏编程入门》—— 第1章 Hello World
大多数编程图书的第1章是创建一个Hello World应用程序,它执行一个简单的函数以确认一切都能工作。最简单的计算机游戏是一个黑色背景的窗口,还有一个紧凑的while循环,它负责尽可能快地清除屏幕并且重新绘制黑色的背景。
1490 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9534 0
java游戏开发杂谈 - 游戏物体
java游戏开发杂谈 - 游戏物体现实生活中,有很多物体,每个物体的长相、行为都不同。 物体存在于不同的空间内,它只在这个空间内发生作用。 物体没用了,空间就把它剔除,不然既占地方,又需要花精力管理。
959 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13229 0
《Java 2D游戏编程入门》—— 1.1 使用FrameRate类
FrameRate类位于javagames.util包中。本书中所开发的工具代码都会放到这个工具包中,随后,我们将把这个包变成一个工具库。这个类用来测量本书中所开发的应用程序的每秒的帧数(frames per seconds,FPS)。
1806 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载