javascript制作2048游戏


Posted in Javascript onMarch 30, 2015

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的函数
Jan 31 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
JavaScript模拟实现继承的方法
Mar 30 #Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 #Javascript
JS实现向表格中动态添加行的方法
Mar 30 #Javascript
JS实现向表格行添加新单元格的方法
Mar 30 #Javascript
JS实现控制表格行文本对齐的方法
Mar 30 #Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 #Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 #Javascript
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
document.all与WEB标准
2020/05/13 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
基本DOM节点操作
2017/01/17 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
今天,小程序正式支持 SVG
2019/04/20 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python 装饰器使用详解
2017/07/29 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
jupyter 导入csv文件方式
2020/04/21 Python
Python json格式化打印实现过程解析
2020/07/21 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
工作后的感想
2015/08/07 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android