html+CSS+js 一個2048小遊戲

時間 2019-11-10

標籤 html+css+js html css 一個遊戲欄目 HTML 简体版

原文原文鏈接

這幾天看js 的教程看到頭暈，以爲這種方法不適合我，效率賊低。我仍是有已丟丟的java基礎，因而想作一個小東西提升本身，印證一下這幾個星期的所學。javascript

因而想寫一個2048的小遊戲。上網看了不少大神的代碼，有點思路，最後成功啦！css

GitHub鏈接：https://github.com/514870106/hjchtml

具體的思路是html方面利用table 建立一個4*4的矩陣，在js中建立一個二維數組與矩陣一一對應，寫一個繪圖函數經過二維數組中的內容更改矩陣樣式和內容。java

具體都作了註釋：git

html：github

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>2048小遊戲</title>
       <link rel="stylesheet" type="text/css" href="小遊戲樣式.css"/>
   </head>
   <body onload="read()">
       <div id="game">
           <h1 class="h1">boy ♂ next door</h1>
           <p id="p1">使用鍵盤方向鍵↑ ↓ ← →控制，出現2048即爲勝利</p>
           <p id="p2">你已經嘗試0次</p>
           <button type="button" id="button" onclick="read()">從新開始</button>
           <table border="1" id="table">
               <tr><td id="00" style=""></td><td id="01" style=""></td><td id="02" style=""></td><td id="03" style=""></td></tr>
               <tr><td id="10" style=""></td><td id="11" style=""></td><td id="12" style=""></td><td id="13" style=""></td></tr>
               <tr><td id="20" style=""></td><td id="21" style=""></td><td id="22" style=""></td><td id="23" style=""></td></tr>
               <tr><td id="30" style=""></td><td id="31" style=""></td><td id="32" style=""></td><td id="33" style=""></td></tr>
           </table>
       </div>
       <script src="算法部分.js" type="text/javascript" charset="utf-8"></script>
   </body>
</html>

算法

CSS：數組

#game{
   border: 5px solid black;
   height: 600px;
   width: 500px;
   margin:0 auto;
}
.h1{
   text-align: center;
}
#p1{
   text-align: center;
}
#p2{
   text-align: center;
}
#button{
   float: right;
   margin-right: 200px;
   width: 100px;
   height: 60px;
}
#table{
   width: 300px;
   height: 300px;
   text-align:center;
   margin:0 auto;
}
tr,td{
   width: 18%;
   height: 18%;
}dom

js：函數

var x;var c=0;function read(){ // 建立一個4*4的二維數組x所有賦值爲0 x=new Array(4); for (i=0;i<x.length;i++) { x[i]=[0,0,0,0]; } //得到隨機座標，將數組x對應座標內的數改成2 var a,b,a1,b1; a=Math.round(Math.random()*3); b=Math.round(Math.random()*3); x[a][b] = 2; //得到隨機座標，判斷座標不重複，將數組x對應座標內的數改成4 while(1){ a1 = Math.round(Math.random()*3); b1 = Math.round(Math.random()*3); if(a1 != a || b2 != b){ x[a1][b1] = 4 ; break; } } //調用數字與圖像書寫函數 font(); color(); //變動<p>中的已嘗試次數 document.getElementById("p2").innerHTML=("你已經嘗試"+ c +"次") c+=1;}//依次將數組x內數字填充到table中對應的td中，若是爲0，則填寫空；function font(){ for (i=0;i<x.length;i++) { for (j=0;j<x.length;j++) { var td = document.getElementById(i+""+j); if(x[i][j] != 0) { td.innerHTML = x[i][j]; } else { td.innerHTML = " "; } } }}// 遍歷x數組,得到對應table 的 td,再經過值來更改對應 td 的背景顏色function color(){ for (i=0;i<x.length;i++) { for (j=0;j<x.length;j++) { var td = document.getElementById(i+""+j); var num = x[i][j]; switch(num){ case 2: td.style=" break; case 4: td.style="background-color:#FFEFD1"; break; case 8: td.style=" break; case 16: td.style="background-color:#FFDEAD"; break; case 32: td.style=" break; case 64: td.style="background-color:#F08080"; break; case 128: td.style=" break; case 256: td.style="background-color:#FF69B4"; break; case 512: td.style=" break; case 1024: td.style="background-color:#FF4500"; break; default: td.style=" break; } if(num==1024){ alert("恭喜你成功通關，得到香蕉君的友誼"); return; } } }}//監聽鍵盤按鈕按下狀況，根據keyCode返回值判斷按下了哪一個鍵並執行函數,再進行從新繪圖（調用font（）、color（））window.onkeydown = function(){ var boy = event.keyCode; switch(boy){ case 37://左 onleft(); font(); color(); break; case 38://上 ontop(); font(); color(); break; case 39://右 onright(); font(); color(); break; case 40://下 onbelow(); font(); color(); break; }}//用戶按了左function onleft(){ for (i = 0;i < x.length; i++){ var x1 = new Array(0,0,0,0);//建立一個臨時數組x1 var ace=0; for(j = 0;j < x.length; j++){//將x數組當前行的有效數組賦值給x1 if(x[i][j] != 0){ x1[ace] = x[i][j]; ace+=1; } } for(j=0;j<x1.length-1;j++){ if(x1[j] == x1[j+1]){ //判斷相鄰數是否相等，若相等則左邊的數翻倍 x1[j]*=2; var k=j+1; //記錄相等數對右邊數的下標 while(k<x1.length-1){//右邊全部數向左移動 x1[k] = x1[k+1]; k+=1; } x1[3]=0; //將最後一位賦值爲0，爲了table滿了不當即結束。 } } x[i]=x1;//將x數組更新 } newnum();//隨機出現2 或者 4 在數組內}//用戶按了上function ontop(){ for (i = 0;i < x.length; i++){ var x1 = new Array(0,0,0,0); var ace=0; for(j = 0;j < x.length; j++){ if(x[j][i] != 0){ x1[ace] = x[j][i]; ace+=1; } } for(j=0;j<x1.length-1;j++){ if(x1[j] == x1[j+1]){ x1[j]*=2; var k=j+1; while(k<x1.length-1){ x1[k] = x1[k+1]; k+=1; } x1[3]=0; } } for(j=0;j<x.length;j++){ x[j][i]=x1[j]; } } newnum();}//用戶按了右function onright(){ for (i = 0;i < x.length; i++){ var x1 = new Array(0,0,0,0); var ace=3; for(j = 3;j >= 0; j--){ if(x[i][j] != 0){ x1[ace] = x[i][j]; ace-=1; } } for(j=3;j>0;j--){ if(x1[j-1] == x1[j]){ x1[j]*=2; var k=j-1; while(k>0){ x1[k] = x1[k-1]; k-=1; } x1[0]=0; } } x[i]=x1; } newnum();}// 用戶按了下function onbelow(){ for (i = 0;i < x.length; i++){ var x1 = new Array(0,0,0,0); var ace=3; for(j = 3;j >=0 ; j--){ if(x[j][i] != 0){ x1[ace] = x[j][i]; ace-=1; } } for(j=3; j>0 ;j--){ if(x1[j-1] == x1[j]){ x1[j]*=2; var k=j-1; while(k<0){ x1[k] = x1[k-1]; k-=1; } x1[0]=0; } } for(j=0;j<x.length;j++){ x[j][i]=x1[j]; } } newnum();}function newnum(){ // 遍歷數組x.若沒有等於0的元素,遊戲結束.輸了 var flag = false; for (i=0;i<x.length;i++) { for (j=0;j<x.length;j++) { if(x[i][j] == 0){ flag=true; break; } } } if(flag==false){ alert("兄弟，智商堪憂啊"); return; } var a,b,q; // 得到一個隨機的座標 while(true){ a = Math.round(Math.random()*3); b = Math.round(Math.random()*3); if(x[a][b]==0){ break; } } // 得到一個2或者4，並賦值給所獲得的隨機座標 while(true){ q =Math.round(Math.random()*6); if(q==2|| q==4){ break; } } x[a][b] = q;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。