JS单击或拖拽实现图片游戏

最近无聊,练练原生JS:实现拼图游戏。两种玩法:第一种是单击元素进行交换位置;第二种是拖拽元素进行位置交换。首先需要上传图片并进行回显(需要用到FileReader);下面是部分截图:

javascript拼图游戏 js 拼图游戏_JS

 

javascript拼图游戏 js 拼图游戏_拖拽_02

 

 可以自行设置切割的行列,如果行列相等设置了单元格随机旋转90deg的倍数;扩展:有兴趣的小伙伴可以试试在成功的时候将旋转进行恢复;也可以在点击或者拖拽的时候判断元素间是否是响邻,否则不允许交换增加游戏难度。代码已上传至git,而且核心代码都有注释,有兴趣的小伙伴可以看看。传送门:https://github.com/WangHao1221/jigsawPuzzle