原生JS实现拼图游戏

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


【原生JS实现拼图游戏】原生JS实现拼图游戏
文章图片


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

    推荐阅读