javascript實現2048遊戲範例_基礎知識

原生javascript程式碼寫的2048遊戲。建議在谷歌瀏覽器下跑。

2048.html

複製程式碼 程式碼如下:

程式碼如下:






-->

 

        tap to start :-)
   

2048.css複製程式碼

程式碼如下:

@charset "f-8 ";

#div2048
{
    width: 500px;
    height: 500px;
    background-color: #b89e }
#start
{
    width: 500px;
    height: 500px;
    line-height: 500px;
    line-height: 500px;
    line-height: 500plock; ign: center;
    font-size: 30px;
    background: #f2b179;
    color: #FFFFFF;
}
divdivof>divco x 0px 20px ;
    width: 100px;
    height: 40px;
    padding: 30px 0;
 -p >    text-align: center;
    float: left;
}
#div2048 div.tile0{
 background: #ccc0b2;
}
#div:2048 div. 7c736a;
    background: #eee4da;
}
#div2048 div.tile4
{
    color: #7c736a;{
    color: #fff7eb;
    background: #f2b179;
}
#div2048 div.tile16
{
    color:#fff7eb;
    background:#f59563;
}
#div2048 div.tile32
{
    color:#fff7eb;
    background:#f57c5f;
}
#div2048 div.tile64
{
    color:#fff7eb;
    background:#f65d3b;
}
#div # edce71;
}
#div2048 div.tile256
{
    color:#fff7eb;
    background:#edcc61;    background:#edcc61;    background:#edcc61;    color:#fff7eb;
    background:#ecc850;
}
#div2048 div.tile1024
{}
#div2048 div.tile2048
{
    color:#fff7eb;
    background:#eec22e;
}
}

2048.js




複製程式碼


程式碼如下:

function game2048(container)
{
 this.container = container;
 this.tiles = new Array(16);
}

game2048.prototype = {
 init: function(){
  for(var i = 0, len = this.tiles.length; i   (0);
   tile.setAttribute('index', i);
   this.container.appendChild(tile);
   this.tiles[i] =tile;  this.randomTile();
 },
 newTile: function(val){
  vartile = document.createElement('div');
  vartile = document.createElement('div');  回傳tile;
 },
 setTileVal: function(tile, val){
  tile.className = 'tiletile' val;
 tile.set,a. val);
  tile.innerHTML = val >; 0 ? val : '';
 },
 randomTile: function(){
  var ZeroTiles = [];
  for(var i = 0, len = this.tiles.length; i    if(this.tiles[i].getAttribute('val') == 0){
    zeroTiles.push(this.tiles[i]);
  zeroTiles.push(this.tiles[i]);
  zeroTiles.push(this.tiles[i]);
 🎜>  var rTile = ZeroTiles[Math.floor(Math.random() * ZeroTiles.length)];
  this.setTileVal(rTile, Math.random() } 移動：函數（方向）{
  var j;
  開關（方向）{
   case 'W':
    for(var i = 4, len =this.tiles  for(var i = 4, len =this.tiles  for長度; i      j = i;
     while(j >= 4){
      this.merge(this.yles[🎜>      this.merge(this., [ 🎜>      j -= 4;
     }
    }
    {
     j = i;
     while(j       this.merge(this.tiles[j 4], this.tiles[j  this.merge(this.tiles[j 4], this.tiles[j  this.merge(this.tiles[j 4], this.tiles[j1]]; }
    }
    break;
   case 'A':
    for(var i = 1, len = this.tiles.length; 🎜>     while(j % 4 != 0){
      this.merge(this.tiles[j - 1], >    }
    break;
   case 'D':
    for(var i = 14;我> = 0; i--){
     j = i;
     while(j % 4 != 3){
      this.merge(this.tiles[🎜>      this.merge(this.,les[ >      j = 1;
     }
    }
    break;
  }
    break;
  }
    break;
  } currTile){
  var prevVal = prevTile.getAttribute('val');
  var currVal = currTile.getAttribute('val');
  if(currVal != 0){

    this.setTileVal(prevTile, currVal);
    this.setTileVal(currTile, 0);
   vTile, prevVal ) ) * 2);
    this.setTileVal(currTile, 0);
   }
  }
 },
 等於：函數(Atle1,ti ' val') ==tile2.getAttribute('val');
 },
 max: function(){
  for(var i = 0, len = this.tiles.length; i    if(this.tiles[i].getAttribute('val') == 2048){
    返回true;
   ： function(){
  for(var i = 0, len = this.tiles.length; i
   if(this.tiles[i].getAttribute('val') == 0){
回傳false;
   }
   if(i % 4 != 3){
    if(this.equal(this.tiles[i false ;
    }
   }
   if(i     if(this.equal(this.tiles[i], this.tiles[i 4])){
     回 false; }回傳true;
 },
 clean: function(){
  for(var i = 0, len = this.tiles.length; i    this.container.removeChild(this.tiles[i] ]);
  }
  this.tiles = new Array(16);
 }
}

var 遊戲，startBtn;

window.onload = function(){
 var container = document.getElementById('div2048');
 startBtn = document.getElementById('start');
 startBtn. {
  this.style.display = '無';
  遊戲= 遊戲||新遊戲2048（容器）;
  game.init();
 }
}

window.onkeydown = function(e){
 var keynum, keychar;
 if(window.event){  // IE
  keynum = e.keyCode;; if(e.which){  // Netscape/Firefox/Opera
  keynum = e.which;
 }
 keychar = String.fromCharCode(keynum);
  '([WW)' S', 'A', 'D'].indexOf(keychar) > -1){
  if(game.over()){
   game.clean();
   startBtn.style。 = 'block';
   startBtn.innerHTML = '遊戲結束，重玩？ >