提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript实现2048游戏示例

JavaScript游戏 实现 示例 2048
2023-06-13 09:15:25 时间

原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。

2048.html

复制代码代码如下:

<!DOCTYPE>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>2048</title>
<linkrel="stylesheet"type="text/css"href="css/2048.css"/>
<!--<scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>-->
<scripttype="text/javascript"src="js/2048.js"></script>
</head>

<body>
 <divid="div2048">
       <aid="start">taptostart:-)</a>
   </div>
</body>
</html>

2048.css

复制代码代码如下:

@charset"utf-8";

#div2048
{
   width:500px;
   height:500px;
   background-color:#b8af9e;
   margin:0auto;
   position:relative;
}
#start
{
   width:500px;
   height:500px;
   line-height:500px;
   display:block;
   text-align:center;
   font-size:30px;
   background:#f2b179;
   color:#FFFFFF;
}
#div2048div.tile
{
   margin:20px0px0px20px;
   width:100px;
   height:40px;
   padding:30px0;
   font-size:40px;
   line-height:40px;
   text-align:center;
   float:left;
}
#div2048div.tile0{
 background:#ccc0b2;
}
#div2048div.tile2
{
   color:#7c736a;
   background:#eee4da;
}
#div2048div.tile4
{
   color:#7c736a;
   background:#ece0c8;
}
#div2048div.tile8
{
   color:#fff7eb;
   background:#f2b179;
}
#div2048div.tile16
{
   color:#fff7eb;
   background:#f59563;
}
#div2048div.tile32
{
   color:#fff7eb;
   background:#f57c5f;
}
#div2048div.tile64
{
   color:#fff7eb;
   background:#f65d3b;
}
#div2048div.tile128
{
   color:#fff7eb;
   background:#edce71;
}
#div2048div.tile256
{
   color:#fff7eb;
   background:#edcc61;
}
#div2048div.tile512
{
   color:#fff7eb;
   background:#ecc850;
}
#div2048div.tile1024
{
   color:#fff7eb;
   background:#edc53f;
}
#div2048div.tile2048
{
   color:#fff7eb;
   background:#eec22e;
}

2048.js

复制代码代码如下:
functiongame2048(container)
{
 this.container=container;
 this.tiles=newArray(16);
}

game2048.prototype={
 init:function(){
  for(vari=0,len=this.tiles.length;i<len;i++){
   vartile=this.newTile(0);
   tile.setAttribute("index",i);
   this.container.appendChild(tile);
   this.tiles[i]=tile;
  }
  this.randomTile();
  this.randomTile();
 },
 newTile:function(val){
  vartile=document.createElement("div");
  this.setTileVal(tile,val)
  returntile;
 },
 setTileVal:function(tile,val){
  tile.className="tiletile"+val;
  tile.setAttribute("val",val);
  tile.innerHTML=val>0?val:"";
 },
 randomTile:function(){
  varzeroTiles=[];
  for(vari=0,len=this.tiles.length;i<len;i++){
   if(this.tiles[i].getAttribute("val")==0){
    zeroTiles.push(this.tiles[i]);
   }
  }
  varrTile=zeroTiles[Math.floor(Math.random()*zeroTiles.length)];
  this.setTileVal(rTile,Math.random()<0.8?2:4);
 },
 move:function(direction){
  varj;
  switch(direction){
   case"W":
    for(vari=4,len=this.tiles.length;i<len;i++){
     j=i;
     while(j>=4){
      this.merge(this.tiles[j-4],this.tiles[j]);
      j-=4;
     }
    }
    break;
   case"S":
    for(vari=11;i>=0;i--){
     j=i;
     while(j<=11){
      this.merge(this.tiles[j+4],this.tiles[j]);
      j+=4;
     }
    }
    break;
   case"A":
    for(vari=1,len=this.tiles.length;i<len;i++){
     j=i;
     while(j%4!=0){
      this.merge(this.tiles[j-1],this.tiles[j]);
      j-=1;
     }
    }
    break;
   case"D":
    for(vari=14;i>=0;i--){
     j=i;
     while(j%4!=3){
      this.merge(this.tiles[j+1],this.tiles[j]);
      j+=1;
     }
    }
    break;
  }
  this.randomTile();
 },
 merge:function(prevTile,currTile){
  varprevVal=prevTile.getAttribute("val");
  varcurrVal=currTile.getAttribute("val");
  if(currVal!=0){
   if(prevVal==0){
    this.setTileVal(prevTile,currVal);
    this.setTileVal(currTile,0);
   }
   elseif(prevVal==currVal){
    this.setTileVal(prevTile,prevVal*2);
    this.setTileVal(currTile,0);
   }
  }
 },
 equal:function(tile1,tile2){
  returntile1.getAttribute("val")==tile2.getAttribute("val");
 },
 max:function(){
  for(vari=0,len=this.tiles.length;i<len;i++){
   if(this.tiles[i].getAttribute("val")==2048){
    returntrue;
   }
  }
 },
 over:function(){
  for(vari=0,len=this.tiles.length;i<len;i++){
   if(this.tiles[i].getAttribute("val")==0){
    returnfalse;
   }
   if(i%4!=3){
    if(this.equal(this.tiles[i],this.tiles[i+1])){
     returnfalse;
    }
   }
   if(i<12){
    if(this.equal(this.tiles[i],this.tiles[i+4])){
     returnfalse;
    }
   }
  }
  returntrue;
 },
 clean:function(){
  for(vari=0,len=this.tiles.length;i<len;i++){
   this.container.removeChild(this.tiles[i]);
  }
  this.tiles=newArray(16);
 }
}

vargame,startBtn;

window.onload=function(){
 varcontainer=document.getElementById("div2048");
 startBtn=document.getElementById("start");
 startBtn.onclick=function(){
  this.style.display="none";
  game=game||newgame2048(container);
  game.init();
 }
}

window.onkeydown=function(e){
 varkeynum,keychar;
 if(window.event){  //IE
  keynum=e.keyCode;
 }
 elseif(e.which){  //Netscape/Firefox/Opera
  keynum=e.which;
 }
 keychar=String.fromCharCode(keynum);
 if(["W","S","A","D"].indexOf(keychar)>-1){
  if(game.over()){
   game.clean();
   startBtn.style.display="block";
   startBtn.innerHTML="gameover,replay?";
   return;
  }
  game.move(keychar);
 }
}

相关文章