经典格斗游戏《街头霸王》的Javascript实现

  继 《天机》 之后,这次又山寨了个名为《街斗霸主》的经典格式游戏《街头霸王》的模仿版Demo,花了几个月的业余时间写了这么个东西,算是对目前的技术学习的一种练习吧。

其实这种练习的结果不是很重要,主要是体会其中的过程,虽然大部分的时间是在痛苦中渡过,但也是有很多收获的,同时也暴露出很多技术方面的不足,也为以后的学习明确了一些目标。

技术方面因为考虑到大部分IE用户(而且是非IE9),所以没有用HTML5的canvas,用的div的方式处理的,这样挑战也相对大了一些,

不过确实,性能上还是不理想,IE下的表现还是比较糟糕(特别是IE6。。。恩。。。- -!)。
目前兼容IE6/7/8(理论上也兼容IE9,只是没有测试),safari,FF3.5+(因为FF2.0/3.0不支持水平翻转的样式。。- -!),Chrome,Opera。
自己写了一个小型框架,包括了开发流程和js类库,类库用了OOP Like的方式包了个语法糖衣,看上去还算是像个OOP的样子,不过因为为了追求“优雅”,直接扩展了function的prototype,所以不建议在其它地方使用。
框架开发的整体思路就是用PHP作后端代码合并输出,js代码里用$import去建立了各个代码文件之间的关系,然后页面引用合并js的PHP文件,该模式需要在本地建立一个web服务器才能作测试,并且需要设置hosts为 127.0.0.1 aralork


 

  游戏说明

 

    游戏是一个Demo版本,实现了核心的整体流程。游戏分为“单人游戏”模式、“双人对战”模式和“练习模式”三种玩法,不过其实实现都是一样,只是改改初始化的参数而已,挺坑爹的。。。

    游戏只需要键盘操作,不需要鼠标,

    菜单的操作是方向键移动,Enter键选择,ESC键取消;

    玩家1的操作:

       上:W,下:S,左:A,右:D,拳:J / K / L,腿:U / I / O

     玩家2的操作:

      上:↑,下:↓,左:←,右:→,拳:小键盘 1 / 2 / 3,腿:小键盘 4 / 5 / 6

    这里的 ↑ ↓ ← → 代表方向键。


 

 

  游戏截图

 

   

 

   

 

  其它说明

 

    目前游戏还有很多BUG,所以玩的时候要有心理准备,不要被怪异的情况所震惊。。。    

           游戏里的素材取自于CAPCOM公司的《街霸II》,版权归CAPCOM公司所有。

           大家有什么问题都可以在这里回复,欢迎大家拍砖,谢谢。

 

 

 

    游戏演示地址

 

    完整源代码下载

 

 

 

      更新记录

            [2011.04.11 23:30]

                解决Chrome下一直Loading的问题

                处理了被对手逼近角落时连续攻击无法还手的问题

 

posted @ 2011-04-11 00:00 随机 阅读(4585) 评论(76) 编辑 收藏

 回复 引用 查看   
#1楼 2011-04-11 00:08 assiwe      
厉害
 回复 引用 查看   
#2楼 2011-04-11 00:08 长空无忌      
stack overflow at line 1
 回复 引用 查看   
#3楼 2011-04-11 00:13 梦想(山边小溪)      
厉害,支持一下!
 回复 引用 查看   
#4楼 2011-04-11 02:08 zagelover      
很强,学习一下!
 回复 引用 查看   
#5楼 2011-04-11 03:09 机微网      
牛JB。
 回复 引用 查看   
#6楼 2011-04-11 06:56 ckd      
chrome 貌似不行哦

IE8打开了,进步了游戏 js错误


 回复 引用 查看   
#7楼 2011-04-11 07:53 笨笨滴李煜      
游戏很不错,但是AI太低了,发现一个必杀,把对方逼到墙角,站着踢一脚,蹲下扫一脚,等对方起来然后重复,一直无解!
 回复 引用 查看   
#8楼 2011-04-11 08:22 宁涛      
强!
看看先~

 回复 引用 查看   
#9楼 2011-04-11 08:25 里奥特      
Chrome 一直 Loading
 回复 引用 查看   
#10楼 2011-04-11 08:44 银光小子      
太牛逼了 JavaScript的 要西
 回复 引用 查看   
#11楼 2011-04-11 08:50 Virus-BeautyCode      
这都可以搞游戏!!!
哥太强了!!

 回复 引用 查看   
#12楼 2011-04-11 09:06 huyong      
强。
 回复 引用 查看   
