首页 > 代码库 > 一个拼图游戏

一个拼图游戏

  闲着放松一下,试着看能不能用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

一个拼图游戏