Javascript实现的2048
生活随笔
收集整理的這篇文章主要介紹了
Javascript实现的2048
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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|GameOverRUNNING:1,GAMEOVER:0,score:0, //分?jǐn)?shù)isGameOver:function(){//判斷游戲狀態(tài)為結(jié)束//如果沒有滿,則返回falseif(!this.isFull()){return false;}else{//否則//從左上角第一個(gè)元素開始，遍歷二維數(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(){//游戲開始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)元素0this.data[r][c]=0;}}*///在兩個(gè)隨機(jī)位置生成2或4this.randomNum();this.randomNum();//將數(shù)據(jù)更新到頁面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)前元素==0if(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)rowvar row=parseInt(Math.random()*this.rn);//0-3隨機(jī)生成一個(gè)列號(hào)colvar col=parseInt(Math.random()*this.cn);//如果data[row][col]==0if(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)頁中一切元素，屬性，文字都是對(duì)象*/var div=document.getElementById("c"+row+col);//"c23"var curr=this.data[row][col]; //當(dāng)前元素值//修改div開始標(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)為GAMEOVERif(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開始,遍歷row行中剩余元素，<cn結(jié)束for(var nextc=col+1;nextc<this.cn;nextc++){// 如果遍歷到的元素!=0if(this.data[row][nextc]!=0){// 就返回nextcreturn nextc;}}return -1;//(循環(huán)正常退出，就)返回-1},/*判斷并左移*指定行*中的每個(gè)元素*/moveLeftInRow:function(row){//col從0開始，遍歷row行中的每個(gè)元素，<cn-1結(jié)束for(var col=0;col<this.cn-1;col++){// 獲得當(dāng)前元素下一個(gè)不為0的元素的下標(biāo)nextcvar nextc=this.getRightNext(row,col);// 如果nextc==-1，(說明后邊沒有!=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è)置為0this.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)rowthis.moveLeftInRow(row);}//(循環(huán)結(jié)束后)var newStr=this.data.toString();if(oldStr!=newStr){//調(diào)用randomNum()，隨機(jī)生成一個(gè)數(shù)this.randomNum();//調(diào)用updateView()，更行頁面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開始，到>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開始，遍歷row行中剩余元素，>=0結(jié)束for(var nextc=col-1;nextc>=0;nextc--){// 遍歷過程中，同getRightNextif(this.data[row][nextc]!=0){return nextc;}}return -1;},/*獲得任意位置下方不為0的位置*/getDownNext:function(row,col){//nextr從row+1開始，到<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開始，到<rn-1，遍歷每行元素for(var row=0;row<this.rn-1;row++){// 先獲得當(dāng)前位置下方不為0的行nextrvar nextr=this.getDownNext(row,col);if(nextr==-1){ break; // 如果nextr==-1}else{// 否則// 如果當(dāng)前位置等于0if(this.data[row][col]==0){// 將當(dāng)前位置替換為nextr位置的元素this.data[row][col]=this.data[nextr][col];// 將nextr位置設(shè)置為0this.data[nextr][col]=0;row--;//退一行，再循環(huán)時(shí)保持原位}else if(this.data[row][col]==this.data[nextr][col]){// 否則，如果當(dāng)前位置等于nextr位置// 將當(dāng)前位置*=2this.data[row][col]*=2;// 將nextr位置設(shè)置為0this.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)頁面加載*后*自動(dòng)執(zhí)行 window.οnlοad=function(){game.start();//頁面加載后，自動(dòng)啟動(dòng)游戲//當(dāng)按鍵盤按鍵時(shí)，觸發(fā)移動(dòng):document.οnkeydοwn=function(){//獲得事件對(duì)象中鍵盤號(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: 獲得鍵盤號(hào):e.keyCodeif(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}} }
轉(zhuǎn)載于:https://www.cnblogs.com/-walker/p/4993179.html
總結(jié)
以上是生活随笔為你收集整理的Javascript实现的2048的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows路由表
- 下一篇： Java系列：《Java核心技术 卷一》