javascript实现2048游戏示例

更新时间：2014年05月04日 11:30:48 作者：

这篇文章主要介绍了javascript实现2048游戏示例,需要的朋友可以参考下

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

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="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();
}
}

您可能感兴趣的文章:

JavaScript 学习初步入门教程
看了《21天学习JavaScript》的视频教程，感觉就是语法好熟悉，和C++类似，和C#类似，和Java类似！幡然悔悟这些语言的语法都是类似的，数据类型，对象方法（或者称之为函数，由于我是个菜鸟所以也数不清楚到底是什么）。
2010-03-03
js split 的用法和定义 js split分割字符串成数组的实例代码
关于js split的用法，我们经常用来将字符串分割为数组方便后续操作，今天写一段广告判断代码的时候，竟然忘了split的用法了，特整理下，方便需要的朋友
2012-05-05
Javascript基础_嵌入图像的简单实现
下面小编就为大家带来一篇Javascript 基础_嵌入图像的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
Underscore.js 1.3.3 中文注释翻译说明
Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象,本文就翻译了它的源代码中的注释,需要的朋友可以参考下
2015-06-06
Javascript堆排序算法详解
这篇文章主要介绍了Javascript堆排序算法及其示例，非常实用,需要的朋友可以参考下
2014-12-12
JavaScript中的replace()方法使用详解
这篇文章主要介绍了JavaScript中的replace()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
JavaScript学习笔记整理_关于表达式和语句
下面小编就为大家带来一篇JavaScript学习笔记整理_关于表达式和语句。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
javascript浏览器兼容教程之事件处理
如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once》），它们分别是NN4、IE4+和W3C/Safar。
2014-06-06
parentElement,srcElement的使用小结
本篇文章主要是对parentElement,srcElement的使用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性
通常而言，JavaScript由ECMAScript核心、BOM和DOM三部分构成，前面的文章将ECMAScript核心部分粗略的过了一篇
2012-10-10