js

网页版小游戏之——2048

之前比较火的小游戏2048,闲来无事,于是就做了一款网页版的小游戏。下面就跟大家分享一下开发的过程吧。

下面是成品图

其实,开发网页版的游戏最好莫过于使用canvas标签了,不过鉴于该游戏的特殊性,因此只使用了html中的无序列表,利用css对每个li进行了布局,形成了如上图所示的样子。

同时做到四个方向的操作是有一定难度的,不妨先完成一个方向的操作,只要完成一个方向的所有操作,那么另外三个方向的操作也就可以仿照了。

比如说先做向左运动的操作,我将其分为四行,先对第一行分析,将每个li的内容赋值给一个数组,然后从左到右的方向遍历数组,遇到后一个数与前一个相同执行相加操作,如果不相同则向左移动,然后对其他三行也进行此操作。

其中,我认为比较重要的部分就是这段代码:

 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;
 		}												
 	}
 }
 

这段代码可以说是这个游戏的核心,对生成的每一个数组进行操作,最终达到了整个游戏的实现。

最后的上色和分数的增加由于没有什么难度也就不说了。以下是2048小游戏的演示地址:

http://www.zhinianblog.com/guozhongbao/example/2048/index.html

声明:版权所有,盗版必究  执念博客

转载:转载请标明原文链接,谢谢合作

本站如未特别声明,所有压缩文件解压密码均为:www.zhinianblog.com

Author

zhinianblog@163.com

Comments

2017年8月4日 at 上午10:59

您好,您的网站做的很不错,很漂亮,我已经收藏了,方便我随时访问.





发表评论

建站之路

2017年8月5日