【源码】2048小游戏

摘要

一款有意思的算术小游戏,
虽然是简单的加法运算,
但是要将小数字累加到2048也不是一件容易的事,
要注意的是,
只有相同的数字才可以累加。

【源码】2048小游戏
先分享自己保存的学习资料
李炎恢老师的(资料过于庞大,不能一次分享,可以慢慢保存)

https://yunpan.cn/cqaXgu4Uh8bQA  访问密码 2ed9
https://yunpan.cn/cqaXf9deuiwQj  访问密码 358d
https://yunpan.cn/cqaXKvvjud6Fy  访问密码 52db
链接:http://pan.baidu.com/s/1bo3wshh 密码:brid
韩顺平老师的JavaScript视频
链接:http://pan.baidu.com/s/1bPIYdC 密码:7rp9

 

html代码
Score:<span id="score">0</span>       Top:<span id="top1"></span>
<div id="gridPanel">
<div id="g00" class="grid"></div>
&nbsp;
<div id="g01" class="grid"></div>
&nbsp;
<div id="g02" class="grid"></div>
&nbsp;
<div id="g03" class="grid"></div>
&nbsp;
<div id="g10" class="grid"></div>
&nbsp;
<div id="g11" class="grid"></div>
&nbsp;
<div id="g12" class="grid"></div>
&nbsp;
<div id="g13" class="grid"></div>
&nbsp;
<div id="g20" class="grid"></div>
&nbsp;
<div id="g21" class="grid"></div>
&nbsp;
<div id="g22" class="grid"></div>
&nbsp;
<div id="g23" class="grid"></div>
&nbsp;
<div id="g30" class="grid"></div>
&nbsp;
<div id="g31" class="grid"></div>
&nbsp;
<div id="g32" class="grid"></div>
&nbsp;
<div id="g33" class="grid"></div>
&nbsp;
<div id="c00" class="cell"></div>
&nbsp;
<div id="c01" class="cell"></div>
&nbsp;
<div id="c02" class="cell"></div>
&nbsp;
<div id="c03" class="cell"></div>
&nbsp;
<div id="c10" class="cell"></div>
&nbsp;
<div id="c11" class="cell"></div>
&nbsp;
<div id="c12" class="cell"></div>
&nbsp;
<div id="c13" class="cell"></div>
&nbsp;
<div id="c20" class="cell"></div>
&nbsp;
<div id="c21" class="cell"></div>
&nbsp;
<div id="c22" class="cell"></div>
&nbsp;
<div id="c23" class="cell"></div>
&nbsp;
<div id="c30" class="cell"></div>
&nbsp;
<div id="c31" class="cell"></div>
&nbsp;
<div id="c32" class="cell"></div>
&nbsp;
<div id="c33" class="cell"></div>
</div>
&nbsp;
<div id="gameOver">
<div></div>
Game Over!
Score:<span id="finalScore"></span>
<a class="button"> Try again! </a>

</div>
<pre>css代码
#gridPanel{
	width:480px; height:480px;
	margin:0 auto;
	background-color:#bbada0;
	border-radius:10px;
	position:relative;
}
.grid,.cell{
	width:100px; height:100px;
	border-radius:6px;
}
.grid{
	background-color:#ccc0b3;
	float:left;
	margin:16px 0 0 16px;
}
.cell{
	position:absolute;
	font-size:60px;
	text-align:center;
	line-height:100px;
	color:#fff;
}
[id^="c0"]{top:16px}
[id^="c1"]{top:132px}
[id^="c2"]{top:248px}
[id^="c3"]{top:364px}

[id$="0"]{left:16px}
[id$="1"]{left:132px}
[id$="2"]{left:248px}
[id$="3"]{left:364px}

