主机控制键:

  • 移动: W: 上, D: 前, A: 后, S:下
  • 攻击: J: 轻拳, K: 重拳, U: 轻腿, I: 重腿
  • 特殊技能: 下→前→拳: 波动拳, 下→后→腿:旋风腿, 前→下→前→拳:升龙拳

 

副机(小键盘):

 

  • 移动: ↑: 上, ←: 前, →: 后, ↓:下
  • 攻击: 1: 轻拳, 2: 重拳, 4: 轻腿, 5: 重腿
  • 特殊技能: 下→前→拳: 波动拳, 下→后→腿:旋风腿, 前→下→前→拳:升龙拳

 

其他:

  • 按F2暂停游戏, 1键大战电脑ai, 2键双人对打.
  • 如果控制不了, 注意切换下输入法哈.

 

图片素材来自互联网, 原作者Random. 游戏版权归CAPCOM公司所有.欧洲杯之前加上websocket和3D音效.

 

开发过程介绍

大概是1个月前开始学习HTML5, 就写了这样一个东东练手不过说来惭愧至今也只学会了canvasdrawImage. 每天的业余时间不太固定有时候一天能写三小时有时候一天能写三分钟代码也写的相当潦草总的来说有点虎头蛇尾本来准备找个时间再重构一下突然发现失去了兴致欧洲杯又马上开始了对我来说已经差不多达到练手的目的所以还是罢了.

非常简单的记录一些实现思路暂且不讨论api. 一是因为api到处可以查阅二是因为我确实只认识drawImag. 本人技术也十分有限请轻砸.

代码里只有几个js文件每个文件的功能如下:

  • Class.js   创建类和对象.
  • Game.js   游戏入口文件.
  • Map.js    绘制地图.
  • Config.js  各种游戏人物动作打架挨打等等配置.
  • Interface.js 各种接口
  • Main.js    负责游戏逻辑
  • Ai.js      Ai
  • Timer.js   全局定时器
  • Class.js.

为毛要搞这样一个东西呢保护原型继承的时候修正constructor什么的, 反正现在不搞个Class.create都有点不太好意思

这里也借鉴了prototype框架里的一些思路相对于prototype里的换汤不换药这儿的class.create选择返回一个普通的object对象有点像jquery$的搞法

这样可以自由的扩展Class的各种方法,而不用再搭理Function的原型举个例子, Class.empty()可以秒杀这个类生成的所有对象比如现在正在设计一个飞机游戏有个大招可以清除屏幕上的所有子弹和敌机那么哼哼.. 

因为Class.create返回的是一个普通的object. 所以不能用new Function的方式生成对象具体使用方法如下例.

Timer.js

js做动画无非就是用setInterval或者setTimeout让图片的topleft, 或者图片本身的src在很短的时间内间隔变换达到视觉的动画效果跟动画片一样.

虽然屏幕上有很多精灵在同时运动但在一个游戏中只有也应该只有一个全局的定时器

  1. 是从性能出发.  setInterval的开销相当不小.
  2. 是为了统一管理比如方便的实现暂停功能.

北京时间XXXX毫秒东经X度北纬X度在发生什么整个世界就是这样组成.

定时器从游戏开始一直在不停执行像地铁环线每隔1小时回到起点也像我们自己每隔24小时回到原点周而复始

Interface.js

我之前写过几个小游戏每个都搞了很多类在里面比如坦克大战子弹是一个类移动是一个类碰撞是一个类坦克先继承碰撞类再继承移动类这样一来坦克既能碰撞也能移动非常酷.

可是真的需要那么多类么有种方式或许更轻巧敏捷那就是接口

让精灵可以移动只需要Spirit.interface( ‘Animate’, Interfaces.Animate );

上帝创造生命的时候没有让腔肠动物和环节动物实现眼睛的接口.

人类当然实现了眼睛的接口, 但人类不是从眼睛继承来的.

接口在未被声明之前只是一个普通的函数没有构造器没有prototype. 基本不占内存开销

对于每个宿主实现者 )来说比如精灵1animate和精灵2animate. 它们像两个平行的宇宙每个都有各自的scope. 局部变量

