拼图游戏实现原理和算法解析

分类: HTML5 发布时间: 2017-07-19 21:04

今天我在地铁上看到一个小孩在玩拼图游戏。作为程序员的我立马犯了职业病,便联想到它的实现原理。并对其中用到的算法进行了联想。本文通过现实的游戏实践对拼图游戏进行原理解析和算法解读,如有不合理的地方请联系我,进行改进。

拼图游戏

拼图游戏

上图是一个比较复杂的拼图游戏了。为了简单点,我们可以将一个大图片进行九宫格式的分割。可以等量分割,也可以进行不规则的算法分割。而分割的份数也可以随机产生,但是分割后的图片不能太小。太小就看不清,玩起来难度太大。

关于割图方面,大家可以采用 javascript 中的 canvas 的 drawImage 绘制。这里的细节,我就不再描述。

随机产生的割图,我们给它标上数字下标。初始的位置,可以用 index 下标标记。记住原始位置后,将分割的图片随机打乱。再把原图生成一个缩略图,用于提示用户,给用户进行参考。

用户游戏时,还可以配上时间,在规定的时间内完成拼图,则算成功。否则就算失败。

用户拼图的结果是和原图一致的。我们可以通过原来的位置下标进行判断,原图是否被移动到了原位。

至此拼图游戏的核心都已经介绍完了。主要的算法有切图,随机切图,随机打乱位置等。

本文就解释到这里,以后有时间了,我们就来实现一个拼图游戏吧。


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!