网页版<2048>游戏,对2048游戏感兴趣。于是花了一天的功夫,自己写出一个类似于<2048>的游戏。

↑(W)/↓(S)/←(A)/→(D)控制方向

上源代码:
html页面代码:game.html在根目录

<!DOCTYPE html>
<html>
<head>
<title>模拟的2048小游戏</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!-- 引用css文件 -->
<link rel="stylesheet" type="text/css" href="http://blog.163.com/qiuyg_yc_it/blog/css/styles.css">
<!-- 引用jQuery文件 -->
<script type="text/javascript" src="http://blog.163.com/qiuyg_yc_it/blog/js/jquery-2.0.3.js"></script>
<!-- 引用js文件 -->
<script type="text/javascript" src="http://blog.163.com/qiuyg_yc_it/blog/js/new2048.js"></script>
</head>
<body>
<div class="div-round" id="tips">↑(W)/↓(S)/←(A)/→(D)控制方向</div>
<div id="game-panel">
	<div class="div-round" id="box-main">
		<div class="div-round box-lm" id="box0"></div>
		<div class="div-round box-lm" id="box1"></div>
		<div class="div-round box-lm" id="box2"></div>
		<div class="div-round box-lm" id="box3"></div>
		<div class="div-round box-lm" id="box4"></div>
		<div class="div-round box-lm" id="box5"></div>
		<div class="div-round box-lm" id="box6"></div>
		<div class="div-round box-lm" id="box7"></div>
		<div class="div-round box-lm" id="box8"></div>
		<div class="div-round box-lm" id="box9"></div>
		<div class="div-round box-lm" id="boxa"></div>
		<div class="div-round box-lm" id="boxb"></div>
		<div class="div-round box-lm" id="boxc"></div>
		<div class="div-round box-lm" id="boxd"></div>
		<div class="div-round box-lm" id="boxe"></div>
		<div class="div-round box-lm" id="boxf"></div>
	</div>
</div>
	<!--  提示点击的方向 -->
	<div id="keys">&nbsp;</div>
	<!-- 点击按钮重新开始  -->
	<div style="width:200px;margin: 50px auto;">
		<input type="button" value="开始" class="btn btn-primary" οnclick="init();">
		<input type="button" value="重新开始" class="btn btn-primary" οnclick="if(window.confirm('您确定重新开始吗?')){init();}">
	</div>
	<div id="score">
		总分数:00
	</div>
	<div id="max">
		当前最大数:
	</div>
	<div id="time">
		当前用时: 0s。
	</div>
	<!-- 提示快结束 -->
	<div id="danger">
	</div>
</body>
</html>

css代码,
styles.css(在css目录下)

.div-round {
	display: inline-block;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	font-family: "黑体";
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
	background-p_w_picpath: none;
	border: 1px solid transparent;
	border-radius: 4px;
	margin-bottom: 0;
}
#box-main {
	width: 420px;
	height: 420px;
	padding: 5px;
	border: 2px solid red;
}
#box0,#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9,#boxa,#boxb,#boxc,#boxd,#boxe,#boxf{
	height: 68px;
	width: 93px;
	border: 1px solid red;
	float: left;
	margin: 5px;
	padding-top: 25px;
	font-size: 30px;
	text-align: center;
	background: pink;
	font-size: 30px;
}
#game-panel,#score,#max {
	width: 630px;
	position: relative;
	left: 550px;
	top: 20px;
}
#keys,#tips,#time,#danger {
	width: 200px;
	margin: 20px auto;
}
#tips{
	width:420px;
	float:left;
	padding:10px;
	border:1px solid red;
	background: pink;
}
#keys {
	font-size: 84px;
	color: #bbbbbb;
}
#danger {
	color: #440044;
}
.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-p_w_picpath: none;
	border: 1px solid transparent;
	border-radius: 6px;
}
.btn:hover,.btn:focus {
	color: #333333;
	text-decoration: none;
}
.btn-primary {
	color: #ffffff;
	background-color: #428bca;
	border-color: #357ebd;
	z-index: 99;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary
	{
	color: #ffffff;
	background-color: #3276b1;
	border-color: #285e8e;
}
.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary
	{
	background-p_w_picpath: none;
}

js代码:
new2048.js(在js目录下)

var locations;
var keys = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c",
		"d", "e", "f" ];
// 不同的数字对于不同的颜色,
// colors是颜色的数组
var colors = [ "#FFF", "PINK", "GRAY", "#ABCDEF", "#0FF0FF", "#FF0", "#CDF0AB",
		"#FEDCBA", "#F0F", "#BBBBBB", "#00F", "#00FF00" ];

var score;// 总分数
var max;// 最大数
var time;// 计时
var t;
// 
// $(function() {
// init();
// });

// 初始化
function init() {
	t = setInterval(showtime, 1000);
	score = 0;
	max = 0;
	time = 0;
	locations = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
	locations[createLocation()] = createFixedNum();
	locations[createLocation()] = createFixedNum();
	paint();

	// 按键控制方向
	window.onkeydown = function(e) {
		var keyCode;
		if (!e)
			e = window.event;
		if (document.all) {
			keyCode = e.keyCode;
		} else {
			keyCode = e.which;
		}
		// ← 或 A
		if (keyCode == 37 || keyCode == 65) {
			$("#keys").text("←");
			toLeft();
			isEnd();
		}
		// ↑ 或 W
		if (keyCode == 38 || keyCode == 87) {
			$("#keys").text("↑");
			toUp();
			isEnd();
		}
		// → 或 D
		if (keyCode == 39 || keyCode == 68) {
			$("#keys").text("→");
			toRight();
			isEnd();
		}
		// ↓ 或 S
		if (keyCode == 40 || keyCode == 83) {
			$("#keys").text("↓");
			toDown();
			isEnd();
		}
	};
}

