java学习--javaScript编写2048

最新推荐文章于 2022-05-15 17:16:51 发布

六指赌徒

最新推荐文章于 2022-05-15 17:16:51 发布

阅读量412

点赞数

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/sinat_38831242/article/details/78217949

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

2048这款游戏在git上面开放源码意外走红，代码极其简单，类似于flapbird，本人试着用js代码用了三个小时完成了雏形

首先先布局

------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/2048.css">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</head>
<body>
<header>
<h1>2048</h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>score: <span id="score">0</span></p>
</header>

<div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>

----------------------------------

接着写链接的css

------------------------------------

header {
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}

header h1 {
font-family: Arial;
font-size: 40px;
font-weight: bold;
}
header #newgamebutton {
display: block;
margin: 20px auto;
width: 100px;
padding: 10px 10px;
background-color: #8f7a66;
font-family: Arial;
color: white;
border-radius: 10px;
text-decoration: none;
}
header #newgamebutton:hover {
background-color: #9f8b77;
}
header p {
font-family: Arial;
font-size: 25px;
margin: 20px auto;
}
#grid-container {
width: 460px;
height: 460px;
padding: 20px;
margin: 50px auto;
background-color: #bbada0;
border-radius: 10px;
position: relative;
}
.grid-cell {
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ccc0b3;
float: left;
margin: 7px;

color: red;
font-size: 50px;
line-height: 100px;
text-align: center;
font-weight: 900;
}

---------------------------------------

这两段都不重要

主要是js代码

先说main布局用的js

-------------------------------

主要使用二维数组作为model，界面的16个div作为view，而getandshow2作为controller，即使这么小的程序也有mvc的概念呢

想想其实anglarJs也是厉害，将mvc的概念放在一个个简单的标签里面

getrandomNumber方法是创建随机位置的

--------------------------------

最后就是game.js的代码了

------------------------------------

$(document).keydown(function(event){
	switch(event.keyCode){
		case 65://left
			if(toleftCheck()){
				Toleft();
            	break;
			}else{
				alert("向左移不动啦");
				break;
			}
            
        case 87://up
        	if(totopCheck()){
				Totop();
            	break;
			}else{
				alert("向上移不动啦");
				break;
			}
        case 68://right
        	if(torightCheck()){
				Toright();
            	break;
			}else{
				alert("向右移不动啦");
				break;
			}
            break;
        case 83://dowm
            if(todownCheck()){
				Todown();
            	break;
			}else{
				alert("向下移不动啦");
				break;
			}
		
	}
})
function toleftCheck(){
	for (var i=0;i<4;i++) {
		for (var j=1;j<4;j++) {
			if(board[i][j]!=0){
				if(board[i][j-1]==0||board[i][j]==board[i][j-1]){
				return true;
			}
			}
		} 
	}
}
function totopCheck(){
	for (var i=0;i<4;i++) {
		for (var j=1;j<4;j++) {
			if(board[j][i]!=0){
				if(board[j-1][i]==0||board[j][i]==board[j-1][i]){
				return true;
			}
			}
		} 
	}
}
function torightCheck(){
	for (var i=0;i<4;i++) {
		for (var j=0;j<3;j++) {
			if(board[i][j]!=0){
				if(board[i][j+1]==0||board[i][j]==board[i][j+1]){
				return true;
			}
			}
		} 
	}
}
function todownCheck(){
	for (var i=0;i<4;i++) {
		for (var j=0;j<3;j++) {
			if(board[j][i]!=0){
				if(board[j+1][i]==0||board[j][i]==board[j+1][i]){
				return true;
			}
			}
		} 
	}
}
function Toleft(){
	for (var i=0;i<4;i++) {
		var temp=new Array();
		var temp2=new Array();
		for (var j=0;j<4;j++) {
			if(board[i][j]!=0){
				temp.push(board[i][j]);
			}
		}
		for (var k=0;k
   
   
    
    -1;k--) {
			if(temp[k]==0){
				continue;
			}

			if(k==0){
				temp2.push(temp[k]);
				break;
			}
						
			if(temp[k]==temp[k-1]){
				temp2.push(temp[k]+temp[k-1]);
				temp[k-1]=0;
			}else{
				temp2.push(temp[k]);
			}
		}
		for (var c=0;c<4;c++) {
				board[i][c] = 0 ;
			} 
		for(var l=0;l
    
    
     
     -1;b--){
				if(board[i][b]==0){
					board[i][b]=temp2[l];
					break;
				}
				
			}
		}
	}
	getrandomNumber();
	getandshow2();
}
function Totop(){
	for (var i=0;i<4;i++) {
		var temp=new Array();
		var temp2=new Array();
		for (var j=0;j<4;j++) {
			if(board[j][i]!=0){
				temp.push(board[j][i]);
			}
		}
		for (var k=0;k
     
     
      
      -1;k--) {
			if(temp[k]==0){
				continue;
			}

			if(k==0){
				temp2.push(temp[k]);
				break;
			}
						
			if(temp[k]==temp[k-1]){
				temp2.push(temp[k]+temp[k-1]);
				temp[k-1]=0;
			}else{
				temp2.push(temp[k]);
			}
		}
		for (var c=0;c<4;c++) {
				board[c][i] = 0 ;
			} 
		for(var l=0;l
      
      
       
       -1;b--){
				if(board[b][i]==0){
					board[b][i]=temp2[l];
					break;
				}
				
			}
		}
	}
	getrandomNumber();
	getandshow2();
}