一个简易的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>

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

简易2048游戏代码

  • 2016年09月22日 17:20
  • 1.6MB
  • 下载

简易2048小游戏

  • 2015年11月15日 21:56
  • 4KB
  • 下载

c++写的一个简单的2048小游戏

嗯,上周进行培训的时候老师布置了一个小作业,让写一个2048的小游戏。 于是就开始瞎捣鼓这玩意儿了,用C++写的。其实也挺简单的。 但是我比较菜,不会做图形界面,只有黑框。。。 这个游戏需要实现的主要...

简易游戏2048源码

  • 2014年10月29日 15:10
  • 1.25MB
  • 下载

一个用 C 语言写的迷你版 2048 游戏,只有 500个字符

Jay Chan 用 C 语言写的一个迷你版 2048 游戏,只有 487 个字符。来围观吧 M[16],X=16,W,k;main(){T(system("stty cbreak") );puts...

大大维的游戏机计划2--一个自制的类似2048的小游戏

承接上篇,这几日,笔者本来打算写一个2048的,但写着写着,突然有个想法,能不能搞一个将2048和消消乐结合起来的游戏,于是,笔者便写出了如下这个小游戏。 值得一提的是,整个游戏完全由笔者独自写成,...
  • umke888
  • umke888
  • 2017年02月03日 23:43
  • 148

写出自己的一个 2048小游戏

2048函数 整体思想 1.如何产生随机数?   rand 、srand函数 2.如何产生界面?       利用一些符号组合 加上 system函数 调节颜色尺寸等等 3.如何使相同数合...

安装Docker,在本机上跑一个‘2048’小游戏(脉冲云在线体验)

安装Docker,在本机上跑一个‘2048’小游戏脉冲云在线免费体验  可以免费在脉冲云官网上部署一个在线的‘2048’小游戏体验一下。...

用java实现一个简易扫雷游戏

  • 2017年05月24日 17:46
  • 18KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个简易的2048游戏
举报原因:
原因补充:

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