javascript制作2048游戏

2019-11-20 12:49:53

字体：大中小

来源：转载

供稿：网友

2048.html

<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>2048</title><link rel="stylesheet" type="text/css" href="css/2048.css" /><!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> --><script type="text/javascript" src="js/2048.js"></script></head> <body>  <div id="div2048">    <a id="start">tap to start :-)</a>  </div></body></html>

2048.css

@charset "utf-8"; #div2048{  width: 500px;  height: 500px;  background-color: #b8af9e;  margin: 0 auto;  position: relative;}#start{  width: 500px;  height: 500px;  line-height: 500px;  display: block;  text-align: center;  font-size: 30px;  background: #f2b179;  color: #FFFFFF;}#div2048 div.tile{  margin: 20px 0px 0px 20px;  width: 100px;  height: 40px;  padding: 30px 0;  font-size: 40px;  line-height: 40px;  text-align: center;  float: left;}#div2048 div.tile0{  background: #ccc0b2;}#div2048 div.tile2{  color: #7c736a;  background: #eee4da;}#div2048 div.tile4{  color: #7c736a;  background: #ece0c8;}#div2048 div.tile8{  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;}#div2048 div.tile128{  color:#fff7eb;  background:#edce71;}#div2048 div.tile256{  color:#fff7eb;  background:#edcc61;}#div2048 div.tile512{  color:#fff7eb;  background:#ecc850;}#div2048 div.tile1024{  color:#fff7eb;  background:#edc53f;}#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 < len; i++){      var tile = this.newTile(0);      tile.setAttribute('index', i);      this.container.appendChild(tile);      this.tiles[i] = tile;    }    this.randomTile();    this.randomTile();  },  newTile: function(val){    var tile = document.createElement('div');    this.setTileVal(tile, val)    return tile;  },  setTileVal: function(tile, val){    tile.className = 'tile tile' + val;    tile.setAttribute('val', val);    tile.innerHTML = val > 0 ? val : '';  },  randomTile: function(){    var zeroTiles = [];    for(var i = 0, len = this.tiles.length; i < len; i++){      if(this.tiles[i].getAttribute('val') == 0){        zeroTiles.push(this.tiles[i]);      }    }    var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];    this.setTileVal(rTile, Math.random() < 0.8 ? 2 : 4);  },  move:function(direction){    var j;    switch(direction){      case 'W':        for(var i = 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(var i = 11; i >= 0; i--){          j = i;          while(j <= 11){            this.merge(this.tiles[j + 4], this.tiles[j]);            j += 4;          }        }        break;      case 'A':        for(var i = 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(var i = 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){    var prevVal = prevTile.getAttribute('val');    var currVal = currTile.getAttribute('val');    if(currVal != 0){      if(prevVal == 0){        this.setTileVal(prevTile, currVal);        this.setTileVal(currTile, 0);      }      else if(prevVal == currVal){        this.setTileVal(prevTile, prevVal * 2);        this.setTileVal(currTile, 0);      }    }  },  equal: function(tile1, tile2){    return tile1.getAttribute('val') == tile2.getAttribute('val');  },  max: function(){    for(var i = 0, len = this.tiles.length; i < len; i++){      if(this.tiles[i].getAttribute('val') == 2048){        return true;      }    }  },  over: function(){    for(var i = 0, len = this.tiles.length; i < len; i++){      if(this.tiles[i].getAttribute('val') == 0){        return false;      }      if(i % 4 != 3){        if(this.equal(this.tiles[i], this.tiles[i + 1])){          return false;        }      }      if(i < 12){        if(this.equal(this.tiles[i], this.tiles[i + 4])){          return false;        }      }    }    return true;  },  clean: function(){    for(var i = 0, len = this.tiles.length; i < len; i++){      this.container.removeChild(this.tiles[i]);    }    this.tiles = new Array(16);  }} var game, startBtn; window.onload = function(){  var container = document.getElementById('div2048');  startBtn = document.getElementById('start');  startBtn.onclick = function(){    this.style.display = 'none';    game = game || new game2048(container);    game.init();  }} window.onkeydown = function(e){  var keynum, keychar;  if(window.event){    // IE    keynum = e.keyCode;  }  else if(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 = 'game over, replay?';      return;    }    game.move(keychar);  }}

以上所诉就是本文的全部内容了，希望大家能够喜欢。

上一篇：javascript实现简单的贪吃蛇游戏

下一篇：JavaScript模拟实现继承的方法