利用JavaScript实现的2048游戏

1. 项目演示地址:http://cighao.github.io/2048-game/


2. 源码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>2048 Game</title>
		<style>
			table{
				border-spacing:2;
				text-align:center;
				width:300px;
				height:300px;
			}
			td{
				width:25%;
				height:25%;
				text-align:center;
			}
			
		</style>
		<script>
			var table = new Array(new Array(),new Array(),new Array(),new Array(),new Array());  // 5*5 array(except 0th)
			var is_moved = false ;  // is there any data be moved
			function get_score(){     // get the score
				var max = 0;
				var i,j;
				for(i=1;i<=4;i++)
					for(j=1;j<=4;j++){
						if(table[i][j]>max)
							max = table[i][j];
					}
				return max;
			}
			function left(){    // left and combination
				var i,j,k;
				var cur = new Array();
				for(i=1;i<=4;i++){
					k=1;
					for(j=1;j<=4;j++){
						if(table[i][j]!=0){
							cur[k++] = table[i][j]; 
						}
					}
					while(k<=4)	cur[k++] = 0;
					for(j=1;j<=3;j++){   //combination
						if(cur[j]==cur[j+1]){
							cur[j] = cur[j]+cur[j+1];
							k=j+1;
							while(k<=3){
								cur[k] = cur[k+1];
								k++;
							}
							cur[4]=0;
						}
					}
					if(table[i][1]!=cur[1]||table[i][2]!=cur[2]||table[i][3]!=cur[3]||table[i][4]!=cur[4])
						is_moved = true;     // some datas are moved
					for(j=1;j<=4;j++)	table[i][j] = cur[j];
				}
			}
			function right(){    //right and combination
				var i,j,k;
				var cur = new Array();
				for(i=1;i<=4;i++){
					k=4;
					for(j=4;j>=1;j--){
						if(table[i][j]!=0)
							cur[k--] = table[i][j];
					}
					while(k>=1)	cur[k--] = 0;
					for(j=4;j>=2;j--){     //combination
						if(cur[j]==cur[j-1]){
							cur[j] = cur[j]+cur[j-1];
							k=j-1;
							while(k>=2){
								cur[k] = cur[k-1];
								k--;
							}
							cur[1] = 0;
						}
					}
					if(table[i][1]!=cur[1]||table[i][2]!=cur[2]||table[i][3]!=cur[3]||table[i][4]!=cur[4])
						is_moved = true;     // some datas are moved
					for(j=1;j<=4;j++)	table[i][j] = cur[j];
				}
			}
			function up(){    //up and combination
				var i,j,k;
				var cur = new Array();
				for(j=1;j<=4;j++){
					k=1;
					for(i=1;i<=4;i++){
						if(table[i][j]!=0)
							cur[k++] = table[i][j];
					}
					while(k<=4)	cur[k++] = 0;
					
					for(i=1;i<=3;i++){   //combination
						if(cur[i]==cur[i+1]){
							cur[i] = cur[i]+cur[i+1];
							k=i+1;
							while(k<=3){
								cur[k] = cur[k+1];
								k++;
							}
							cur[4]=0;
						}
					}
					if(table[1][j]!=cur[1]||table[2][j]!=cur[2]||table[3][j]!=cur[3]||table[4][j]!=cur[4])
						is_moved = true;     // some datas are moved
					for(i=1;i<=4;i++)	table[i][j] = cur[i];
				}
			}
			
			function down(){    //down and combination
				var i,j,k;
				var cur = new Array();
				for(j=1;j<=4;j++){
					k=4;
					for(i=4;i>=1;i--){
						if(table[i][j]!=0)
							cur[k--] = table[i][j];
					}
					while(k>=1)	cur[k--] = 0;
					
					for(i=4;i>=2;i--){     //combination
						if(cur[i]==cur[i-1]){
							cur[i] = cur[i]+cur[i-1];
							k=i-1;
							while(k>=2){
								cur[k] = cur[k-1];
								k--;
							}
							cur[1] = 0;
						}
					}
					if(table[1][j]!=cur[1]||table[2][j]!=cur[2]||table[3][j]!=cur[3]||table[4][j]!=cur[4])
						is_moved = true;     // some datas are moved
					for(i=1;i<=4;i++)	table[i][j] = cur[i];
				}
			}
			
			function is_over(){   //judge the game is over or not
				var i,j;
				for(i=1;i<=4;i++)     //is there any  empty position
					for(j=1;j<=4;j++)
						if(table[i][j]==0)  
							return false;   
				for(i=1;i<=4;i++)    // is there any datas can be combinated
					for(j=1;j<=3;j++)
						if(table[i][j]==table[i][j+1])
							return false;  
				for(j=1;j<=4;j++)
					for(i=1;i<=3;i++)
						if(table[i][j]==table[i+1][j])
							return false;
				return true;
			}
			function is_win(){   //judge the game is win or not
				if(get_score()==2048)
					return true;
				return false;				
			}
			
			function init(){   //init
				var i,j;
				for(i=1;i<=4;i++)
					for(j=1;j<=4;j++)
						table[i][j]=0;
			}
			function display_table(){   // 
				var i,j,cur;
				for(i=1;i<=4;i++)
					for(j=1;j<=4;j++){
						cur = String(i)+String(j);
						if(table[i][j]==0)
							document.getElementById(cur).innerHTML = " ";
						else{
							document.getElementById(cur).innerHTML = table[i][j];
						}
						
					}
			}
			function display_score(){    // display score
				var score = get_score();
				document.getElementById("score").innerHTML = "score:"+score;
			}
			function display(){     //display
				display_table();
				display_score();
			}
			
			function produce_new_number(){  // produce a new number randomly
				var num=0; // the number of empty position
				var i,j;
				var value;  // the value of the new number
				for(i=1;i<=4;i++)
					for(j=1;j<=4;j++)
						if(table[i][j]==0)
							num++;
				var p = Math.round(Math.random()*num)+1; // the position of new number
				if(Math.random()<=0.5)   // the new number is 2 or 4
					value = 2;
				else 
					value = 4;
				num=0;
				for(i=1;i<=4;i++)   // update table with new number 
					for(j=1;j<=4;j++){
						if(table[i][j]==0){
							num++;
							if(num==p){
								table[i][j] = value;
								break;
							}
								
						}
					}
			}
			function over(){    // when the game is over
				alert("the game is over");
				location.reload(); //refresh
			}
			function run(){   //deal with the event when you press button
				var key = window.event.keyCode;
				//var key = window.event.keyCode||e.which;
				switch(key){
					case 37: left();	break;  // left is pressed;
					case 38: up();	    break;  // up is pressed;
					case 39: right();	break;  // right is pressed;
					case 40: down();            // down is pressed;
				}	
				if(is_moved){
					produce_new_number();
					is_moved = false;
				}
				display();
				if(is_over())
					over();
			}
			
			window.onload = function (){
				
				window.onkeyup = run;
				init();
				produce_new_number();
				display();
				
			}
		</script>
		
	</head>
	<body>
		<div id="score">
			
		</div>
		<div>
			<table border="2" align="center" width="300" height="300">
				<tr>
					<td id="11">	</td>    <td id="12">	</td>    <td id="13">	</td>    <td id="14">	</td>    
				</tr>
				<tr>
					<td id="21">	</td>    <td id="22">	</td>    <td id="23">	</td>    <td id="24">	</td>    
				</tr>
				<tr>
					<td id="31">	</td>    <td id="32">	</td>    <td id="33">	</td>    <td id="34">	</td>    
				</tr>
				<tr>
					<td id="41">	</td>    <td id="42">	</td>    <td id="43">	</td>    <td id="44">	</td>    
				</tr>
			</table>
		</div>
		<div id="rule">
			<p class="rule">玩法:</p>
			<p class="rule">1.用键盘上下左右键控制数字走向</p>
			<p class="rule">2.当点击了一个方向时,格子中的数字会全部往那个方向移动,直到不能再移动,如果有相同的数字则会合并</p>
			<p class="rule">3.当格子内的最大数字达到2048时获胜</p>
			
			<p class="rule">注意:</p>
			<p class="rule">1.请使用IE,google浏览器</p>
			
		</div>
	</body>

</html>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值