利用JS實現制作2048小游戲代碼



51 200 67



特效描述:利用JS實現 制作2048 小游戲代碼,利用JS實現制作2048小游戲代碼

代碼結構

1. HTML代碼

<div class="readme">
	<span>玩法說明:</span>
	<p>鍵盤上下左右控制移動,相同格子會累積加起來重疊為新的格子,
	   當所有格子均占有并不能移動游戲結束。回車鍵或點擊重新開始游戲將會重置。<br>梁先生</p>
   </div>
	  <table class="tab" cellpadding="6"></table>
	  <div class="restart">重新開始</div>
	  <div class="text" style="font-size:16px;">分數:<span class="score">  </span> 分</div>	
<script type="text/javascript">
// 模塊化開發思路
var json={
	// 創建初始化函數
	init:function(){
	var otab= document.querySelector('.tab'),
		str='',
		id=1;//返回文檔指定的css元素,并保存
		for(var i=0;i<4;i++){
		   str+='<tr>';
		   for(var j=0;j<4;j++){
			str +='<td id="' + id++ +'"></td>';
		   }
		   str +='</tr>';
		}
		 otab.innerHTML=str;                       
		 this.randomNum();
		 this.randomNum();
		 this.result();
	},
	//創建一個任意區間的隨機函數
	myRandom:function(min , max){
		return Math.round(Math.random() * (max-min) + min);
	},
	//隨機在格子上生成一個數字
	randomNum : function(){
	  var num = this.myRandom(1,16);
		ogrid=document.getElementById(num);
		if(ogrid.innerHTML ==''){
			ogrid.innerHTML= this.myRandom(1,2)*2;
		}else{
			this.randomNum();
		}
	},
	//上鍵
	top:function(){
		for(var i=1;i<=4;i++){
			for(var j=i;j<=i+12;j+=4){
				for(k=j;k>4;k-=4){
				   this.change(document.getElementById(k -4),
						  document.getElementById(k));
				}
			}
		}
	},
	//下鍵
	 bottom:function(){
		 for(var i=1;i<=4;i++){
			for(var j = i+12;j>=i;j -=4){
				for(var k = j;k < 13;k +=4){
					 this.change(document.getElementById(k +4),
						  document.getElementById(k));
				}
			}
		 }
	 },
	 //左鍵
	 left:function(){
		for(var i=1;i<=13;i+=4){
			for(var j=i; j<= i+3; j++){
				for(var k=j; k>i;k--){
					 this.change(document.getElementById(k -1),
						  document.getElementById(k));
				}
			}
		}
	 },
	 //右鍵
	 right:function(){
		for(var i=1;i<=13;i +=4){
			for(var j = i+4; j>=i;j--){
				for(var k=j;k<i+3;k++){
					 this.change(document.getElementById(k +1),
						  document.getElementById(k));
				}
			}
		}
	 },
	//移動合并檢測函數
	change :function(before,after){
		//移動
		if(before.innerHTML == '' && after.innerHTML != ''){
			before.innerHTML= after.innerHTML;
			after.innerHTML='';
		}
		//合并
		if(before.innerHTML != '' && before.innerHTML == 
		after.innerHTML){
			 before.innerHTML *=2;
			 after.innerHTML='';
		}
	},       
	//改變顏色計算結果函數
	result:function(){
		var color={'':'#fff','2':'#0f0','4':'#00ccff','8':'#ff9900',
		'16':'#00cc66','32':'#ffcccc','64':'#ff33ff','128':'#0066cc',
		'256':'#6633cc','512':'#ff0099','1024':'#990033','2048':'#6600ff',
		'4096':'#cc0066'},
		score=0;
		for(var i =  1 ; i <= 16 ;i++){
			var ogrid=document.getElementById(i);
			ogrid.style.backgroundColor=color[ogrid.innerHTML];
			score += ogrid.innerHTML * 10;
		}
		 document.querySelector('.score').innerHTML=score;
	}
}
window.onload=json.init();//加載完成后調用init
document.onkeydown=function(e){
  if(/38/.test(e.keyCode) ) json.top();
  if(/40/.test(e.keyCode) ) json.bottom();
  if(/37/.test(e.keyCode) ) json.left();
  if(/39/.test(e.keyCode) ) json.right();
  if(/13/.test(e.keyCode) ) json.init();
  json.randomNum();
  json.result();
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 小游戲 H5游戲 游戲源碼 手機游戲 微信游戲 網頁游戲 其他游戲 其他h5游戲 其他h5源碼游戲
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 黑红梅方压一门技术 怎样查询彩票中奖 广西快三开奖结果今 澳门新萄京官方网站 手机版 甘肃11选5app下载 天天棋牌下载官网 诈金花怎么出老千软件 福利彩票pk10开奖直播 云南快乐10分走势图 黑龙江11选五开将结果 黄大仙精准二肖中特 贵州十一选五开奖结果走势图贵兴 三亚娱乐城 3D彩票软件 湖南快乐10分微信群 甘肃快3今天推荐号码