jquery制作2048小游戏源码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery制作2048小游戏源码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+html5制作2048小游戏</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
</style>
<link rel="stylesheet" type="text/css" href="css/styles.css">

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="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" onClick="init();">
		<input type="button" value="重新开始" class="btn btn-primary" onClick="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>

JS代码(new2048.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;
}
// ← 或 Aif (keyCode == 37 || keyCode == 65){
	$("#keys").text("←");
	toLeft();
	isEnd();
}
// ↑ 或 Wif (keyCode == 38 || keyCode == 87){
	$("#keys").text("↑");
	toUp();
	isEnd();
}
// → 或 Dif (keyCode == 39 || keyCode == 68){
	$("#keys").text("→");
	toRight();
	isEnd();
}
// ↓ 或 Sif (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.8return 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。");
}

CSS代码(styles.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-image: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-image: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-image:none;}

附件:下载该文件资源,减少时间成本(增值服务)