#13楼 2011-04-11 09:09 时光的羁绊      
哥太强了!!
 回复 引用 查看   
#14楼 2011-04-11 09:16 冰封e族      
膜拜一下。。。
 回复 引用 查看   
#15楼 2011-04-11 09:27 +-+      
我以为是用javascirpt实现了人物的运动和骨骼....,可瞎我一跳。。。。一看gif......
否则的话真是NB,可以为很多大公司开发游戏图像引擎了。。。。。

 回复 引用 查看   
#16楼 2011-04-11 09:28 初级小强      
太强大了 值得学习
 回复 引用 查看   
#17楼 2011-04-11 09:46 深月蓝      
好帖,顶起
膜拜中.......

 回复 引用 查看   
#18楼 2011-04-11 09:58 Anthony-Kidd      
丁丁 丁丁 丁丁 丁丁 顶楼主~~~~~ 强悍
 回复 引用 查看   
#19楼 2011-04-11 10:29 Gross      
介于牛A与牛C之间的人 膜拜!
 回复 引用 查看   
#20楼 2011-04-11 10:30 Gross      
把对手逼到死角 然后蹲下一直出拳 也无解
 回复 引用 查看   
#21楼 2011-04-11 10:46 think_fish      
太神啦……
 回复 引用 查看   
#22楼 2011-04-11 10:50 Tony Zhou      
good job
 回复 引用 查看   
#23楼 2011-04-11 10:53 peace      
木小键盘不玩不了? 笔记本没小键盘
 回复 引用 查看   
#24楼 2011-04-11 11:26 KKcat      
firefox 运行正常,膜拜下,太强了。
 回复 引用 查看   
#25楼 2011-04-11 11:31 超级奶崽      
太猛了吧
 回复 引用 查看   
#26楼 2011-04-11 12:00 aspnetx      
IE9一直在LOADING...
 回复 引用 查看   
#27楼 2011-04-11 12:04 ppchen(陈荣林)      
太牛了哇,顶顶顶顶顶
 回复 引用 查看   
#28楼[楼主] 2011-04-11 12:19 随机      
@ckd
呃。。。chrome和IE8测试是没问题的,要不多刷几下试试??

 回复 引用 查看   
#29楼[楼主] 2011-04-11 12:19 随机      
@笨笨滴李煜
恩。。AI写得很简单,现在有很多必杀的方式。。。——!

 回复 引用 查看   
#30楼[楼主] 2011-04-11 12:20 随机      
@+-+
要做成骨骼的话,真得要canvas了。。

 回复 引用 查看   
#31楼[楼主] 2011-04-11 12:22 随机      
@peace
笔记本的话,建议外接一个键盘吧,还可以保护下笔记本的键盘。。。

 回复 引用 查看   
#32楼[楼主] 2011-04-11 12:30 随机      
@aspnetx
呃。。。我这边测试了下IE9可以运行。。。可以尝试多刷一下。。。- -!

 回复 引用 查看   
#33楼 2011-04-11 12:33 失落小羊      
强大 佩服
 回复 引用 查看   
#34楼 2011-04-11 12:40 ryanding      
nice
 回复 引用 查看   
#35楼 2011-04-11 14:24 ice_点点      
太牛了!! 真是牛人啊!!
 回复 引用 查看   
#36楼 2011-04-11 15:52 持刀女      
牛人哥,有.NET版的吗?
 回复 引用 查看   
#37楼 2011-04-11 16:38 pandaren      
让曾经的街霸铁杆来测测你的代码 hehe ..
 回复 引用 查看   
#38楼 2011-04-11 16:47 luckuny      
很好很强大
 回复 引用 查看   
#39楼 2011-04-11 17:19 坎普利特      
留名 下班后玩玩~~~
 回复 引用 查看   
#40楼 2011-04-11 17:48 MNight      
js做成这样,膜拜ing……
 回复 引用 查看   
#41楼 2011-04-11 19:02 樊勇      
Chrome ....

Loading. . . .

 回复 引用 查看   
#42楼 2011-04-11 20:14 YaoTong      
safari 完美运行.

运行在Android iPhone的浏览器上才素正道.

 回复 引用 查看   
#43楼[楼主] 2011-04-11 20:29 随机      
@樊勇
chorme下之前有BUG,现在可以了。。

 回复 引用 查看   
#44楼 2011-04-11 20:51 狼Robot      
厉害,学习了.多谢楼主分享.
 回复 引用 查看   
#45楼 2011-04-11 22:14 赌神      
真的很不错啊
 回复 引用 查看   
#46楼 2011-04-11 22:25 huanying99      
好强大~~~
 回复 引用 查看   
