码迷,mamicode.com
首页 > Web开发 > 详细

2048网页版源代码

时间:2016-07-25 16:36:35      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:源代码

<!DOCTYPE html>

<html>

 <head>

  <title>2048</title>

  <meta charset="utf-8"/>

  <style>

#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{

   float:left;

margin:16px 0 0 16px;

   background-color:#ccc0b3;

}

.cell{

text-align:center;

line-height:100px;

color:#776e65;

font-size:60px;

position:absolute;

}

/*每行拥有相同的top*/

/*每列拥有相同的left*/

#c00,#c01,#c02,#c03{top:16px;  }

#c00,#c10,#c20,#c30{left:16px; }

#c10,#c11,#c12,#c13{top:132px; }

#c01,#c11,#c21,#c31{left:132px;}

#c20,#c21,#c22,#c23{top:248px; }

#c02,#c12,#c22,#c32{left:248px;}

#c30,#c31,#c32,#c33{top:364px; }

#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}

/*显示分数的p元素*/

    p{width:480px; margin:0 auto;

font-family:Arial; font-weight:bold;

font-size:40px; padding-top:15px;

}

/*GameOver界面样式*/

#gameOver{display:none;

width:100%; height:100%;

position:absolute; top:0px; left:0px;

}

#gameOver div{width:100%; height:100%;

background-color:#555; opacity:0.5;

}

#gameOver p{border-radius:10px;

position:absolute;top:200px;left:35%;

width:300px; height:200px;

border:1px solid #edcf72;

line-height:1.6em;

text-align:center;

background-color:#fff;

}

.button{padding:10px; border-radius:6px;

background-color:#9f8b77;

color:#fff; cursor:pointer;

}

  </style>

  <script>

function Task(obj,topStep,leftStep){

this.obj=obj;

this.topStep=topStep;

this.leftStep=leftStep;

}

//moveStep方法将当前元素对象移动一步

Task.prototype.moveStep=function(){

var style=getComputedStyle(this.obj,null);

var top=parseInt(style.top);

var left=parseInt(style.left);

this.obj.style.top=top+this.topStep+"px";

this.obj.style.left=left+this.leftStep+"px";

}

//清楚元素对象的样式,使其返回原地

Task.prototype.clear=function(){

this.obj.style.left="";

this.obj.style.top="";

}


var animation={

times:10,//每个动画10步完成

interval:10,//200毫秒迈一步

timer:null,//保存定时器id的属性

tasks:[],//保存每次需要移动的任务

addTask:function(source,target){

          //00      02

console.log(source+","+target);

var sourceDiv=

document.getElementById("c"+source);

    

var targetDiv=

document.getElementById("c"+target);

var sourceStyle=getComputedStyle(sourceDiv);

var targetStyle=getComputedStyle(targetDiv);

var topStep=(parseInt(targetStyle.top)-

   parseInt(sourceStyle.top))/this.times;

var leftStep=(parseInt(targetStyle.left)-

   parseInt(sourceStyle.left))/this.times;

var task=new Task(sourceDiv,topStep,leftStep);

this.tasks.push(task);

},

start:function(){

this.timer=setInterval(function(){

for(var i=0;i<animation.tasks.length;i++){

animation.tasks[i].moveStep();

}

animation.times--;

if(animation.times==0){

for(var i=0;i<animation.tasks.length;i++){

animation.tasks[i].clear();

}

clearInterval(animation.timer);

animation.timer=null;

animation.tasks=[];

animation.times=10;

}

},this.interval);

}

}

  </script>

  <script>

