中国领先的IT技术网站
|
|

HTML 5街头霸王游戏(开放源码)

每天的业余时间不太固定, 有时候一天能写三小时, 有时候一天能写三分钟. 代码也写的相当潦草. 总的来说有点虎头蛇尾。

作者:Tencent AlloyTeam来源:腾讯Web前端|2012-06-07 14:54


试玩地址:  http://alloyteam.github.com/StreetFighter/

下载地址: https://github.com/AlloyTeam/StreetFighter

主机控制键:

移动: W: 上, D: 前, A: 后, S:下

攻击: J: 轻拳, K: 重拳, U: 轻腿, I: 重腿

特殊技能: 下→前→拳: 波动拳, 下→后→腿:旋风腿, 前→下→前→拳:升龙拳

副机(小键盘):

移动: ↑: 上, ←: 前, →: 后, ↓:下

攻击: 1: 轻拳, 2: 重拳, 4: 轻腿, 5: 重腿

特殊技能: 下→前→拳: 波动拳, 下→后→腿:旋风腿, 前→下→前→拳:升龙拳

其他:

按F2暂停游戏, 1键大战电脑ai, 2键双人对打.

如果控制不了, 注意切换下输入法哈.

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

开发过程介绍

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

非常简单的记录一些实现思路. 暂且不讨论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的方式生成对象. 具体使用方法如下例.

  1. var Hero = Class.create( function( name ){      
  2. this.name =  name;       
  3. } , {       
  4. addSkill: function(  skill ){       
  5. .......      
  6. }       
  7. })       
  8. var hero1 = Hero.getInstance(  "半人马酋长"  );     
  9. hero1.addSkill(  "六级跳大"  );      
  10. var hero2 = Hero.getInstance(  "山岭巨人"  )       
  11. hero2.addSkill(  "六级跳大"  )       
  12. var hero3 = Hero.getInstance(  "黑暗游侠"  );       
  13. hero3.addSkill(  "六级跳大">"  );   

Timer.js

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

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

一是从性能出发.  setInterval的开销相当不小.

二是为了统一管理, 比如方便的实现暂停功能.

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

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

  1. var timer = Timer.add( function(){       
  2. alert (1)       
  3. })       
  4. timer.start();  //上车       
  5. timer.stop();  //下车      
  6. timer.slow( 1000 ) 地铁减速   

Interface.js

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

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

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

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

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

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

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

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

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

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

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

Lock: 动作锁.

Queue: 一个简单队列机制.

StatusManage: 管理精灵的各种状态.

Shadow: 精灵的阴影.

Animate: 移动.

SpiritFrames: 精灵的动画帧.

KeyManage: 键盘管理器, 收集玩家输入.

Collision: 检测碰撞.

AttackEffect: 攻击效果.

Audio: 音效.

Main.js

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

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

Ai.js

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

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

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

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

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

  1. If ( isJump ){       
  2. If ( move ) return false;       
  3. }else if( isAttack ){       
  4. If ( move || jump ) return false;       
  5. }else if ( fall_down ){       
  6. If ( move || jump || attack ) return false;       
  7. }...   

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

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

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

原文链接:http://www.alloyteam.com/2012/05/html5-streetfighter-demo/

【编辑推荐】

 
 
【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

计算机网络原理与实践标准教程

本书深入浅出地阐述了计算机网络技术的基本原理,介绍了当前常用的先进网络技术以及网络的实际应用知识。全书主要内容包括计算机网络概述、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