HTML/CSS/JavaScript实现的2048小游戏

原创 2016年05月31日 23:29:16

前阵子2048火的时候我也玩过一阵。 这种不用太多思考的游戏其实蛮适合放空大脑的。   最近心里有点不愉快的事。所以就找点其他事情来分散一下注意力。就想着自己写一个2048。

空闲时间写了一个。大体上已完成了。也没找到特别明显的bug。稍微记录一下。

这是第四个练手的小游戏了。核心算法想明白了,写起来还算轻松。


主要实现的功能:

1.初始化的时候随机生成两个为2的格子。注意两个格子别生成到一个格子上去了。     

2.方块的移动和合并。方块移动的动画。 根据移动后的值。改变方块的颜色。注意操作的顺序。   颜色主要是添加和移除 2到2048所代表的颜色的class。 位置也添加和移除对应位置所代表的类。  动画则是用css3的过渡。0.2s。

3.判断某个方向上不能移动,不能出现新的格子。

4.随机在空白处出现下一块。 

5.判输。 需要满足条件 1.没有空格子。2.横方向上没有相邻且相等的方块。3.纵方向上没有相邻且相等的方块。  任何一项不满足都没输。 

6.判赢。 某个格子的值达到2048。

7.分数。任意两个格子合并的时候,分数增加合并之后方块的值。

8.包裹div的大小任意设置,方块中的数字始终垂直居中。

9.核心算法是判断每个格子移动到什么位置。应不应该合并。

   我这里使用的方法是,循环到每一个格子。  然后这个格子的值,依次去跟它移动方向上的下一位做比较。下一位是空,可以继续跟下一位比较,直到比较到下一位不是空且跟当前比较值相等或不相等或遇到比较的边界(之前有合并的值对应的格子或移动方向上最后一格),判断是移动并合并还是只移动,最终的移动方位。 值。


一些代码:

1.不知道高度和宽度的div中的文字垂直居中。


<div class=".number_cell_con"><span>3</span></div>

.number_cell_con{
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
}
.number_cell_con span{
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	left: 0;
	right: 0;
}


2.整体代码结构:



核心代码,以向下移动为例子。

	moveDown:function(){
		/*向下移动*/
		var i,j,k,n;
		for (i = 0; i < 4; i++) {
			n = 3;
			for (j = 3; j >= 0; j--) {
				if(this.arr[i][j].value==0){					
					continue;
				}
				k = j+1;
				aa:
				while(k<=n){
					if(this.arr[i][k].value == 0){
						if(k == n || (this.arr[i][k+1].value!=0 && this.arr[i][k+1].value!=this.arr[i][j].value)){
							this.moveCell(i,j,i,k);//移动
						}
						k++;
						
					}else{
						if(this.arr[i][k].value == this.arr[i][j].value){
							this.mergeCells(i,j,i,k);//合并
							n--;
						}
						break aa;
					}

				}
			}
		}
		this.newCell();//生成一个新格子。后面要对其做判断。
	}

游戏截图:


嗯,一做起来,其实也挺简单的。  有空再给它做个移动端的适应。


详细代码查看 :

github:https://github.com/liusaint/games/tree/master/2048

效果演示:

http://runningls.com/demos/2016/2048/

转载请注明出处:

http://blog.csdn.net/liusaint1992/article/details/51549596


明天六一儿童节。 6月份要来了。

不出意外下个月离职。

去上海,找房子,找工作,开始新生活。

据说过几天就是猴年马月了。

难道真的要等到猴年马月那笔项目奖金才拿得下来么。

6月份,希望一切顺利!

全世界都加油。



版权声明:本文为博主原创文章,转载请注明出处。

相关文章推荐

js、html实现2048游戏源码

今天给大家分享一下用html、js实现游戏2048的方式,最下面会附上下载地址,下面我们来看代码: 先看html代码: 2048 ...
  • llqqxf
  • llqqxf
  • 2016-08-22 15:51
  • 4394

用HTML5做2048游戏(一)

首先我们需要做一个2048游戏的静态页面,效果如下图所示(颜色是我在网上找的代码,如有雷同,一定是我在抄袭):                           &...

HTML5小游戏贪吃蛇分析与实现

HTML5小游戏贪吃蛇分析与实现。

Web版2048游戏制作

写在前面         工作之余参与了《慕课网2048游戏制作》的学习视频,视频断断续续看完了,游戏也制作成功了。因为其他的事情也没来的及总结,一拖时间也就过去了,整理磁盘的时候发现了2048源码...

利用JavaScript实现的2048游戏

1. 项目演示地址:http://cighao.github.io/2048-game/ 2. 源码 2048 Game table{ border-spacing...

JavaScript九宫格数独生成算法

JavaScript数独游戏。JavaScript生成数独算法。

HTML5——canvas制作游戏2048

笔者刚学HTML5不久,这是笔者第一次用HTML5制作游戏,希望大家多多提点意见。         废话不多说,先来一张效果图:         笔者只做了游...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)