TAT.Cson CodeTank 坦克机器人开发教程
In 未分类 on 2012年08月30日 by view: 77,533
62

一、坦克结构组成:

坦克由三个基本部件组成:主体,炮管和雷达

  1. 主体:可进行移动或旋转动作。
  2. 炮管:可进行旋转和开火动作,开火可控制子弹的能量范围。
  3. 雷达:可进行旋转和探测敌人的动作。当坦克停止移动时,雷达会被关闭,玩家可以通过手动调用 scan方法开启雷达。

雷达射线可以在界面的设置面板中设置是否开启,取消雷达射线显示可以得到更好的性能。

二、坐标系

codetank 的坐标系如下:

 三、坦克参数说明

  • 坦克,雷达,火炮旋转速度:6 度/帧。
  • 坦克初始能量:100
  • 坦克最大移动速度:8px/帧(当坦克快完成指定位移时,会作一个减速运动)
  • 火炮冷却速度:0.1/帧
  • 火炮热度增加计算:3+(发射子弹的能量 / 5)
  • 子弹能量范围:1-3
  • 子弹速度:12px/帧
  • 坦克被击中能量损耗计算:4*子弹能量,如果子弹能量大于 1,则再加上 2*(子弹能量-1)的伤害
  • 击中敌人获得的能量奖励:3*子弹能量
  • 撞墙能量损耗:速度值/2
  • 撞击其他 robot 的能量损耗:6

四、坦克的运动

坦克的运动入口为 run方法,该方法启动坦克的运动,例如我们可以使用如下代码使坦克在前进50px之后,雷达旋转90度:

正如你们所看到的,坦克在 run方法里的运动结束之后,就会停止。

如果我们想运动多次地执行,我们只需要一个 for 循环。例如下面的代码将使坦克进行三次的来回运动


 查看 demo

有时候可能多次的循环运动还不足够,如果我们想让运动无限地循环执行,可以调用robotloop方法,使坦克的行为无限循环。 以下代码使用 loop方法,使坦克做不断做一个矩形的运动:

五、旋转运动

由于坦克包括雷达,炮管,主体三个部分,默认情况下,炮管和雷达跟随坦克的旋转而进行旋转。

但是某些情况下,我们可能希望主体只产生独立的旋转,炮管和雷达不跟随主体产生旋转。因此 robot提供三种方法让玩家使坦克作出理想的旋转运动:

查看 demo

六、动作完成的回调

当一个动作完成之后,玩家可以指示 Robot进行怎样的回调操作。

例如,我们可以使用下面的方法,利用回调函数改变坦克的运动轨迹:

在上面的方法中,首先前进 40px 后转左 90 度,然后在旋转完成的回调函数中,把 dir 变量进行反向,那么 robot 在下一次的行动中,行动轨迹将会变成先后退 40px,再转右 90 度,周而复始。

查看 demo

七、多个动作并行执行

在上面的动作中,robot必须先执行完一个动作,才能开始执行下一个动作,但是如果我们需要多个动作一起执行呢?

Robot 提供多动作同时执行的API,形式为:setXXX

例如如果我们需要 robot进行一个圆周运动,那么我们就可以让前进和旋转的运动同时执行,首先调用setAheadsetTurn方法设置需要并行执行的两个行为:

当设置好并行执行的两个行为之后,我们就可以调用 execute方法,同时执行之前订制的行为:

这样 robot 就会进行一个圆周的运动。

需要注意的是,setXX预设的行为并不一定通过execute方法来执行,任何会具有执行特性的方法都会触发之前预设的行为,例如,通过turn方法同样可以使之前预设的ahead值并行执行,robot也会进行一个圆周运动:

八、事件

CodeTank 提供多个事件,常用的事件有onScannedRobotonHitWall等,玩家在实现自己的坦克的时候,可以重写这些事件处理程序从而使自己的坦克具有更多个性化的行为。

事件的优先级一览:

  1. scannedRobot:10
  2. bulletMissed:60
  3. bulletHit:50
  4. hitWall:30
  5. bulletHitBullet:50
  6. hitByBullet:40,
  7. hitRobot:20
  8. death:100
  9. win:100
  10. robotDeath:70

优先级高的事件会中断优先级低的事件。每个事件处理程序中的事件对象都具有某些特定的方法,获取处理该事件的时候需要访问的参数,例如:

