一个拼图游戏

Posted 2020-08-09

　　闲着放松一下,试着看能不能用js写一个拼图游戏，就当是练习语法。以及对代码的管理。

　　下面是我写的时候的思路：

　　　　　　我的拼图是3*3的，在写的时候用ul>li作为容器。

　　　　　　下面是各个部分的结构思路：

　　　　　　　　--1.将图片的url放在一个resource数组中

　　　　　　　　--2.用自己写的随机函数生成一个包含0-8的数字的数组，用来表示resource数组中图片的位置下标（每次load的时候数组都是变化的）

　　　　　　　　--3.在load时，数组生成之后，把数组成员作为resource数组的下标给<img>的src赋值，（这几步是为了每次load时随机出现图片的位置）

　　　　　　　　--4.然后就是操作了，这里有两种玩法，一种是用键盘的上下左右键控制，另一种就是用页面上的上下左右键

　　　　　　　　--5.交换的思路：

　　　　　　　　1）每一次把当前所有图片的随机的src作为一个数组

　　　　　　　　2）从里面找出空白的那个、再找到需要交换的目标图片、交换他们在数组里的位置

　　　　　　　　3）用交换之后的数组重新渲染图片src

　　　　　　　　--6.成功的条件，在每次交换时，判断随机数组中的src是否按顺序都等于resource中的成员，即为成功。

　　　　　　　　下面是我的代码的地址（请大家多指教：）  https://github.com/AllenLLB/js-Study/tree/master/%E6%8B%BC%E5%9B%BE

　　　　　　　　大家想不想试一下我的这个能不能玩（用电脑，我没考虑到手机也能进去）：115.159.190.99:1234/拼图/resource/index.html