接口之间不赞成互相通信但可以通过宿主来通信就像人类实现了耳朵接口和嘴巴接口

耳朵听到声音先把信息报告给大脑大脑再控制嘴巴说话但耳朵和嘴巴是不应该长到一起的这样不至于耳朵坏了的时候要修理嘴巴其实就是三个字要解耦!

Intanfances里面的主要接口有这些:

Event: 一个简单的自定义事件机制以便在Animate,Frame和碰撞检测的时候实现有限状态机.

  1. Lock: 动作锁.
  2. Queue: 一个简单队列机制
  3. StatusManage: 管理精灵的各种状态.
  4. Shadow: 精灵的阴影.
  5. Animate: 移动.
  6. SpiritFrames: 精灵的动画帧.
  7. KeyManage: 键盘管理器收集玩家输入.
  8. Collision: 检测碰撞.
  9. AttackEffect: 攻击效果.
  10. Audio: 音效.

Main.js

游戏的具体逻辑都在里面这个模块里一共实现了三个类精灵类战斗类还有一个类有点别扭它是波动拳类. – -!.  

整个游戏里也只有这3个类不过因为逻辑较多时间消耗基本都花在了这里毕竟它不像贪食蛇只要判断食物墙壁和尾巴

Ai.js

这个模块负责Ai所有逻辑也是写的最轻松的一个模块写好之后基本没改过.

对于电脑ai来讲它明白对方的每一个动作所以对每一组动作都给ai设计了一组反应动作比如你出旋风腿电脑就出升龙拳

但这样的话就没人打的过电脑了所以电脑的每次反应都有一组对的和一组错的可以调节ai的难度ai越难的时候随到正确那组动作的可能性越大.

 

写游戏和写普通的应用有点不一样的地方是游戏需要更好的抽象出每个场景之间的共同点或者找出他们的不同点要尽量尽量少写if else. 除非是逼不得已当你写了一个if, 就意味着可能要写Nelse if. 当逻辑越来越多的时候维护这些if会异常痛苦.

街头霸王里面的动作有很多种比如跳跃的时候不能移动攻击的时候既不能跳跃也不能移动跌倒的时候既不能跳跃也不能攻击也不能移动死亡之后啥也干不了那么怎么处理这些逻辑呢想想如果是写这样的代码.

游戏里的具体逻辑比这复杂的多我也想不到得写多少个if else, if else. 闭上眼睛就是if else.

现在我是这样实现的给每种动作在配置文件里加一个锁精灵在动的时候总是被它锁住的移动的锁是0跳跃是1攻击是2摔倒是3

当要执行一个新的动作的时候比如攻击的时候突然被踢倒会先比较2个动作的锁的级别如果后面动作的级别大于之前动作的级别就会打破之前的锁执行新的动作反之会无视新的动作比如攻击的时候移动和跳跃都是没用的.

