脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → javascript制作2048游戏

javascript制作2048游戏

 更新时间：2015年03月30日 17:31:25   投稿：hebedich  
这几天玩儿着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);
  }
}

以上所诉就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

相关文章

  • 基于jquery编写分页插件

    基于jquery编写分页插件

    这篇文章主要为大家详细介绍了基于jquery编写分页插件的相关资料，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jQuery回到顶部的代码

    jQuery回到顶部的代码

    在一些网站上，我们经常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果，非常不错，感兴趣的朋友可以参考下
    2016-07-07
  • jQuery实现的进度条效果

    jQuery实现的进度条效果

    本文主要给大家介绍的是jQuery实现的进度效果的实例代码，其实现原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式）有需要的小伙伴可以参考下。
    2015-07-07
  • 前端开发必知的15个jQuery小技巧

    前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • xheditor与validate插件冲突的解决方案

    xheditor与validate插件冲突的解决方案

    xheditor和validate都是优秀的jQuery插件，但将两者组合到起，如果初始化的顺序不当，则会出现一些微妙的结果。
    2010-04-04
  • 3分钟写出来的Jquery版checkbox全选反选功能

    3分钟写出来的Jquery版checkbox全选反选功能

    checkbox全选反选的文章在以前也有介绍很多，实在是不想在提起了，然而身边还是有些朋友不会，于是3分钟写出来一个估计有很多bug
    2013-10-10
  • 在jquery中的ajax方法怎样通过JSONP进行远程调用

    在jquery中的ajax方法怎样通过JSONP进行远程调用

    这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下
    2014-04-04
  • jQuery下的几个你可能没用过的功能

    jQuery下的几个你可能没用过的功能

    用jQuery好久了，都做了两个项目了。今儿晚上喝咖啡喝多了，这都两点多了睡不着，给大家分享下我在项目中用到的一些用jQuery实现的一些比较好的功能。希望对一些新手有点用。。。高手们可以拍砖哈。。。。我头很硬不怕疼。。。呵呵。
    2010-08-08
  • 使用jQuery内容过滤选择器选择元素实例讲解

    使用jQuery内容过滤选择器选择元素实例讲解

    内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，接下来为大家详细介绍下jQuery选择器，感兴趣的朋友可以参考下哈
    2013-04-04
  • jQuery自动或手动图片切换效果

    jQuery自动或手动图片切换效果

    这篇文章主要为大家详细介绍了jQuery自动或手动图片切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论