#47楼 2011-04-11 22:28 zsuxiong      
`经典的东西,支持楼主
 回复 引用 查看   
#48楼 2011-04-11 22:29 注册表      
强大呀,虽然不懂js
 回复 引用 查看   
#49楼 2011-04-11 22:30 huangxincheng520      
我是玩街头霸王长大的
 回复 引用 查看   
#50楼 2011-04-11 22:57 zhe      
美工都是你自己做的??太牛了!
 回复 引用 查看   
#51楼 2011-04-11 23:08 zhe      
load.js是加载js的入口,也需要被index.php引用,并且要放在main.php引用之后??这是什么意思啊?
 回复 引用 查看   
#52楼[楼主] 2011-04-11 23:41 随机      
@Gross
现在已经处理了这个问题了。

 回复 引用 查看   
#53楼[楼主] 2011-04-11 23:41 随机      
@持刀女
呃。。。后端的功能就是输出个flash容器,主要都是js处理的。

 回复 引用 查看   
#54楼[楼主] 2011-04-11 23:43 随机      
@zhe
就是要这样引用
<script charset="utf-8" type="text/javascript" src="main.php"></script>
<script charset="utf-8" type="text/javascript" src="load.js"></script>

先引用main.php,再引用load.js

 回复 引用 查看   
#55楼 2011-04-12 00:01 alxc      

 回复 引用 查看   
#56楼 2011-04-12 09:48 简单有效:)      
强!
 回复 引用 查看   
#57楼 2011-04-12 09:52 白吉他      
chrome一直loading,IE9 OK
 回复 引用 查看   
#58楼 2011-04-12 09:55 - -||      
大神
求原理以及AI设计

 回复 引用 查看   
#59楼 2011-04-12 15:59 tchong      
我顶……
 回复 引用 查看   
#60楼 2011-04-12 17:54 greatghoul      
可,我表示崇拜呀,很早以前就玩过阁下的天机,很是给力。
 回复 引用 查看   
#61楼[楼主] 2011-04-12 22:13 随机      
@- -||
原理就是用多张动作的图片拼接成一张gif,然后让其在一定时间间隔内显示固定宽度的一部分图片形成动画的效果
碰撞检测是针对动画的每帧生成一个矩形对象(div),然后计算两个矩形对象的位置是否有重叠
AI的实现是为对手的每个动作配置一组反应动作,然后随机调用,AI的实现其实还是很粗劣的,还有改进的地方

 回复 引用 查看   
#62楼[楼主] 2011-04-12 22:13 随机      
@greatghoul
谢谢支持。。

 回复 引用 查看   
#63楼 2011-04-12 23:43 乱舞春秋      
太给力了!实在是佩服!源码下走了,好好研究
 回复 引用 查看   
#64楼 2011-04-13 21:48 影语者      
牛B,膜拜
 回复 引用 查看   
#65楼 2011-04-14 08:56 现代僵尸      
先下源码,再来研究
 回复 引用 查看   
#66楼 2011-04-14 11:44 PPBoy      
膜拜
 回复 引用 查看   
#67楼 2011-04-15 16:59 E猫      
先研究下源码。谢谢了。灰常给力
 回复 引用 查看   
#68楼 2011-04-15 17:10 E猫      
找了半天没有找到$import方法在哪里定义的
 回复 引用 查看   
#69楼[楼主] 2011-04-15 22:05 随机      
@E猫
$import方法没有在js中定义,该关键字会被PHP解析
在main.php中有$import的正则匹配

 回复 引用 查看   
#70楼 2011-04-15 22:11 卖身葬小强      
演示可以玩,下载到本地后chrome和IE6还是一直loading...
 回复 引用 查看   
#71楼 2011-04-18 13:38 深蓝色的云      
难道就就是传说中的牛逼~~~
360浏览器打开后也是一直Loading...

 回复 引用 查看   
#72楼 2011-04-19 14:29 哲&思      
真强大!
 回复 引用 查看   
#73楼 2011-04-20 23:24 LingzhiSun      
挺好玩的!
 回复 引用 查看   
#74楼 2011-05-10 13:42 E猫      
老大,我在你的下载包中找了半天,怎么没有找到$import类呀。能否公开这个类吗。谢谢呀
 回复 引用 查看   
#75楼[楼主] 2011-05-16 21:31 随机      
@E猫
$import没有在js中实现
是在main.php中的
if(preg_match('/^\s*\$import\(["\'](.*)["\']\)/',$line,$rets))
这里正则匹配的

 回复 引用 查看   
#76楼 2011-07-01 08:26 潜龙先生      
神人