您所在的位置:开发 > Web > 技术热点 > HTML 5街头霸王游戏(开放源码)(1)

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

2012-06-07 14:54 Tencent AlloyTeam 腾讯Web前端 字号:T | T
一键收藏,随时查看,分享好友!

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

AD:

试玩地址:  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 页:游戏介绍  第 2 页:具体使用方法



分享到:

热点职位

更多>>

热点专题

更多>>

读书

网络管理员考试全真模拟试题与解析
本书是按照全国计算机技术与软件专业技术资格(水平)考试《网络管理员考试大纲》的要求,参照《网络管理员教程》及近年来考试试

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i