function isEnd() {
	var f = false;
	// 判断是否结束
	if (locations.indexOf(0) == -1) {// 如果数组中不包含0
	// 判断相邻的数是否为相等
	// alert("注意了哦~");
		$("#danger").text("注意了哦~");
		// if(isEndX()){
		if (isEndX() && isEndY()) {
			clearTimeout(t);
			if (window.confirm("结束了!\n当前分数: " + score + ";\n用时: " + time
					+ "S;\n最大数是: " + max + "。\n是否开始新的游戏?")) {
				init();
			} else {
				window.close();
			}
		}
	} else {
		$("#danger").text("");
	}
	return f;
}

function isEndX() {
	// 判断横向的数组
	// 如果相邻位置的数不相同,就结束
	var f = false;
	var w = new Array();
	for (var j = 0; j < 4; j++) {
		for (var i = 0; i < 4; i++) {
			w[i] = locations[4 * j + i];
		}
		// alert(w);
		f = (w[0] != w[1] && w[1] != w[2] && w[2] != w[3]);// 如果为真,表示相邻的两个数不相等
		if (!f) {
			break;
		}
	}

	return f;
}

function isEndY() {
	// 判断纵向的数组
	// 如果相邻位置的数不相同,就结束
	var f = false;
	var w = new Array();
	for (var j = 0; j < 4; j++) {
		for (var i = 0; i < 4; i++) {
			w[i] = locations[4 * i + j];
		}
		// alert(w);
		f = (w[0] != w[1] && w[1] != w[2] && w[2] != w[3]);// 如果为真,表示相邻的两个数不相等
		if (!f) {
			break;
		}
	}

	return f;
}

function toDown() {
	// 向下
	for (var i = 0; i < 4; i++) {
		// 判断每一行
		var row = [ locations[i + 12], locations[i + 8], locations[i + 4],
				locations[i] ];
		configurationD(i, row);
	}
	locations[createLocation()] = createFixedNum();
	paint();
}

function toRight() {
	// 向右
	for (var i = 0; i < 4; i++) {
		// 判断每一行
		var row = [ locations[i * 4 + 3], locations[i * 4 + 2],
				locations[i * 4 + 1], locations[i * 4] ];
		// alert(i+"\t"+row);
		configurationR(i, row);
	}
	locations[createLocation()] = createFixedNum();
	paint();
}

function toLeft() {
	// 向左
	for (var i = 0; i < 4; i++) {
		// 判断每一行
		var row = [ locations[i * 4], locations[i * 4 + 1],
				locations[i * 4 + 2], locations[i * 4 + 3] ];
		configurationL(i, row);
	}
	locations[createLocation()] = createFixedNum();
	paint();
}

function toUp() {
	// 向上
	for (var i = 0; i < 4; i++) {
		var row = [ locations[i + 0], locations[i + 4], locations[i + 8],
				locations[i + 12] ];
		configurationU(i, row);
	}
	locations[createLocation()] = createFixedNum();
	paint();
}

function configurationD(i, r) {
	makeArray(r);

	for (var j = 0; j < 4; j++) {
		locations[4 * (3 - j) + i] = r[j];
	}
}

function configurationR(i, r) {
	// 向右
	makeArray(r);

	for (var j = 0; j < 4; j++) {
		locations[3 + 4 * i - j] = r[j];
	}
}

function configurationU(i, r) {
	makeArray(r);

	for (var j = 0; j < 4; j++) {
		locations[4 * j + i] = r[j];
	}
}

function configurationL(i, r) {
	makeArray(r);

	for (var j = 0; j < 4; j++) {
		locations[4 * i + j] = r[j];
	}
}

function makeArray(r) {
	if (!isZero(r)) {
		// 把数组中是0往后移动
		for (var m = 0; m < 4; m++) {
			for (var n = 0; n < 3; n++) {
				if (r[n] == 0) {
					r[n] = r[n + 1];
					r[n + 1] = 0;
				}
			}
		}
	}

	for (var m = 0; m < 3; m++) {
		if (r[m] == r[m + 1]) {
			var k = m;
			r[k] += r[k + 1];
			score += r[k];
			while (++k < 3) {
				r[k] = r[k + 1];
			}
			r[3] = 0;
		}
	}

	return r;
}

// 绘制点的位置
function paint() {
	for (var i = 0; i < 16; i++) {
		$("#box" + keys[i]).text((locations[i] == 0) ? "" : locations[i]);
		var index = (locations[i] == 0) ? 0
				: (locations[i].toString(2).length - 1);
		$("#box" + keys[i]).css("background", colors[index]);
		// 选出最大数
		if (locations[i] > max) {
			max = locations[i];
		}
	}
	$("#score").text("总分为 : " + score);
	$("#max").text("当前最大数 : " + max);
}

// 随机生成两个数
function createFixedNum() {
	// 生成2/4;
	// 生成2的概率是0.8
	return Math.random() < 0.8 ? 2 : 4;
}
// 生成位置
function createLocation() {
	// 在空位置中随机生成
	var num = Math.floor(Math.random() * 16);
	// 如果该位置有值,就返回重新生成
	while (locations[num] != 0) {
		num = Math.floor(Math.random() * 16);
	}
	return num;
}

function isZero(m) {
	return m[0] == 0 && m[1] == 0 && m[2] == 0 && m[3] == 0;
}

// 计时
function showtime() {
	$("#time").text("当前用时 :" + (++time) + " s。");
}


以上代码,均属个人爱好,如有侵权,多多包含,还请速速告知!邮箱:888821084@139.com(也可交流)