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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
Vue header组件开发详解
Jan 26 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
深入理解 JS 垃圾回收
Jun 03 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/04/18 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
php实现图片缩略图的方法
2016/03/29 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
Python如何在DataFrame增加数值
2020/02/14 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
中国央视网签名寄语
2014/01/18 职场文书
学生安全责任书
2014/04/15 职场文书
安全目标管理责任书
2014/07/25 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
幼儿园教师求职信
2015/03/20 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers