搜索到
1
篇与
游戏
的结果
-
![网页版小游戏之——2048]()
网页版小游戏之——2048 之前比较火的小游戏2048，闲来无事，于是就做了一款网页版的小游戏。下面就跟大家分享一下开发的过程吧。 下面是成品图 其实，开发网页版的游戏最好莫过于使用canvas标签了，不过鉴于该游戏的特殊性，因此只使用了html中的无序列表，利用css对每个li进行了布局，形成了如上图所示的样子。 同时做到四个方向的操作是有一定难度的，不妨先完成一个方向的操作，只要完成一个方向的所有操作，那么另外三个方向的操作也就可以仿照了。 比如说先做向左运动的操作，我将其分为四行，先对第一行分析，将每个li的内容赋值给一个数组，然后从左到右的方向遍历数组，遇到后一个数与前一个相同执行相加操作，如果不相同则向左移动，然后对其他三行也进行此操作。 其中，我认为比较重要的部分就是这段代码： [code lang="js"] var nextI; for (var i=m;i<n;i=i+w){ //先找nextI nextI = -1; for (var j=i+w;j<n;j=j+w){ if(arr[j] != 0) { nextI = j; break; } } if (nextI != -1) { //存在下个不为0的位置 if (arr[i] == 0){ arr[i] = arr[nextI]; arr[nextI] = 0; i = i - w; flag = true; }else if(arr[i] == arr[nextI]){ arr[i] = arr[i] *2; arr[nextI] = 0; count += 5; flag = true; } } } [/code] 这段代码可以说是这个游戏的核心，对生成的每一个数组进行操作，最终达到了整个游戏的实现。 最后的上色和分数的增加由于没有什么难度也就不说了。以下是2048小游戏的演示地址：http://zhinianboke.com/guozhongbao/example/2048/index.html
