闲着放松一下,试着看能不能用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
时间: 2024-10-03 04:09:37