var game={

data:[],

score:0,

state:1,

RUNNING:1,

GAME_OVER:0,

PLAYING:2,//动画正在播放中

start:function(){

this.data=[[0,0,0,0],[0,0,0,0],

      [0,0,0,0],[0,0,0,0]];

this.score=0;

this.state=this.RUNNING;

var div=document.getElementById("gameOver");

//修改div的style.display

div.style.display="none";

this.randomNum(); this.randomNum();

this.updateView();

},

isFull:function(){

for(var row=0;row<4;row++){

for(var col=0;col<4;col++){

if(this.data[row][col]==0){

return false;

}

}

}

return true;

},

randomNum:function(){

if(this.isFull()){ return; }

while(true){

var row=Math.floor(Math.random()*4);

var col=Math.floor(Math.random()*4);

if(this.data[row][col]==0){

this.data[row][col]=

Math.random()<0.5?2:4;

break;

}

}

},

canLeft:function(){

//遍历每个元素(最左侧列除外)

for(var row=0;row<4;row++){

for(var col=1;col<4;col++){

//    只要发现任意元素左侧值==0或

//                 当前值==左侧值

if(this.data[row][col]!=0){

   if(this.data[row][col-1]==0||

   this.data[row][col-1]==this.data[row][col]){

return true;

   }

}

}

}//如果循环正常结束,

   return false;

},

moveLeft:function(){

if(this.canLeft()){//先判断能否左移

for(var row=0;row<4;row++){

this.moveLeftInRow(row);

}

this.state=this.PLAYING;

animation.start();

setTimeout(function(){

game.state=game.RUNNING;

game.randomNum();

game.updateView();

},animation.times*animation.interval);

}

},

moveLeftInRow:function(row){

for(var col=0;col<=2;col++){

var nextCol=this.getNextRight(row,col);

if(nextCol==-1){ break;

}else{

   if(this.data[row][col]==0){

this.data[row][col]=

this.data[row][nextCol];

this.data[row][nextCol]=0;

animation.addTask(""+row+nextCol,""+row+col);

col--;

}else if(this.data[row][col]

==this.data[row][nextCol]){

this.data[row][col]*=2;

this.score+=this.data[row][col];

this.data[row][nextCol]=0;

animation.addTask(""+row+nextCol,""+row+col);

}

}

}

},

getNextRight:function(row,col){

for(var i=col+1;i<4;i++){

if(this.data[row][i]!=0){

return i;

}

}

return -1;

},

    /*将游戏数据整体更新到页面上*/

updateView:function(){

//Step1:遍历二维数组中每个元素

for(var row=0;row<4;row++){

for(var col=0;col<4;col++){

//Step2:找到和当前元素对应的div

//     拼div的id: c+row+col

var div=document.getElementById("c"+row+col);

//Step3:将当前元素的值放入div中

//    div.innerHTML=?

//    如果当前值==0,放入""

//           否则放入当前值

div.innerHTML=this.data[row][col]==0?"":

               this.data[row][col];

//Step4: 根据当前元素值修改div样式类

//    div.className="类名";

        //    如果当前值==0,className="cell"

//    否则className="cell n"+当前值

div.className=this.data[row][col]==0?"cell":

         "cell n"+this.data[row][col];

}

}

/*将分数放入span*/

var span=document.getElementById("score");

span.innerHTML=this.score;

/*判断游戏结束*/

if(this.isGameOver()){

this.state=this.GAME_OVER;

//显示游戏结束div

//找到gameOverdiv

var div=document.getElementById("gameOver");

var finalScore=

document.getElementById("finalScore");

    finalScore.innerHTML=this.score;

//显示div

div.style.display="block";

}

},

canRight:function(){/*判断能否右移*/

for(var row=0;row<4;row++){

for(var col=0;col<3;col++){

if(this.data[row][col]!=0){

if(this.data[row][col+1]==0||

this.data[row][col]==this.data[row][col+1]){

return true;

}

}

}

}return false;

},

moveRight:function(){/*向右移动所有行*/

if(this.canRight()){

for(var row=0;row<4;row++){

this.moveRightInRow(row);

}

this.state=this.PLAYING;

animation.start();

setTimeout(function(){

game.state=game.RUNNING;

game.randomNum();

game.updateView();

},animation.times*animation.interval);

}

},

moveRightInRow:function(row){/*右移当前行*/

//从右向左遍历检查,(最左边元素除外)

for(var col=3;col>0;col--){

var nextCol=this.getNextLeft(row,col);

if(nextCol==-1){break;

}else{

if(this.data[row][col]==0){

this.data[row][col]=this.data[row][nextCol];

this.data[row][nextCol]=0;

animation.addTask(""+row+nextCol,""+row+col);

col++;

}else if(this.data[row][col]

  ==this.data[row][nextCol]){

this.data[row][col]*=2;

this.score+=this.data[row][col];

this.data[row][nextCol]=0;

animation.addTask(""+row+nextCol,""+row+col);

}

}

}

},

getNextLeft:function(row,col){

//从当前位置向左,找下一个不为0的数

for(var i=col-1;i>=0;i--){

if(this.data[row][i]!=0){

return i;

}

}return -1;

},

canUp:function(){

for(var row=1;row<4;row++){

for(var col=0;col<4;col++){

if(this.data[row][col]!=0){

if(this.data[row-1][col]==0||

this.data[row][col]==this.data[row-1][col]){

return true;

}

}

}

}return false;

},

moveUp:function(){

if(this.canUp()){

for(var col=0;col<4;col++){

this.moveUpInCol(col);

}

this.state=this.PLAYING;

animation.start();

setTimeout(function(){

game.state=game.RUNNING;

game.randomNum();

game.updateView();

},animation.times*animation.interval);

}

},

moveUpInCol:function(col){

for(var row=0;row<3;row++){

var nextRow=this.getNextDown(row,col);

if(nextRow==-1){ break;

}else{

if(this.data[row][col]==0){

this.data[row][col]=this.data[nextRow][col];

this.data[nextRow][col]=0;

animation.addTask(""+nextRow+col,""+row+col);

row--;

}else if(this.data[row][col]==

    this.data[nextRow][col]){

this.data[row][col]*=2;

this.score+=this.data[row][col];

this.data[nextRow][col]=0;

animation.addTask(""+nextRow+col,""+row+col);

}

}

}

},

getNextDown:function(row,col){

for(var i=row+1;i<4;i++){

if(this.data[i][col]!=0){

return i;

}

}return -1;

},

canDown:function(){

for(var row=0;row<3;row++){

for(var col=0;col<4;col++){

if(this.data[row][col]!=0){

if(this.data[row+1][col]==0||

this.data[row][col]==this.data[row+1][col]){

return true;

}

}

}

}return false;

},

moveDown:function(){

if(this.canDown()){

for(var col=0;col<4;col++){

this.moveDownInCol(col);

}

this.state=this.PLAYING;

animation.start();

setTimeout(function(){

game.state=game.RUNNING;

game.randomNum();

game.updateView();

},animation.times*animation.interval);

}

},

moveDownInCol:function(col){

for(var row=3;row>0;row--){

var nextRow=this.getNextUp(row,col);

if(nextRow==-1){break;

}else{

if(this.data[row][col]==0){

this.data[row][col]=this.data[nextRow][col];

this.data[nextRow][col]=0;

animation.addTask(""+nextRow+col,""+row+col);

row++;

}else if(this.data[row][col]==

    this.data[nextRow][col]){

this.data[row][col]*=2;

this.score+=this.data[row][col];

this.data[nextRow][col]=0;

animation.addTask(""+nextRow+col,""+row+col);

}

}

}

},

getNextUp:function(row,col){

for(var i=row-1;i>=0;i--){

if(this.data[i][col]!=0){

return i;

}

}return -1;

},

isGameOver:function(){/*判断游戏是否结束*/

for(var row=0;row<4;row++){

for(var col=0;col<4;col++){

if(this.data[row][col]==0){

return false;

}

if(col<3){/*检查右侧相邻*/

if(this.data[row][col]==this.data[row][col+1]){

    return false;

}

}

if(row<3){/*检查下方相邻*/

if(this.data[row][col]==this.data[row+1][col]){

return false;

}

}

}

}return true;

}

}