.n2{background-color:#eee3da}
.n4{background-color:#ede0c8}
.n8{background-color:#f2b179}
.n16{background-color:#f59563}
.n32{background-color:#f67c5f}
.n64{background-color:#f65e3b}
.n128{background-color:#edcf72}
.n256{background-color:#edcc61}
.n512{background-color:#9c0}
.n1024{background-color:#33b5e5}
.n2048{background-color:#09c}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n2,.n4{color:#776e65}
.n1024,.n2048,.n4096,.n8192{font-size:40px}

/*分数部分*/
p{
	width:480Px;
	margin:0 auto;
	padding-top:15px;
	font-size:40px;
	font-family:Arial;
	font-weight:bold;
}
/*<a href="http://www.ldhblog.com/tag/%e6%b8%b8%e6%88%8f/" title="查看与 游戏 相关的文章"target="_blank">游戏</a>结束部分*/
#gameOver{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
#gameOver&gt;div{
	width:100%;
	height:100%;
	background-color:#555;
	opacity:0.5;
}
#gameOver&gt;p{
	position:absolute;
	width:300px;
	height:200px;
	background-color:#fff;
	text-align:center;
	line-height:1.6em;
	border-radius:10px;
	border:3px solid #edcf72;
	top:25%;
	left:50%;
	margin-left:-150px;
}
.button{
	background-color:#9f8d77;
	color:#fff;
	padding:10px;
	border-radius:6px;
	cursor:pointer;
}
<a href="http://www.ldhblog.com/tag/js/" title="查看与 js 相关的文章"target="_blank">js</a>代码
var game={
	data:null, //保存一个二维数组,二维数组中保存了<a href="http://www.ldhblog.com/tag/%e6%b8%b8%e6%88%8f/" title="查看与 游戏 相关的文章"target="_blank">游戏</a>格子中所有的数据
	RN:4, //总行数
	CN:4, //总列数
	score:0, //保存游戏当前得分
	top:0,
	state:1, //用于保存游戏的状态
	GAMEOVER:0, //游戏结束状态
	RUNNING:1, //游戏运行中状态

	//对象自己的方法,要使用自己的属性或其他方法,都用用this
	//每个属性和方法结尾,必须用“,”分隔
	start:function() {  //启动游戏
		this.state=this.RUNNING; //初始化游戏状态为运行中
		this.score=0;
		//初始化二维数组
		//创建空二维数组,保存在当前对象的data属性中(this.data)
		//从r开始,到&lt;RN结束,每次r增加1;
			//先向data中压入一个空数组
			//c从0开始,到&lt;CN结束,每次增1;
				//向data中r行压入一个0
		//遍历结束
		this.data=[];
		for (var r=0;r&lt;this.RN;r++)
		{
			this.data.push([]);
			//this.data[r] = [];
			for (var c=0;c&lt;this.CN;c++) { //this.data[r][c] = 0; this.data[r].push(0); } } //生成两个随机数 this.randomNum(); this.randomNum(); this.updateView(); //留住this var me=this; //响应键盘事件 document.onkeydown=function(e){ //this-&gt;document
		  //e保存了事件发生时的信息
		switch(e.keyCode){//获得按键号
			case 37: me.moveLeft(); break;
			case 38: me.moveUp(); break;
			case 39: me.moveRight(); break;
			case 40: me.moveDown(); break;
		  }
		};
	},

	randomNum:function() {  //只负责成一个随机数
		//反复执行,
			//在0~RN-1之间随机生成一个行号r
			//在0~CN-1之间堆积生成一个列号c
			//如果data中r行c列为0
				//声明变量n,生成一个随机数,如果随机数&lt;0.5,n赋值为2,否则为4
				//将n保存在data中r行c列的位置
				//退出循环
		while (true)
		{
			var r = parseInt(Math.random()*this.RN);
			var c = parseInt(Math.random()*this.CN);
			if (this.data[r][c] == 0)
			{
				this.data[r][c] = Math.random()0; c--)
		{
			var prevc = this.getPrevInRow(r,c);
			if (prevc == -1){break;}

			if (this.data[r][c] == 0)
			{
				this.data[r][c] = this.data[r][prevc];
				this.data[r][prevc] = 0;
				c++;
			} else if (this.data[r][c] == this.data[r][prevc])
			{
				this.score += (this.data[r][c] *= 2);
				this.data[r][prevc] = 0;
			}
		}
	},
	getPrevInRow:function(r,c) {
		for (var prevc=c-1;prevc&gt;=0;prevc--)
		{
			if (this.data[r][prevc] != 0) {
				return prevc;
			}
		}
		return -1;
	},
	/***********2048上移**********/
	moveUp:function() {
		before = String(this.data);
		for (var c=0;c&lt;this.CN;c++)
		{
			this.moveUpInCol(c);
		}
		after = String(this.data);

		if(before != after) {
			this.randomNum();
			this.isGameOver() &amp;&amp; (this.state = this.GAMEOVER);
			this.updateView();
		}
	},
	
	moveUpInCol:function(c) {
		for (var r=0;r&lt;this.RN-1;r++)
		{
			var nextr = this.getDownInCol(r,c);
			if (nextr == -1) { break;}

			if (this.data[r][c] == 0)
			{
				this.data[r][c] = this.data[nextr][c];
				this.data[nextr][c] = 0;
				r--;
			}else if (this.data[r][c] == this.data[nextr][c])
			{
				this.score += (this.data[r][c] *=2);
				this.data[nextr][c] = 0;
			}
		}
	},
	
	getDownInCol:function(r,c) {
		for (var nextr=r+1;nextr&lt;this.RN;nextr++)
		{
			if (this.data[nextr][c] !== 0)
			{
				return nextr;
			}
		}
		return -1;
	},
	/***********2048下移**********/
	moveDown:function() {
		var before = String(this.data);
		for (var c=0; c&lt;this.CN; c++) { this.moveDownInCol(c); } var after = String(this.data); if (before != after) { this.randomNum(); this.isGameOver() &amp;&amp; (this.state = this.GAMEOVER); this.updateView(); } }, moveDownInCol:function(c) { for (var r=this.CN-1; r&gt;0; r--)
		{
			var prer = this.getUpInCol(r,c);
			if (prer == -1) { break; }

			if (this.data[r][c] == 0)
			{
				this.data[r][c] = this.data[prer][c];
				this.data[prer][c] = 0;
				r++;
			} else if (this.data[r][c] == this.data[prer][c])
			{
				this.score += (this.data[r][c] *= 2);
				this.data[prer][c] = 0;
				//this.score += this.data[r][c];
			}
		}
	},
	getUpInCol:function(r,c) {
		for (var prer=r-1;prer&gt;=0;prer--)
		{
			if (this.data[prer][c] != 0) { return prer; }
		}
		return -1;
	},
}

//事件:当浏览器页面的状态发生改变, 自动触发
//window.onload:当页面加载完成后, 自动触发
window.onload=function() {
	game.start();
}
李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:7   其中:访客  5   博主  2

  1. avatar 米粒博客 4

    练练脑

  2. avatar 热腾网 5

    支持无私的分享

  3. avatar 伊可可 1

    当年忒火

  4. avatar 生晓's blog 4

    辉哥,百度盘链接挂了

    • avatar 李东辉

      @生晓's blog 百度云nmgwap
      搜一下
      加个好友