Google Reader

jQuery版的坦克游戏，希望大家喜欢

by

at 2010-10-13 12:09:11

original http://www.javaeye.com/topic/783537

  一款jQuery版tank游戏，画面美观、逼真，可双人游戏，其效果堪与flash媲美。支持浏览器：ie6+，firefox，opera，safari，在ie9或其他非ie浏览器，可获得更加流畅的游戏速度。
    下载地址：http://code.google.com/p/jtankwar/
游戏效果截图：


主页--游戏设置


游戏中..




暂停/退出



任务结束


tankwar源码说明：
1. jquery.game.js。定义了所有对象：tank, bullet, roadblock, king等。

对象定义方法：
function Tank(opt) {
  //public变量
  this.id = id;
  //private变量
  var bloods = opt.bloods || 1;
  //public方法
  this.move = function(dir) {...};
  this.fire = function() {...};
  //private方法
  function isBlocked() {...};
}

2. tank.start.js。将上面的对象实例化，添加事件监听，通过键盘事件调用fire和move。这样对象和调用就完全分离开了，且对象结构清晰严谨、重用性、扩展性俱佳。

代码调用片断：
t1 = new Tank({...});
$(document).keydown(function(e){
  e = e || window.event;
  var key = e.which || e.keyCode;
  switch (key)
    case 38: t1.move('up'); break;
    case 40: t1.move('down'); break;
    case 37: t1.move('left'); break;
    case 39: t1.move('right'); break;
    case 32: t1.fire(10); break;
    default: break;
});

3. tank.home.js。负责菜单初始化和跳转。
4. 地图(maps/map[i].json)。

地图json：
{
    "map": [{
        "clazz": "b", //敌方tank出生地
        "top": 107, //位置
        "left": 9
    }, {
        "clazz": "h", //子弹打不穿的石头roadblock
        "top": 272,
        "left": 10
    }, {
        "clazz": "e", //子弹打得穿的砖roadblock
        "top": 312,
        "left": 43
    }, {
        "clazz": "w", //水roadblock
        "top": 350,
        "left": 654
    }]
}

      <br><br>
      作者: <a href="http://danny-chiu.javaeye.com">danny.chiu</a> 
      <br>
      声明: 本文系JavaEye网站发布的原创文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
      <br><br>
      <span style="color:red">
        <a href="http://www.javaeye.com/topic/783537" style="color:red">已有 <strong>49</strong> 人发表回复，猛击-&gt;&gt;<strong>这里</strong>&lt;&lt;-参与讨论</a>
      </span>
      <br><br><br>

JavaEye推荐

• —软件人才免语言低担保 赴美带薪读研！—