转载请注明原地址:http://www.alloyteam.com/2012/05/html5-streetfighter-demo/

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/05/html5-streetfighter-demo/

  1. 你的大爷 2014 年 8 月 26 日

    厉害挺好玩的。www.ckhub.com

  2. 土豆 2013 年 10 月 28 日

    曾哥,你再详细地解释一下你的代码么?
    比如里的那几个easing: {
    linear: function( t, b, c, d ){
    return c*t/d + b;
    },
    easeIn: function( t, b, c, d ){
    return c*(t/=d)*t + b;
    },
    strongEaseIn: function(t, b, c, d){
    return c * (t /= d) * t * t * t * t + b;
    },
    strongEaseOut: function(t, b, c, d){
    return c * ((t = t / d – 1) * t * t * t * t + 1) + b;
    },
    sineaseIn: function( t, b, c, d ){
    return c*(t/=d)*t*t + b;
    },
    sineaseOut: function(t,b,c,d){
    return c*((t=t/d-1)*t*t + 1) + b;
    },
    sineaseInOut: function(t,b,c,d){
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((–t)*(t-2) – 1) + b;
    }
    它们有什么区别?各个函数是什么意思?谢谢!

  3. yong 2012 年 10 月 10 日

    firefox下音频文件解析失败,程序加载不完

    • svenzeng 2012 年 10 月 10 日

      可以用chrome试一下。firefox可能版本不太合适。

  4. 浩子 2012 年 10 月 6 日

    请问游戏的图片素材哪里找的,一直没找到好的游戏图片资源,烦请大侠们指点下。感激不尽啊!!!!

    • svenzeng 2012 年 10 月 10 日

      我也是网上找到, 街机模拟器里可以扒,不过是苦力活。

      • 浩子 2012 年 10 月 13 日

        呵呵,楼主写这游戏也是苦力活啊!很强

        • Freetao 2014 年 6 月 13 日

          呵呵呵,很强+1哦。

  5. 匿名 2012 年 9 月 17 日

    能把游戏人物图像改了把代码发给我吗

    • 匿名 2012 年 9 月 17 日

      邮箱1378605125@qq.com.谢谢楼主了

  6. FG 2012 年 8 月 28 日

    不错,有意思,可惜就是HTML5兼容性是个问题,还好我一直用chrome

  7. perlt 2012 年 8 月 5 日

    怎么只有两个人玩而已。

  8. ark 2012 年 8 月 5 日

    不知是我游戏白痴了,还是NPC太强了

    • svenzeng 2012 年 8 月 7 日

      我找到好几个必杀方式了

  9. herbertd 2012 年 6 月 14 日

    CHROM 可以正常运行。

    做得很好!就是电脑太强了吧?搞不定他。

  10. Pel 2012 年 6 月 5 日

    @svenzeng 曾哥有没有作弊码啊, 电脑太强了!

  11. 匿名 2012 年 6 月 4 日

    下载下来。可以玩。需要使用新版 谷歌浏览器,其他的一概不行。

  12. avindeng 2012 年 6 月 4 日

    很好,很强大。
    就是操作起来比较费劲,老是被打败。

    • avindeng 2012 年 6 月 4 日

      没有声音,下载的源码文件中的mp3文件无法播放,估计是不是音频文件出了问题啊?

  13. 白菜 2012 年 6 月 2 日

    基本没法玩,IF/FF无法加载,chrome下页面崩溃。

    • TAT.Kinvix

      TAT.Kinvix 2012 年 6 月 3 日

      目前只测试过chrome,请升级到chrome最新版本

  14. argentwolf 2012 年 6 月 2 日

    好奇怪,我这里ff12和ie9都卡在loading了,ff是11/11,ie9是1/11,下载到本地也一样。有人有同样的状况吗?

  15. HTML5游戏 – 街头霸王 – html5Street 2012 年 5 月 31 日

    […] 因为Class.create返回的是一个普通的object. 所以不能用new Function的方式生成对象. 具体使用方法如下例. view plainprint? […]

  16. Trista Wang 2012 年 5 月 31 日

    可以跑~

  17. Fish 2012 年 5 月 31 日

    safiri可以跑,不过玩得过程有点卡,chrome的确没有运行起来,一直在loading和11/11,也许是我不够耐心,呵呵。

    • TAT.Kinvix

      TAT.Kinvix 2012 年 5 月 31 日

      因为这几天访问量太大,再加上是国外服务器,会出现不稳定情况,我也遇到过,不过Chrome刷新一下就好了

    • Freetao 2014 年 6 月 13 日

      呵呵呵。

  18. jackqqxu 2012 年 5 月 30 日

    我在FF,谷歌,QQ浏览器上面都测试过了,无法启动游戏,再加载mp3的时候,返回206,资源下载不全,你们那边可以玩起来吗?

    • 匿名 2012 年 5 月 30 日

      chrome,firefox应该都可以..刷几次还是玩不了么?

    • TAT.Kinvix

      TAT.Kinvix 2012 年 5 月 31 日

      因为放在国外服务器可能会不够稳定,请刷新几次试试!

  19. TAT.svenzeng

    svenzeng 2012 年 5 月 29 日

    看看头像

    • jesse 2012 年 5 月 29 日

      lz头像亮了

发表评论