javascript实现2048游戏示例


Posted in Javascript onMay 04, 2014

原生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="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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
js分页之前端代码实现和请求处理
Aug 04 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 #Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 #Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 #Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 #Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 #Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 #Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 #Javascript
You might like
php 使用post,get的一种简洁方式
2010/04/25 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
js面向对象编程总结
2017/02/16 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
vuex入门最详细整理
2020/03/04 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
Python作用域用法实例详解
2016/03/15 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
教育学习自我评价
2014/02/03 职场文书
物流业务员岗位职责
2014/02/08 职场文书
《海底世界》教学反思
2014/04/16 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis