這幾天看js 的教程看到頭暈，覺得這種方法不適合我，效率賊低。我還是有已丟丟的java基礎，於是想做一個小東西提高自己，印證一下這幾個星期的所學。
於是想寫一個2048的小游戲。上網看了很多大神的代碼，有點思路，最后成功啦！
GitHub連接：https://github.com/514870106/hjc
具體的思路是html方面利用table 創建一個4*4的矩陣，在js中創建一個二維數組與矩陣一一對應，寫一個繪圖函數通過二維數組中的內容更改矩陣樣式和內容。
具體都做了注釋：
html：
<!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%;
}
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;
}