使用Javascript寫(xiě)的2048小游戲
更新時(shí)間：2015年11月25日 09:49:30 作者：super_walker
這篇文章主要介紹了使用Javascript寫(xiě)的2048小游戲的相關(guān)資料,需要的朋友可以參考下
最近心血來(lái)潮，項(xiàng)目結(jié)束了，使用javascript寫(xiě)個(gè)小游戲，練練收吧，寫(xiě)的不好還請(qǐng)各位大俠給出批評(píng)建議。
HTML代碼如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <script src="2048.js"></script> <script> </script> </head> <body> <p>Score:<span id="score"></span></p> <div id="gridPanel"> <!--背景格--> <!--第1行--> <div id="g00" class="grid"></div> <div id="g01" class="grid"></div> <div id="g02" class="grid"></div> <div id="g03" class="grid"></div> <!--第2行--> <div id="g10" class="grid"></div> <div id="g11" class="grid"></div> <div id="g12" class="grid"></div> <div id="g13" class="grid"></div> <!--第3行--> <div id="g20" class="grid"></div> <div id="g21" class="grid"></div> <div id="g22" class="grid"></div> <div id="g23" class="grid"></div> <!--第4行--> <div id="g30" class="grid"></div> <div id="g31" class="grid"></div> <div id="g32" class="grid"></div> <div id="g33" class="grid"></div> <!--前景格--> <!--第1行--> <div id="c00" class="cell"></div> <div id="c01" class="cell"></div> <div id="c02" class="cell"></div> <div id="c03" class="cell"></div> <!--第2行--> <div id="c10" class="cell"></div> <div id="c11" class="cell"></div> <div id="c12" class="cell"></div> <div id="c13" class="cell"></div> <!--第3行--> <div id="c20" class="cell"></div> <div id="c21" class="cell"></div> <div id="c22" class="cell"></div> <div id="c23" class="cell"></div> <!--第4行--> <div id="c30" class="cell"></div> <div id="c31" class="cell"></div> <div id="c32" class="cell"></div> <div id="c33" class="cell"></div> </div> <div id="gameOver"><!--同時(shí)包含前景和背景的容器--> <div><!--半透明灰色背景--></div> <p><!--居中小窗口--> Game Over!<br> Score:<span id="finalScore"></span><br> <a class="button" onclick="game.start()">Try again!</a> </p> </div> </body> </html>
CSS代碼如下
@charset "utf-8";
#gridPanel{width:480px;height:480px;
margin:0 auto;
background-color:#bbada0;
border-radius:10px;
position:relative;
}
.grid,.cell{width:100px; height:100px;
border-radius:6px;
}
.grid{background-color:#ccc0b3;
margin:16px 0 0 16px;
float:left;
}
.cell{
/*margin:16px 0 0 16px;
float:left;
position:relative;
z-index:10;
top:-464px;
left:0;*/
position:absolute;
text-align:center;
line-height:100px;
font-size:60px;
}
#c00,#c01,#c02,#c03{top:16px;}
#c10,#c11,#c12,#c13{top:132px;}
#c20,#c21,#c22,#c23{top:248px;}
#c30,#c31,#c32,#c33{top:364px;}
#c00,#c10,#c20,#c30{left:16px;}
#c01,#c11,#c21,#c31{left:132px;}
#c02,#c12,#c22,#c32{left:248px;}
#c03,#c13,#c23,#c33{left:364px;}
.n2{background-color:#eee3da}
.n4{background-color:#ede0c8}
.n8{background-color:#f2b179}
.n16{background-color:#f59563}
.n32{background-color:#f67c5f}
.n64{background-color:#f65e3b}
.n128{background-color:#edcf72}
.n256{background-color:#edcc61}
.n512{background-color:#9c0}
.n1024{background-color:#33b5e5}
.n2048{background-color:#09c}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n8,.n16,.n32,.n64,
.n128,.n256,.n512,
.n1024,.n2048,.n4096,.n8192{color:#fff}
.n1024,.n2048,.n4096,.n8192{font-size:40px}
/*分?jǐn)?shù)顯示*/
p{width:480px; margin:0 auto;
font-family:Arial;font-weight:bold;
font-size:40px; padding-top:15px;
}
/*Game Over*/
#gameOver{width:100%; height:100%;
position:absolute; top:0; left:0;
display:none;
}
#gameOver>div{width:100%; height:100%;
background-color:#555; opacity:.5;
}
#gameOver>p{width:300px; height:200px;
border:1px solid #edcf72;
line-height:1.6em; text-align:center;
background-color:#fff; border-radius:10px;
position:absolute; top:50%; left:50%;
margin-top:-135px; margin-left:-150px;
}
.button{padding:10px; border-radius:6px;
background-color:#9f8b77; color:#fff;
cursor:pointer;
}
javascript代碼如下
var game={
data:[],//保存所有數(shù)字的二維數(shù)組
rn:4, //總行數(shù)
cn:4, //總列數(shù)
state: 0, //游戲當(dāng)前狀態(tài)：Running|GameOver
RUNNING:1,
GAMEOVER:0,
score:0, //分?jǐn)?shù)
isGameOver:function(){//判斷游戲狀態(tài)為結(jié)束
//如果沒(méi)有滿,則返回false
if(!this.isFull()){
return false;
}else{//否則
//從左上角第一個(gè)元素開(kāi)始，遍歷二維數(shù)組
for(var row=0;row<this.rn;row++){
for(var col=0;col<this.cn;col++){
//如果當(dāng)前元素不是最右側(cè)元素
if(col<this.cn-1){
// 如果當(dāng)前元素==右側(cè)元素
if(this.data[row][col]==
this.data[row][col+1]){
return false;
}
}
//如果當(dāng)前元素不是最下方元素
if(row<this.rn-1){
// 如果當(dāng)前元素==下方元素
if(this.data[row][col]==
this.data[row+1][col]){
return false;
}
}
}
}return true;
}
},
start:function(){//游戲開(kāi)始
this.state=this.RUNNING;
//找到游戲結(jié)束界面，隱藏
var div=document.getElementById("gameOver");
div.style.display="none";
this.data=[//初始化二維數(shù)組
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
this.score=0; //重置分?jǐn)?shù)為0
/*for(var r=0;r<this.rn;r++){
this.data[r]=[];//向空數(shù)組中添加每一行數(shù)組
for(var c=0;c<this.cn;c++){
//向當(dāng)前空行數(shù)組中加默認(rèn)元素0
this.data[r][c]=0;
}
}*/
//在兩個(gè)隨機(jī)位置生成2或4
this.randomNum();
this.randomNum();
//將數(shù)據(jù)更新到頁(yè)面
this.updateView();
},
isFull:function(){//判斷當(dāng)前數(shù)組是否已滿
for(var row=0;row<this.rn;row++){//遍歷二維數(shù)組
for(var col=0;col<this.cn;col++){
// 只要發(fā)現(xiàn)當(dāng)前元素==0
if(this.data[row][col]==0){
return false;
}
}
}
//(如果循環(huán)正常退出)
return true;
},
randomNum:function(){//在隨機(jī)空位置生成一個(gè)數(shù)
if(!this.isFull()){//如果*不*滿，才{
while(true){//循環(huán)true
//0-3隨機(jī)生成一個(gè)行號(hào)row
var row=parseInt(Math.random()*this.rn);
//0-3隨機(jī)生成一個(gè)列號(hào)col
var col=parseInt(Math.random()*this.cn);
//如果data[row][col]==0
if(this.data[row][col]==0){
// Math.random():<0.5 >=0.5
// 2 4
// 隨機(jī)生成一個(gè)數(shù)<0.5?2:4，
// 放入data[row][col]
this.data[row][col]=
Math.random()<0.5?2:4;
break;//退出循環(huán)
}
}
}
},
updateView:function(){
//將二維數(shù)組中每個(gè)格的數(shù)字放入前景格中
//遍歷二維數(shù)組中每個(gè)元素,比如:row=2,col=3, 16
for(var row=0;row<this.rn;row++){
for(var col=0;col<this.cn;col++){
/*網(wǎng)頁(yè)中一切元素，屬性，文字都是對(duì)象*/
var div=document.getElementById("c"+row+col);
//"c23"
var curr=this.data[row][col]; //當(dāng)前元素值
//修改div開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容
div.innerHTML=curr!=0?curr:"";
//修改div的class屬性
div.className=curr!=0?"cell n"+curr:"cell"
// class
}
}
var span=document.getElementById("score");
span.innerHTML=this.score;
//判斷并修改游戲狀態(tài)為GAMEOVER
if(this.isGameOver()){
this.state=this.GAMEOVER;
var div=document.getElementById("gameOver");
var span=document.getElementById("finalScore");
span.innerHTML=this.score;
//修改div的style屬性下的display子屬性為"block"
div.style.display="block";
}
},//updateView方法的結(jié)束
/*實(shí)現(xiàn)左移*/
/*找當(dāng)前位置右側(cè)，*下一個(gè)*不為0的數(shù)*/
getRightNext:function(row,col){
//循環(huán)變量:nextc——>指下一個(gè)元素的列下標(biāo)
//從col+1開(kāi)始,遍歷row行中剩余元素，<cn結(jié)束
for(var nextc=col+1;nextc<this.cn;nextc++){
// 如果遍歷到的元素!=0
if(this.data[row][nextc]!=0){
// 就返回nextc
return nextc;
}
}return -1;//(循環(huán)正常退出，就)返回-1
},
/*判斷并左移*指定行*中的每個(gè)元素*/
moveLeftInRow:function(row){
//col從0開(kāi)始，遍歷row行中的每個(gè)元素，<cn-1結(jié)束
for(var col=0;col<this.cn-1;col++){
// 獲得當(dāng)前元素下一個(gè)不為0的元素的下標(biāo)nextc
var nextc=this.getRightNext(row,col);
// 如果nextc==-1，(說(shuō)明后邊沒(méi)有!=0的元素了)
if(nextc==-1){
break;
}else{// 否則
// 如果當(dāng)前位置==0,
if(this.data[row][col]==0){
// 將下一個(gè)位置的值，當(dāng)入當(dāng)前位置
this.data[row][col]=
this.data[row][nextc];
// 下一個(gè)位置設(shè)置為0
this.data[row][nextc]=0;
col--;//讓col退一格，重復(fù)檢查一次
}else if(this.data[row][col]==
this.data[row][nextc]){
// 否則，如果當(dāng)前位置==nextc的位置
// 將當(dāng)前位置*=2;
this.data[row][col]*=2;
// 下一個(gè)位置設(shè)置為0;
this.data[row][nextc]=0;
// 將當(dāng)前位置的值，累加到score上
this.score+=this.data[row][col];
}
}
}
},
/*移動(dòng)所有行*/
moveLeft:function(){
var oldStr=this.data.toString();
//循環(huán)遍歷每一行
for(var row=0;row<this.rn;row++){
// 調(diào)用moveLeftInRow方法，傳入當(dāng)前行號(hào)row
this.moveLeftInRow(row);
}//(循環(huán)結(jié)束后)
var newStr=this.data.toString();
if(oldStr!=newStr){
//調(diào)用randomNum()，隨機(jī)生成一個(gè)數(shù)
this.randomNum();
//調(diào)用updateView()，更行頁(yè)面
this.updateView();
}
},
moveRight:function(){
var oldStr=this.data.toString();
for(var row=0;row<this.rn;row++){
this.moveRightInRow(row);
}
var newStr=this.data.toString();
if(oldStr!=newStr){
this.randomNum();
this.updateView();
}
},
/*判斷并右移*指定行*中的每個(gè)元素*/
moveRightInRow:function(row){
//col從cn-1開(kāi)始，到>0結(jié)束
for(var col=this.cn-1;col>0;col--){
var nextc=this.getLeftNext(row,col);
if(nextc==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=
this.data[row][nextc];
this.data[row][nextc]=0;
col++;
}else if(this.data[row][col]==
this.data[row][nextc]){
this.data[row][col]*=2;
this.data[row][nextc]=0;
this.score+=this.data[row][col];
}
}
}
},
/*找當(dāng)前位置左側(cè)，下一個(gè)不為0的數(shù)*/
getLeftNext:function(row,col){
//nextc從col-1開(kāi)始，遍歷row行中剩余元素，>=0結(jié)束
for(var nextc=col-1;nextc>=0;nextc--){
// 遍歷過(guò)程中，同getRightNext
if(this.data[row][nextc]!=0){
return nextc;
}
}return -1;
},
/*獲得任意位置下方不為0的位置*/
getDownNext:function(row,col){
//nextr從row+1開(kāi)始，到<this.rn結(jié)束
for(var nextr=row+1;nextr<this.rn;nextr++){
if(this.data[nextr][col]!=0){
return nextr;
}
}return -1;
},
/*判斷并上移*指定列*中的每個(gè)元素*/
moveUpInCol:function(col){
//row從0開(kāi)始，到<rn-1，遍歷每行元素
for(var row=0;row<this.rn-1;row++){
// 先獲得當(dāng)前位置下方不為0的行nextr
var nextr=this.getDownNext(row,col);
if(nextr==-1){ break; // 如果nextr==-1
}else{// 否則
// 如果當(dāng)前位置等于0
if(this.data[row][col]==0){
// 將當(dāng)前位置替換為nextr位置的元素
this.data[row][col]=
this.data[nextr][col];
// 將nextr位置設(shè)置為0
this.data[nextr][col]=0;
row--;//退一行，再循環(huán)時(shí)保持原位
}else if(this.data[row][col]==
this.data[nextr][col]){
// 否則，如果當(dāng)前位置等于nextr位置
// 將當(dāng)前位置*=2
this.data[row][col]*=2;
// 將nextr位置設(shè)置為0
this.data[nextr][col]=0;
// 將當(dāng)前位置的值累加到score屬性上
this.score+=this.data[row][col];
}
}
}
},
/*上移所有列*/
moveUp:function(){
var oldStr=this.data.toString();
//遍歷所有列
for(var col=0;col<this.cn;this.moveUpInCol(col++));
var newStr=this.data.toString();
if(oldStr!=newStr){
this.randomNum();
this.updateView();
}
},
/*下移所有列*/
moveDown:function(){
var oldStr=this.data.toString();
for(var col=0;col<this.cn;this.moveDownInCol(col++));
var newStr=this.data.toString();
if(oldStr!=newStr){
this.randomNum();
this.updateView();
}
},
moveDownInCol:function(col){
//row從this.rn-1，到>0結(jié)束，row--
for(var row=this.rn-1;row>0;row--){
var nextr=this.getUpNext(row,col);
if(nextr==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=
this.data[nextr][col];
this.data[nextr][col]=0;
row++;
}else if(this.data[row][col]==
this.data[nextr][col]){
this.data[row][col]*=2;
this.data[nextr][col]=0;
this.score+=this.data[row][col];
}
}
}
},
/*獲得任意位置上方不為0的位置*/
getUpNext:function(row,col){
for(var nextr=row-1;nextr>=0;nextr--){
if(this.data[nextr][col]!=0){
return nextr;
}
}return -1;
}
}
//onload事件：當(dāng)頁(yè)面加載*后*自動(dòng)執(zhí)行
window.onload=function(){
game.start();//頁(yè)面加載后，自動(dòng)啟動(dòng)游戲
//當(dāng)按鍵盤(pán)按鍵時(shí)，觸發(fā)移動(dòng):
document.onkeydown=function(){
//獲得事件對(duì)象中鍵盤(pán)號(hào)：2步
//事件對(duì)象：在事件發(fā)生時(shí)自動(dòng)創(chuàng)建
// 封裝了事件的信息
if(game.state==game.RUNNING){
//Step1: 獲得事件對(duì)象
var e=window.event||arguments[0];
//IE DOM標(biāo)準(zhǔn)
//Step2: 獲得鍵盤(pán)號(hào):e.keyCode
if(e.keyCode==37){
game.moveLeft();
}else if(e.keyCode==39){
game.moveRight();
}else if(e.keyCode==38){
game.moveUp();
}else if(e.keyCode==40){
game.moveDown();
}
//如果按左鍵，調(diào)用moveLeft
//否則如果按右鍵，調(diào)用moveRight
}
}
}
以上代碼就是使用javascript寫(xiě)的2048小游戲，代碼簡(jiǎn)單易懂并附有注釋，希望大家喜歡。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序瘦身的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
本文主要介紹了TypeScript數(shù)據(jù)類型，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
微信小程序報(bào)錯(cuò): thirdScriptError的錯(cuò)誤問(wèn)題
這篇文章主要介紹了微信小程序報(bào)錯(cuò): thirdScriptError,本文給大家分享解決方法，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
javascript &&和||運(yùn)算法的另類使用技巧
一直以為 && 和 || 這兩個(gè)偉大的運(yùn)算法只能在判斷表達(dá)式使用，也就是常在if語(yǔ)句使用，原來(lái)錯(cuò)了，它還可以運(yùn)用在簡(jiǎn)化選擇性執(zhí)行語(yǔ)句的操作，有點(diǎn)拗口，簡(jiǎn)單點(diǎn)也就是：操作執(zhí)行某條語(yǔ)句，不執(zhí)行某條語(yǔ)句。2009-11-11
在JavaScript中使用for循環(huán)的方法詳解
在本文中，我們將學(xué)習(xí) JavaScript 中提供，的 for 循環(huán)，我們將了解如何在 JavaScript 中使用 for...in 循環(huán)語(yǔ)句、其語(yǔ)法、工作原理示例、何時(shí)使用或避免使用它以及我們可以使用哪些其他類型的循環(huán),需要的朋友可以參考下2023-07-07
JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文大家能夠掌握三種定義函數(shù)的方法，需要的朋友可以參考下2017-09-09
使用JS來(lái)動(dòng)態(tài)操作css的幾種方法
這篇文章主要介紹了使用JS來(lái)動(dòng)態(tài)操作css的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼
javascript 拖拽 頁(yè)面拖拽 拖拽效果的頁(yè)面 超級(jí)拖拽 javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼 鼠標(biāo)拖拽2007-12-12
Js實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色突出顯示其他a標(biāo)簽回復(fù)原色
當(dāng)一個(gè)頁(yè)面有多個(gè)a標(biāo)簽，實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色，其他a標(biāo)簽回復(fù)原色，具體實(shí)現(xiàn)如下，喜歡的朋友可以參考下2013-11-11
這篇文章主要介紹了微信小程序?qū)⒆址啥S碼圖片的操作方法,需要的朋友可以參考下2018-07-07