最近在學習h5的相關知識，為了檢驗下學習效果，嘗試著對小遊戲2048進行了實現，本來還覺得學的已經不錯了，但是真是做的時候真是應了那句話–書到用時方恨少，絕知此事要躬行！?
為了測試下對基礎知識的掌握程度，沒有使用現成的框架，如jquery等，這個小遊戲只用了基礎的html、css和js。
實現該遊戲的思路是，首先將靜態頁面畫出來，我只做了最基礎的4 x 4版本的。然後對單元格的左移、右移、上移和下移新增響應事件。如下圖所示：
score:0
try again!
game over!
score:0
try again!
body
header
.title
#game2048
.grid-cell
.n4.n8
.n16
.n32
.n64
.n128
.n256
.n512
.n1024
.n2048
.n4096
.n8192
.n2,.n4
.n1024,.n2048,.n4096,.n8192
.number-cell
var game =
}}.bind(this);
}, init()
} this.randomnum();
this.randomnum();
this.updateview();//將data中的資料更新到頁面中的每個div中
}, randomnum()
} },
updateview()else
}} //找到id為score的span,設定其內容為score屬性
document.getelementbyid("score").innerhtml = this.score;
//當遊戲結束時,顯示gameover的div
var div= document.getelementbyid("gameover");
if(this.state == this.gameover)else
}, moveleft()
}//每行中值都非0,需要判斷是否有可以相加的
for(var col = this.cn - 1; col >=0; col--)
} //隨機選擇乙個單元格,然後隨機生成2或者4
this.randomnum();
this.updateview();
}, moverightinonerow(row,col),
addtwocellincolfromright(row,col)
}// this.data[row][col_index - 1] = 0;
// this.movecelltoright(row, col_index - 1);
}} },
movecelltoright(row,col)}},
moveup()
}//當一列中雖然沒有為0的數,但是若是有相同的數,還是需要相加
for (var row = this.rn - 1; row >=0; row--)
}//隨機選擇乙個單元格,然後隨機生成2或者4
this.randomnum();
this.updateview();
}, movedowninonecol(row,col),
addtwocellincolfrombelow(row,col)
}// this.data[row_index - 1][col] = 0;
// this.movecelltobelow(row_index - 1, col);
}} },
movecelltobelow(row,col)
}}, isgameover()
else if (row < this.rn - 1 && (this.data[row + 1][col] == this.data[row][col]))
}//遍歷結束
return true;
} },
}function tryagain() ,
game.start();
用html css js實現選項卡切換效果
使用之前學過的綜合知識，實現乙個新聞門戶 上的常見選項卡效果 文字素材 房產 275萬購昌平鄰鐵三居 總價20萬買一居 200萬內購五環三居 140萬安家東三環 北京首現零首付樓盤 53萬購東5環50平 京樓盤直降5000 中信府 公園樓王現房 家居 40平出租屋大改造 美少女的混搭小窩 經典清新簡...
用bottle框架返回html css js頁面
如下 coding utf8 import bottle from bottle import run,route,static file route html url路徑，在本機執行後 瀏覽器可以通過 訪問該html頁面，表示你具體要訪問的檔案的名字，例如index.html def html p...
html css js 實現日曆控制項
talk is cheap show me the code html css doctype html en utf 8 title title html,body calendar title calendar title calendar year pre next body list ul ...