2048小游戏

最新推荐文章于 2024-04-03 11:30:25 发布

kydfqbwj

最新推荐文章于 2024-04-03 11:30:25 发布

阅读量425

点赞数

文章标签： 2048

本文链接：https://blog.csdn.net/kydfqbwj/article/details/80940570

版权

今天尝试做一下h5的2048小程序。

index.html

<!DOCTYPE html
 >
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="2048.css"/>
	</head>
	<body>
		<p class="score01">SCORE:<span id="score01">0</span></p>
		<div class="cellall">
			<!--第一行-->
			<div class="cell n2" id="c00">2</div>
			<div class="cell n4" id="c01">4</div>
			<div class="cell n16" id="c02">16</div>
			<div class="cell" id="c03"></div>
			<!--第二行-->
			<div class="cell" id="c10"></div>
			<div class="cell" id="c11"></div>
			<div class="cell" id="c12"></div>
			<div class="cell" id="c13"></div>
			<!--第三行-->
			<div class="cell" id="c20"></div>
			<div class="cell" id="c21"></div>
			<div class="cell" id="c22"></div>
			<div class="cell" id="c23"></div>
			<!--第四行-->
			<div class="cell" id="c30"></div>
			<div class="cell" id="c31"></div>
			<div class="cell" id="c32"></div>
			<div class="cell" id="c33"></div>
		</div>
		<div id="gameover" class="gameover">
			<p>
				GAME OVER! <br />
				SCORE: <span id="score02">0</span> <br />
				<a href="">TRY AGAIN!</a> 
			</p>
		</div>
		
		<script src="2048.js"></script>
	</body>
</html>

2048.css

*{
	margin: 0;
	padding: 0;
	font-family: Arial;
}
.score01{
	width: 480px;
	margin: 0 auto;
	font-size: 40px;
	font-weight: bold;
	padding-top: 30px;
}
.score01 span{
	color: #f00;
}
.cellall{
	width: 480px;
	height: 480px;
	margin: 0 auto;
	border-radius: 10px;
	background-color: #bbada0;
}
.cell{
	width: 100px;
	height: 100px;
	border-radius: 10px;
	background-color: #ccc0b3;
	float: left;
	margin: 16px 0 0 16px;
	text-align: center;
	line-height: 100px;
	color: #fff;
	font-size: 60px;
}
.n2{background-color:#eee3da;color:#776e65}
.n4{background-color:#ede0c8;color:#776e65}
.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;font-size:40px}
.n2048{background-color:#09c;font-size:40px}
.n4096{background-color:#a6c;font-size:40px}
.n8192{background-color:#93c;font-size:40px}

.gameover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(100,100,100,0.5);
	display: none;
}
.gameover p{
	width: 300px;
	height: 200px;
	background-color: #FFFFFF;
	border: 1px solid #000;
	line-height: 67px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -100px;
	border-radius: 10px;
}
.gameover a{
	color: #fff;
	background-color: #9f8d77;
	border-radius: 10px;
	text-decoration: none;
	padding: 10px;
}

2048.js

//面向对象编程的方式
var game = {
	data : [],   //添加一个属性，存放游戏所有的数据
	score : 0,   //添加一个游戏得分的属性
	status : 1,   //添加一个状态，主要判断游戏处于运行还是结束
	gamerunning : 1,// 游戏运行的状态
	gameover : 0,   //游戏结束的状态
	start : function(){ //游戏开始的方法
		game.status = game.gamerunning   //将游戏的状态改变为游戏运行的状态
		game.score = 0;     //游戏开始分数要重置为0
		game.data = [    //游戏的数据要全部重置为0
			[0,0,0,0],
			[0,0,0,0],
			[0,0,0,0],    
			[0,0,0,0]
		];
		game.randomNum();
		game.randomNum();
		game.dataView()
	},
	randomNum : function(){   //产生随机数的方法
		for(;;){
			var r = Math.floor(Math.random() * 4);    //随机生成的一个行
			var c = Math.floor(Math.random()*4)      //随机生成的一个列
			if(game.data[r][c] == 0){
				var num = Math.random() > 0.5?2:4;
				game.data[r][c] = num;
				break;
			}
		}
	},
	dataView:function(){  //更新视图的方法
		for(var r = 0;r<4;r++){
			for(var c = 0;c<4;c++){
				var div = document.getElementById("c" + r + c);
				if(game.data[r][c] != 0){
					div.innerHTML = game.data[r][c];
					div.className = "cell n" + game.data[r][c]
				}else{
					div.innerHTML = "";
					div.className = "cell"
				}
			}
		}
		document.getElementById("score01").innerHTML = game.score;
		
		if(game.status == game.gameover){
			document.getElementById("score02").innerHTML = game.score;
			document.getElementById("gameover").style.display = "block";
		}else{
			document.getElementById("gameover").style.display = "none";
		}	
	},
	isgameover:function(){   //判断游戏是否结束的方法
		for(var r = 0;r<4;r++){
			for(var c = 0;c<4;c++){
				if(game.data[r][c] == 0){
					return false;
				}
				if(c < 3){
					if(game.data[r][c] == game.data[r][c+1]){
						return false;
					}
				}
				if(r < 3){
					if(game.data[r][c] == game.data[r+1][c]){
						return false
					}
				}
			}
		}
		return true;    //表示游戏已经结束
	},
	moveLeft:function(){
		var before = String(game.data);   //移动之前
//		移动的逻辑
//		化解成移动每一行
		for(var r = 0;r<4;r++){
			game.moveLeftInRow(r);  //移动每一行
		}

		var after = String(game.data);   //移动之后
		if(before != after){
			game.randomNum();
			if(game.isgameover()){
				game.status = game.gameover;
			}
			game.dataView()
		}
	},
	moveLeftInRow : function(r){
		for(var c = 0;c<3;c++){
			var nextc = game.getNextinRow(r,c);   //找位置
			if(nextc != -1){
				if(game.data[r][c] == 0){
					game.data[r][c] = game.data[r][nextc];
					game.data[r][nextc] = 0;
					c-- ;   //恢复到以前的位置
				}else if(game.data[r][c] == game.data[r][nextc]){
					game.data[r][c] *= 2;
					game.score += game.data[r][c];
					game.data[r][nextc] =0;
				}
			}else{   //如果没有找到数字
				break;
			}
		}
	},
	getNextinRow:function(r,c){
		for(var i = c + 1;i<4;i++){
			if(game.data[r][i] != 0){
				return i;   //如果找到，把当前的位置返回出来
			}
		}
		return -1;  //如果没有找到，返回一个状态码
	}
}
game.start();


document.onkeydown = function(event){
	var event = event || window.event;
	if(event.keyCode == 37){
		game.moveLeft()
	}
	
}

就做了向左移动的效果，向右移动可以照葫芦画瓢。

kydfqbwj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2048小游戏

今天尝试做一下h5的2048小程序。index.html&lt;!DOCTYPE html &gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/
复制链接

扫一扫