一个简易的2048游戏

原创 2016年12月20日 21:54:00
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 2048 </title>
<style type="text/css">
#box {
	width: 440px;
	height: 440px;
	background-color: #666666;
	border: 5px solid #993300;
	border-radius: 20px;
	padding: 10px;
	margin: 20px auto;
}
#box div {
	float: left;
	width: 90px;
	height: 90px;
	color: #ffffff;
	background-color: #cc9900;
	border-radius: 10px;
	margin: 10px;
	text-align: center;
	font-weight: bold;
	font: 30px/90px "Lucida Grande", "Trebuchet MS", sans-serif;
}
#box .nuundefined { font-size: 0px; background-color: #999999; }
#box .nu2 { font-size: 70px; background-color: #9999FF; }
#box .nu4 { font-size: 70px; background-color: #6666FF; }
#box .nu8 { font-size: 70px; background-color: #0033FF; }
#box .nu16 { font-size: 60px; background-color: #00CC99; }
#box .nu32 { font-size: 60px; background-color: #339999; }
#box .nu64 { font-size: 60px; background-color: #336633; }
#box .nu128 { font-size: 50px; background-color: #FF66CC; }
#box .nu256 { font-size: 50px; background-color: #FF0000; }
#box .nu512 { font-size: 50px; background-color: #990000; }
#box .nu1024 { font-size: 40px; background-color: #FF9900; }
#box .nu2048 { font-size: 40px; background-color: #FFcc00; }
#box .nu4096 { font-size: 40px; background-color: #FFff00; }
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var arr;
function update() {
	var n, str = "";
	while (arr[n=Math.random()*16>>0]);
	arr[n] = Math.random()*2+1<<1;
	for (var i = 0; i < arr.length; i++)
		str += "<div class='nu"+arr[i]+"'>"+arr[i]+"</div>";
	document.getElementById("box").innerHTML = str;
}
function move(ts,tp,tr) {
	var moveflag = false;
	for (var k = 0; k < 4; k++) {
		var to = ts + k*tp;
		for (var j = 1; j < 4; j++) {
			var i = ts + k*tp + j*tr;
			if (!arr[i]) continue;
			if (!arr[to]) {
				arr[to] = arr[i];
			} else if (arr[i]==arr[to]) {
				arr[to] <<= 1;
				to += tr;
			} else {
				to += tr;
				if (to==i) continue;
				arr[to] = arr[i];
			}
			delete arr[i];
			moveflag = true;
		}
	}
	if (moveflag) {
		update();
		isover();
	}
}
function isover() {
	for (var i = 0; i < 16; i++) {
		var v = arr[i];
		if (!v || i%4!=0 && v==arr[i-1] || i%4!=3 && v==arr[i+1] || i>3 && v==arr[i-4] || i<12 && v==arr[i+4]) return;
	}
	setTimeout('alert("game over");start();', 200);
}
document.onkeydown = function (e) {
	switch ((e||event).keyCode) {
		case 37: move(0,4,1); break; //左
		case 39: move(3,4,-1); break; //右
		case 38: move(0,1,4); break; //上
		case 40: move(12,1,-4); break; //下
	}
}
function start() {
	arr = new Array(16);
	update();
	update();
}
start();
</script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

javascript写的2048游戏

原生JS写的2048游戏,后又对js代码进行了精简,写了左移逻辑,其他方向采用转置矩阵后左移代码复用。代码如下: 2048小游戏 0--> ...
  • Allenzc
  • Allenzc
  • 2016年12月08日 22:23
  • 508

小游戏2048的实现逻辑和实现过程

相信大家都玩过或者听说过一款小游戏叫做《2048》,这个小游戏玩法简单,也挺有意思的,我前几天闲着没事,就做了一下自的“2048”。  下面是效果图:           总体的执...
  • u014351478
  • u014351478
  • 2016年12月07日 13:41
  • 1068

js、html实现2048游戏源码

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

2048游戏代码逻辑分析

代码部分在:http://blog.csdn.net/cuicanxingchen123456/article/details/49419957 从主类开始走:   -->MainActi...
  • cuicanxingchen123456
  • cuicanxingchen123456
  • 2015年10月26日 09:06
  • 2008

2048游戏--构建界面

我这个正在写的过程中,不知道后面做不做的通,因为和极客学院视频上讲的方法不同,极客学院的视频把界面和逻辑控制写到了一起,感觉十分的难受,于是自己重新设计了下结构,试一下看看。 1、首先在layout...
  • Xtick
  • Xtick
  • 2016年10月31日 21:43
  • 631

用原生js写2048小游戏

2048-game         #game {       display: none;       position: absolute;       left: 0px; ...
  • github_30778587
  • github_30778587
  • 2017年03月20日 03:15
  • 274

2048游戏回顾二:算法总结(移动、合并、动画等)

如果只是单纯的写一个2048游戏,让这个游戏可以玩的话,工作量还是蛮小的。不过,在这写工作中,你可能花时间最多的就是数字的移动与合并的算法了,如果没有做过,可能确实要花点时间来构思,所以,写完2048...
  • u011913612
  • u011913612
  • 2016年10月29日 21:12
  • 5152

java小游戏2048实现

上课的时候见一女童鞋在玩一个叫2048的游戏,其实我是觉得玩游戏挺无聊的, 上去对她说:“这有什么好玩的咯!,太幼稚了,我都能写一个”  谁知道她来一句:“好啊,你写一个我就玩你的不玩这个了!” 既然...
  • jackjyy
  • jackjyy
  • 2015年02月26日 13:24
  • 3016

2048游戏分析、讨论与扩展 - Part I - 游戏分析与讨论

2048这个游戏从刚出开始就风靡整个世界。本技术博客的目的是想对2048涉及到相关的所有问题进行细致的分析与讨论,得到一些大家能够接受并且理解的结果。在这基础上,扩展2048的游戏性,使其变得更好玩,...
  • u013590498
  • u013590498
  • 2014年05月06日 04:53
  • 3072

2048游戏作者:2048的成功和我

前几周对我来说是一个漫长而疯狂的时间。三月份,我因为好玩,制作了一款叫2048的游戏,然后以开源的形式发布在Github上了。在接下来的几周时间里,它意外成为了世界范围内的热门话题,而且超过了两千三百...
  • u012388497
  • u012388497
  • 2014年05月14日 09:43
  • 546
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个简易的2048游戏
举报原因:
原因补充:

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