前端小游戏之拼图功夫熊猫

1)效果图

2)代码链接:

3)体会：

　　a)学会分析这个游戏的主要问题，也就是需要解决什么问题？可以得出首先是关于如何切图？如何让图片移动？如何只让与深色背景在一起的拼图块移动？

　　b)对于第一个问题，切图可以使用background-image和background-position; 第二个问题可以通过设置CSS特性，我们通过设置每个图片position:absolute的，然后来相对其父元素移动，在这里要出现移动效果我们可以使用transfrom:translate来动态改变图块的位置，同时加上transition来实现动画效果，在实现中对于每个位置是用了class来设置，并在js中通过设置className特性；第三个问题可以先找出深色背景的相邻位置(上下左右)的集合，然后判断我们的点击的图块的位置是否在这个集合中，如果是的话就可以交换位置。

升级版本:

　　a)添加了选择图片和显示原图的功能，同时使用了jq和lodash。

　　

　　b)代码链接:https://github.com/sysuKinthon/Web2.0/tree/master/Web2.0/pandaV2

 

转载于:https://www.cnblogs.com/kinthon/p/4976370.html