九、雷达的特殊行为

之前提到过,雷达会在坦克停止移动的时候自动停止扫描(停止移动的含义是:坦克的主体,雷达,炮管都停止移动和旋转)。因此如果想让坦克在停止移动的状态下启动扫描,可以调用坦克的 scan方法:

scan 方法有两种应用场景:

1. 在坦克停止移动的时候手动出发雷达的扫描,当此时雷达扫描到坦克,立刻进入 scannedRobot事件处理程序。如果我们的坦克在扫描到敌人后停下来开火,此时雷达也会停止扫描,因此如果需要不断对敌人开火,我们就可以再次调用scan,使扫描启动,坦克再次发现敌人并开火。

2. 中断并重新执行现在的 scanedRobot处理程序。当手动调用scan方法时,如果再次出发了scanedRobot事件,此时会中断之前的scanedRobot事件,由头开始重新执行scannedRobot事件处理程序,例如:

十、子弹能量与炮管热度

调用 fire方法可以向敌人开火,火力范围为0-3,火力越大,对敌人的伤害越大,同时对自身的能量损耗也越大,另外,热量产生也越多(热量决定了射击的间隔,热量越大,炮管需要的冷却时间也越多)。

热量损耗计算公式: (3+(power/5)).toFixed(1);

十一、射击技巧

通常情况下,当我们使用雷达旋转扫描,一扫描到敌人的时候,就可以立刻开火:

查看 demo

但是我们会发现,这样的话坦克在发现敌人并射击之后,炮管会继续旋转,在旋转一周之后再探测到敌人并射击。每次射击都在旋转一周之后,因此效率是很低下的,我们可以改造下这个笨笨的坦克,在发现敌人的时候,停止旋转并一直射击:

在这种情况下,如果敌人相距比较近,我们的坦克还是能顺利击中敌人的,但是如果敌人相距比较远,我们会发现,坦克每次射击都偏离了目标。

查看 demo

为什么会出现这样的情况呢?其实,在 codetank里,scannedRobot触发的条件并不是雷达的中心正对敌人的中心,而是敌人的中心在雷达的扫描范围内。因此,如果敌人的中心刚好在雷达扫描范围比较靠边的地方,此时开火就不能准确击中敌人了。

更好的方法是,在发现敌人之后,并不立刻射击,而是把炮管旋转一定角度,使其对准了敌人的中心,在进行射击。在 scannedRobot的事件对象里,可以通过getBearing方法获取到探测到的敌人相对于坦克的角度:

由于我们可以通过 getHeading()获取到坦克自身的角度,getGunHeading获取到炮管的角度,因此可以轻松计算出敌人相对于自身的角度为:

之后由于计算出的角度可能会超出-360-360度的范围,并且我们总是需要选择最小的旋转轨迹进行炮管的旋转,因此修复这些角度之后得出的最终旋转角度为:


在炮管旋转该角度后再进行开火,命中率就大大增高了。

查看 demo

十二、游戏模式

codeTank 提供5种游戏的模式,包括:

  • 开发模式:适合于玩家调试自己的坦克,坦克数量不作限制。
  • 1v1模式:坦克之间进行单挑的模式。
  • 10 人混战:10个坦克加入战场,彼此之间进行混战。
  • 二人对决:两个战队,每个战队两辆坦克进行对决。
  • 战队对决:两个战队,每个战队五辆坦克进行对决。

codeTank 支持坦克自由组队进行对战,队友之间可以相互发送信息进行彼此间的合作。

例如,坦克 A在发现敌人之后把敌人的坐标告诉坦克B,坦克B就可以和坦克A一起对敌人发动猛烈的攻击
十三、团队作战

团队成员之间可以进行合作,CodeTank 提供一些 API 让团队成员之间能够互相通信:

1.isTeammate:

判断某个坦克是否是队友。一般在团队作战的模式下,发现一个坦克,我们应该首先调用 isTeammate 方法判断坦克是否为队友,再决定是否开火。

2.getTeammates:

获取所有队友

3.sendMessage:

向一个或一组队友发送信息

4.broadcastMessage:

向所有队友发送信息

 

十四、分享你的坦克

CodeTank 和为坦克的分享提供接口,各位玩家可以把自己调教出来的坦克分享到微博中,其他玩家的坦克进行对战:

