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 相关文章推荐
javascript控制swfObject应用介绍
Nov 29 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
vue 注册组件的使用详解
May 05 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
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聊天室技术
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python实现查询苹果手机维修进度
2015/03/16 Python
python 容器总结整理
2017/04/04 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python实现京东秒杀功能
2018/07/30 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
助学感谢信范文
2015/01/21 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Java 数据结构七大排序使用分析
2022/04/02 Java/Android