window.onload=function(){

game.start();

document.onkeydown=function(){

if(game.state!=game.PLAYING){

var event=window.event||arguments[0];

if(game.state==game.RUNNING){

if(event.keyCode==37){

game.moveLeft();

}else if(event.keyCode==39){

game.moveRight();

}else if(event.keyCode==38){

game.moveUp();

}else if(event.keyCode==40){

game.moveDown();

}

}else if(event.keyCode==13){

game.start();

}

}

}

}

  </script>

 </head>


 <body>

<p>Score:<span id="score"></span></p>

<div id="gridPanel">

<!--背景单元格-->

<div id="g00" class="grid"></div>

<div id="g01" class="grid"></div>

<div id="g02" class="grid"></div>

<div id="g03" class="grid"></div>


<div id="g10" class="grid"></div>

<div id="g11" class="grid"></div>

<div id="g12" class="grid"></div>

<div id="g13" class="grid"></div>


<div id="g20" class="grid"></div>

<div id="g21" class="grid"></div>

<div id="g22" class="grid"></div>

<div id="g23" class="grid"></div>


<div id="g30" class="grid"></div>

<div id="g31" class="grid"></div>

<div id="g32" class="grid"></div>

<div id="g33" class="grid"></div>

<!--前景单元格-->

<div id="c00" class="cell"></div>

<div id="c01" class="cell"></div>

<div id="c02" class="cell"></div>

<div id="c03" class="cell"></div>


<div id="c10" class="cell"></div>

<div id="c11" class="cell"></div>

<div id="c12" class="cell"></div>

<div id="c13" class="cell"></div>


<div id="c20" class="cell"></div>

<div id="c21" class="cell"></div>

<div id="c22" class="cell"></div>

<div id="c23" class="cell"></div>


<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>

<!--Game Over界面-->

<div id="gameOver">

<div><!--灰色半透明背景--></div>

<!--前景小窗-->

<p>Game Over!<br>

Score:<span id="finalScore"></span><br>

<a class="button" id="restart" onclick="game.start()">Try again!</a>

</p>

</div>

 </body>

</html>


2048网页版源代码

标签:源代码

原文地址:http://11897542.blog.51cto.com/11887542/1829627

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!