小白练手——2048数字游戏

最新推荐文章于 2024-03-27 20:03:09 发布

bug斗罗

最新推荐文章于 2024-03-27 20:03:09 发布

阅读量950

点赞数

文章标签： javascript 小白练手

本文链接：https://blog.csdn.net/Manyu_Java/article/details/62889179

版权

小白历史文章专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.本项目基于github项目
2.做了些许优化，练手用，代码共200多行
4.外观如下

##html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048小游戏</title>
<link rel="stylesheet" href="2048.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
	<div id="div2048">
		<p id="score">score:0&nbsp;&nbsp;highest:0</p>
		<a id="start" ><br><br><br><br><br>**，点击鼠标开始游戏<br>请使用方向键或WSAD操作</a>
	</div>
	<script type="text/javascript" src="2048.js"></script>
</body>
</html>

##CSS

@CHARSET "UTF-8";
#div2048
{
	width: 500px;
	height: 600px;
	background-color: #b8af9e;
	margin: 0 auto;//中间不能加逗号
	position: relative;
	
}
#score
{
	margin: 0 auto;
	width: 500px;
	height: 40px;
	line-height: 40px;
	padding: 30px 0;
	font-size: 40px;
	text-align: center;
	color:pink;
	background: #ccc0b2;
	display:none;
}
#start
{
	width: 500px;
	height: 600px;
	line-height: 50px;
	display: block;
	text-align: center;
	font-size: 25px;
	background:url("合照.ico");
    color: #FFFFFF;
}
#div2048 div.cell
{
	margin: 20px 0px 0px 20px;
	width: 100px;
	height: 40px;
	line-height: 40px;
	padding: 30px 0;
	font-size: 40px;
	text-align: center;
	float: left;
}
#div2048 div.cell0{
	background: #ccc0b2;
}
#div2048 div.cell2
{
    color: #7c736a;
    background: #eee4da;
}
#div2048 div.cell4
{
    color: #7c736a;
    background: #ece0c8;
}
#div2048 div.cell8
{
    color: #fff7eb;
    background: #f2b179;
}
#div2048 div.cell16
{
    color:#fff7eb;
    background:#f59563;
}
#div2048 div.cell32
{
    color:#fff7eb;
    background:#f57c5f;
}
#div2048 div.cell64
{
    color:#fff7eb;
    background:#f65d3b;
}
#div2048 div.cell128
{
    color:#fff7eb;
    background:#edce71;
}
#div2048 div.cell256
{
    color:#fff7eb;
    background:#edcc61;
}
#div2048 div.cell512
{
    color:#fff7eb;
    background:#ecc850;
}
#div2048 div.celle1024
{
    color:#fff7eb;
    background:#edc53f;
}
#div2048 div.cell2048
{
    color:#fff7eb;
    background:#eec22e;
}

##JavaScript

(function(){
	function game2048(container) {
		this.container=container;
		this.cells=new Array(16);
	}
	game2048.prototype={		
			init:function(){
				for ( var i=0;i<this.cells.length;i++) {
					var cell = this.newCell(0);
					this.container.appendChild(cell);
					this.cells[i]=cell;
				}
				this.randomCell();
				this.randomCell();
			},
				
			newCell:function(num){
				var cell=document.createElement('div');
				this.setCellNum(cell,num);
				return cell;
			},
			
			setCellNum:function(cell,num){
				cell.className='cell cell'+num;
				cell.num=num;
				cell.innerHTML=num>0?num:'';
			},
			
			randomCell:function(){
				var rm=[];
				for ( var i=0;i<16;i++) {
					if (this.cells[i].num==0) {
						rm.push(this.cells[i]);
					}
				}
				var rmCell =  rm[Math.floor(Math.random()*rm.length)];
				this.setCellNum(rmCell,Math.random()>0.8?4:2);
			},
			
			//java在遍历集合时不方便改值，js可以
			move:function(dir){
				var index;
				switch (dir) {
				case 38:case 87://up
					for (var i = 4; i < 16; i++) {
						index=i;
						while (index>=4) {
							this.merge(this.cells[index-4],this.cells[index]);
							index=index-4;
						}
					}
					break;
				case 40:case 83://down
					for (var i = 11; i >=0; i--) {
						index=i;
						while (index<12) {
							this.merge(this.cells[index+4],this.cells[index]);
							index=index+4;
						}
					}
					break;
				case 37:case 65://left
					for (var i = 1; i < 16; i++) {
						index=i;
						while (index%4!=0) {
							this.merge(this.cells[index-1],this.cells[index]);
							index=index-1;
						}
					}
					break;
				case 39:case 68://right
					for (var i = 14; i >= 0; i--) {
						index=i;
						while (index%4!=3) {
							this.merge(this.cells[index+1],this.cells[index]);
							index=index+1;
						}
					}
					break;
				}
				this.randomCell();
			},
			
			merge:function(cell1,cell2){
				var cell1Num = cell1.num;
				var cell2Num = cell2.num;
				if(cell2Num!=0){
					if (cell1Num==0) {
						this.setCellNum(cell1, cell2Num);
						this.setCellNum(cell2, 0);
					} else if(cell1Num==cell2Num) {
						this.setCellNum(cell1, cell1Num*2)
						this.setCellNum(cell2, 0);
					}
				}
			},
				        
	        over:function(){
	        	for (var i = 0; i < this.cells.length; i++) {
	        		if (this.cells[i].num==0) {
	        			return false;
	        		}
	        		if (i%4!=3 && this.cells[i].num==this.cells[i+1].num) {
	        			return false;
	        		}
	        		if (i<12 && this.cells[i].num==this.cells[i+4].num) {
	        			return false;
	        		}
	        	}
	        	return true;
	        },
	        
			clean:function(){
				for (var i = 0; i < this.cells.length; i++) {
					this.container.removeChild(this.cells[i]);
				}
			},
			score:function(){
				var scoreNum=0;
				for(var x=0;x<16;x++){
					scoreNum=scoreNum+this.cells[x].num;
				}
				return scoreNum;
			},
			
		}
	
	var game,startBtn,scoreHeader,score,highestScore;
	window.οnlοad=function(){
		var container = document.getElementById('div2048');
		startBtn=document.getElementById('start');
		scoreHeader=document.getElementById('score');
		highestScore=0;
		startBtn.οnclick=function(){
			this.style.display='none';
			scoreHeader.style.display='block';
			game=new game2048(container);
			game.init();
		}
	}
		
	window.οnkeydοwn=function(e){
		var keynum;
		if(window.event){
			keynum=e.keyCode;
		}
		else if (e.which) {
			keynum=e.which;
		}
		if ([37,38,39,40,87,65,83,68].indexOf(keynum)>-1) {
			if (game.over()) {
				game.clean();
				startBtn.style.display='block';
				scoreHeader.style.display='none';
				if(score==highestScore){
					startBtn.innerHTML="<br><br><br><br><br>**大人创造了得分纪录："+score+"分<br>厉害的宝宝该去学习了";
				}else {
					startBtn.innerHTML="<br><br><br><br><br>**大人最终得分"+score+"分<br>没有打破纪录的笨宝宝该去学习了呢";
				}
				
				scoreHeader.innerHTML="score:0&nbsp;&nbsp;highest:"+highestScore;
				return;
			}
			game.move(keynum);
			score=game.score();
			highestScore=score>highestScore?score:highestScore;
			scoreHeader.innerHTML="score:"+score+"&nbsp;&nbsp;highest:"+highestScore;
		}
	}
})();