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

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