suchen

Heim >Web-Frontend >js-Tutorial >Javascript-Produktion 2048 game_jquery

Javascript-Produktion 2048 game_jquery

WBOY
WBOYOriginal
2016-05-16 16:06:541415Durchsuche

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 &#63; 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 &#63; 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&#63;';
      return;
    }
    game.move(keychar);
  }
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Methode zum dynamischen Löschen bestimmter Zeilen aus einer Tabelle_Javascript-KenntnisseNächster Artikel：JS-Methode zum dynamischen Löschen bestimmter Zeilen aus einer Tabelle_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen