canvas教程

自己动手做个拼图游戏

字号+ 作者:H5之家 来源:H5之家 2017-10-21 12:07 我要评论( )

自己动手做个拼图游戏标签:IT技术 目标 在做这个游戏之前,我们先定一些小目标列出来,一个一个的解决,这样,一个小游戏就不知不觉的完成啦。我们的目标如下: 1. 游戏全屏,将图片拉伸成屏幕大小,并将其切成若干块。 2. 将拼图块随机打乱,并保证其能有解

自己动手做个拼图游戏 标签:  IT  技术   

目标

在做这个游戏之前,我们先定一些小目标列出来,一个一个的解决,这样,一个小游戏就不知不觉的完成啦。我们的目标如下:
1. 游戏全屏,将图片拉伸成屏幕大小,并将其切成若干块。
2. 将拼图块随机打乱,并保证其能有解。
3. 在屏幕上留出一个空白块,当点空白块旁边的块,将这块移动到空白块。
4. 判断是否已经拼好。

实现目标 1.将图片拉伸成屏幕大小,并将其切成若干块。

想拉伸成屏幕大小,首先要知道屏幕的大小,Android获得屏幕大小的代码如下:

将图片拉伸到屏幕大小

将图片切成若干块

2. 将拼图块随机打乱,并保证其能有解。

这个问题应该是这个小游戏的核心了,有些人在做拼图的时候就随便乱摆,最后发现拼不回来,超级尴尬。要想打乱了还能拼回来,我们呢,就想到了模拟人打乱拼图的方法,就是将空白块与旁边的非空白块交换位置,与旁边哪个非空白块交换是随机的,然后将这个过程重复若干次,重复的次数也是随机的,这样一来,保证了图块的随机,又保证了能拼回来。在这里我们用数字0到N-1(N为块的数量)表示每一块,并用二维数组存储他们。

下面是打乱块的算法,最后一块是空白块,让它随机与旁边的某一块进行交换,这个过程中要检查数组边界,不要让它越界。

3. 在屏幕上留出一个空白块,当点空白块旁边的块,将这块移动到空白块。

留出空白块很简单,由于上面我们将最后一块作为空白块。当我们绘图时,略过它即可。代码实现如下:

移动块也很简单,当点击屏幕时,计算其在拼图数据中对应的索引。当计算到点击非空白块就寻找它旁边有没有空白块,有,则将拼图数据中表示空白块和非空白块的数据交换,并刷新View即可

4. 判断是否已经拼好

我们初始化数据时,是从0开始,依次增加作为拼图数据。当拼好的时候,拼图数据也应该是一样的,所以我们将拼图二维数组的数据复制到一维数组中,然后比较数组中每一个数据与它的下一个数据,如果都小于,说明数组里面的数据已经从小到大排列好。

拼图游戏技巧

拼图技巧觉得也有必要教一下,不然有些人就会说:你的算法有问题,这根本拼不好!我也是超级无奈啊!拼图的技巧是,我们先把上面的第一行拼好,然后再把第二行拼好,这样,一直下去~就能完全拼好了。

总结

这个小游戏简单,可以拿来练手,还可以拿来装(liao)逼(mei),如果不会,何乐而不看呢。这个小游戏也是将视图和数据分开,代码容易移植。

项目地址

https://github.com/luoyesiqiu/PuzzleGame


与本文相关文章

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • “SQIP”是一种基于SVG的LQIP技术

    “SQIP”是一种基于SVG的LQIP技术

    2017-10-18 16:04

  • Canvas教程(6)

    Canvas教程(6)

    2017-10-18 14:34

  • H5详解之WAI-ARIA技术

    H5详解之WAI-ARIA技术

    2017-10-14 18:37

  • 手把手带你玩儿Canvas,WEB开发,技术交流区,鱼C论坛

    手把手带你玩儿Canvas,WEB开发,技术交流区,鱼C论坛

    2017-10-14 09:13

网友点评
4