十五、个性化行为

Codetank 有一些比较个性化的行为,使游戏的吸引力和可玩性都得到了提高,以下主要介绍几个:

1.say 方法,会说话的坦克

玩家可以设置坦克在不同场景下所说的话,说话的内容和对话的颜色都由玩家自定义,使坦克看起来更人性化:

 2.setUI 方法,多种ui更换

玩家可以订制坦克的多种 ui风格,为自己的坦克换装。codeTank提供多种坦克ui

3.onPaint 的自定义绘制

如果提供的 UI都没办法满足蛋疼的你,codeTank还能为你的坦克提供一个自由绘制的画布,实现onPaint事件处理程序,你可以在自己的坦克上绘制上你想要的东东:

4. 战场的订制:

codeTank 为具有不同需求的玩家提供多种对战场的自定义设定,玩家可以根据自己的爱好订制适合自己的战场:

OK,还有更多的API和玩法就等待大家自己去发掘了,相信codeTankAPI文档能成为你们的好帮手:

CodeTank API 文档

Enjoy yourself and your tank

 

参见

文档手册

教程

主页

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/08/codetank-development-tutorial/

  1. 匿名 2012 年 9 月 1 日

    新手看的一头雾水啊

  2. ruizhao 2012 年 9 月 1 日

    创意很好 游戏很好玩,我正在调试自己的 tank rebot 。
    问题:对于鼠标键盘 事件的 处理函数 不是很清楚 能不能给出 demo 或者具体的 介绍。谢谢

  3. 匿名 2012 年 8 月 31 日

    挺好玩的,现在玩的人还不多

  4. html6game 2012 年 8 月 31 日

    UI 非常不错,教程偶收了,谢谢提供这么好的。

  5. CodeTank 代码坦克-腾讯前端团队退出的编程对战游戏,用游戏来学习Javascript开发语言 | 启程 2012 年 8 月 31 日

    […] 由于涉及的知识面和资料较多,本文就不直接教大家如何编写坦克进行战斗了,有兴趣的朋友可以参考一下下面的一些资料来尝试编写。如果你有 Javascript 的基础基本上很简单,纯新手的话,也可以先了解一下 JS 的语法,然后摸索着一步一步慢慢来。 CodeTank 入门帮助手册 CodeTank 的 API 文档 CodeTank 的 CheatSheet 速查表 CodeTank 坦克机器人开发教程 […]

  6. chazz 2012 年 8 月 31 日

    表示无法保存代码. 啊? 老是提示保存失败的对话框? 何解?

    • shosh 2012 年 9 月 15 日

      很可能命名的问题。最开始我保存的名字中有 “.” 结果就一直失败。使用普通的字符串应该就好了。最后显示的名字是你的用户名+“.“+你给坦克起的名字。

  7. 怨人之心怨已,恕已之心恕人 » Blog Archive » CodeTank 代码坦克 – 腾讯推出有趣的编程对战游戏,用游戏来学习 Javascript 开发语言 2012 年 8 月 31 日

    […] 由于涉及的知识面和资料较多,本文就不直接教大家如何编写坦克进行战斗了,有兴趣的朋友可以参考一下下面的一些资料来尝试编写。如果你有 Javascript 的基础基本上很简单,纯新手的话,也可以先了解一下 JS 的语法,然后摸索着一步一步慢慢来。 CodeTank 入门帮助手册 CodeTank 的 API 文档 CodeTank 的 CheatSheet 速查表 CodeTank 坦克机器人开发教程 […]

  8. 梦幻神化 2012 年 8 月 30 日

    蛮有意思的,就是上手要有点时间- –

  9. only 2012 年 8 月 30 日

    setRadarTurn(angle)
    这个方法在文档里面出现 3 次,可见你们确定很忙

    • TAT.Cson

      csonlai1989 2012 年 8 月 30 日

      好像没有吧~
      你指的是:setRadarTurn 和 setRadarTurnLeft 以及 setRadarTurnRight?
      这三个是不同的~
      🙂

  10. CodeTank代码坦克-腾讯推出有趣的编程对战游戏,用游戏来学习Javascript开发语言 | 8910小站 2012 年 8 月 30 日

    […] 由于涉及的知识面和资料较多,本文就不直接教大家如何编写坦克进行战斗了,有兴趣的朋友可以参考一下下面的一些资料来尝试编写。如果你有 Javascript 的基础基本上很简单,纯新手的话,也可以先了解一下 JS 的语法,然后摸索着一步一步慢慢来。  CodeTank 入门帮助手册  CodeTank 的 API 文档  CodeTank 的 CheatSheet 速查表  CodeTank 坦克机器人开发教程 […]

  11. pretender 2012 年 8 月 30 日

    此游戏应该更加贴近新手如何应用 给从来没接触过编程的人创造兴趣 目前这点做的还不够好

  12. mew7wo 2012 年 8 月 30 日

    这游戏太棒了,后面继续丰富游戏元素会更好,就是能不能让用户选择代码是否开放?

  13. 吕子熏 2012 年 8 月 29 日

    记得早些时候,曾经想过一款叫做 “云端” 的网络游戏,那个是一个空旷无边的云端世界。当第一位玩家登陆进这个游戏后,首先看到的一望无际的云端;玩家在这个世界中是一个个体,系统会提供给玩家一组 api 接口,他可以通过这一组 api 接口,编写 “云端代码” 来创造一个群体社会,例如:创建出一个个的山脉、水、植物、城市,人类,等等。不同的玩家回创建出不同的群体社会。自然,你也可以创建一条路通往不同玩家创建的国家中,这样不同的文明之间就产生了交流~~
    在线上或者线下,玩家之间可以交流自己的代码,云端系统定期也会更新新的 api,以便玩家更好建造自己的世界。云端与其他游戏不同的地方是:其他的游戏是在玩家玩游戏之前就创建了玩法,他应该怎么玩,但云端却是让玩家自己创建这个世界,创建玩法~~ 这里没有 npc,没有任务,有的是你无限的想象力~~

    PS: 话说让玩家编写代码这个方面,跟作者思路一样哦~~

    • TAT.Cson

      csonlai1989 2012 年 8 月 29 日

      呵呵 “云端” 网游规则制定的工作量还是很大的。codetank 思路和那种游戏有相似的地方,但是玩家的自由度没有那么大。

      • shosh 2012 年 9 月 16 日

        其实 codetank 模仿的是 java 版的 robocode(当然也有 C#版的)。那是一个开源项目。codetank 吸引我的不是他的玩法,而是 javascript。用网页来完成这样一个对抗平台更易于开发人员的切磋。现在的网页技术真的非几年前可比,发展真的好快!

    • 匿名 2012 年 8 月 29 日

      这个游戏已经存在了,还是还在构思中?

      • TAT.Kinvix

        TAT.Kinvix 2012 年 8 月 30 日

        已经在线运行了,网址是:http://CodeTank.AlloyTeam.com/

    • 孙石头 2014 年 1 月 15 日

      你所说的 “云端” 网络游戏,现在还在吗?貌似网上找不到相关东西

  14. wnczlw369 2012 年 8 月 29 日

    似乎在程序里把坦克写 “死了”?

    • TAT.Cson

      csonlai1989 2012 年 8 月 29 日

      写 “死” 了是指?

  15. 匿名 2012 年 8 月 28 日

    Will have a try

  16. p 2012 年 8 月 28 日

    体验太差了,完全找不找北。Pony

    • TAT.Kinvix

      TAT.Kinvix 2012 年 8 月 28 日

      请详细说说,我们会努力改进!

      • 匿名 2012 年 8 月 29 日

        编辑保存完代码后,应该自动更新坦克啊。现在好像只能刷新后,重新选择坦克。是不是还有其他方法?

  17. ledkk 2012 年 8 月 28 日

    能像 dota 那样有地图就更牛叉了

    • TAT.Kinvix

      TAT.Kinvix 2012 年 8 月 28 日

      后续会加一些障碍物,做到 dota 的方式还有很长的路要走

  18. 欢迎来到CodeTank代码坦克游戏! | Tencent AlloyTeam 2012 年 8 月 18 日

    […] Post navigation ← Previous […]

  19. CodeTank代码坦克编程游戏——全世界Javascript程序员的游戏 | Tencent AlloyTeam 2012 年 8 月 18 日

    […] CodeTank 坦克机器人开发教程 […]

  20. dexbol 2012 年 8 月 17 日

    Cool !

发表评论到 大老虎