用js重建星际争霸


Posted in Javascript onDecember 22, 2006

演示地址

    http://www.script8.com/works/sc/index.htm

 

背景介绍

对很多人来说,javaScript是一种颇为神秘的语言,这种语言由浏览器解析,可以实现很复杂的功能,但在实际中又使用甚少。在以相对定位为基础的网站体系中,js并不是必不可少的,最早的浏览器并不支持js,只需使用纯静态的html,也能建立功能完备的网站。对于页面开发人员来说,使用js的时候估计也就是用于数据合法性检查而已。近年来,随着ajax概念崛起,js的使用有所增加,不过除了web邮箱等少数工具型的网站之外,其作用仍然是辅助性的。

实际上,js作为最流行的脚本语言,功能是非常强大的,笔者就曾经利用js来模拟星际争霸。大家都知道,星际争霸是即时战略游戏史上的里程碑,在玩家心目中的地位是不言而喻的,泡在各种各样的网吧里玩星际曾经是笔者生活的一部分。仅凭一腔热血,我就着手用js来开发星际,这是一次坚难的历程,充满了挫折,也享受到了乐趣,最后能够完成,却是开始时我也没有奢望到的。

js星际源码最早发布于无忧脚本的论坛里,得到了很多网友的好评,让我感动之余,也唯有更加努力。通过这次开发,我的js开发技术有了很多提高,还认识了许多喜欢js开发的朋友,幸哉!js星际现在的存放地址是http://www.script8.com/works/sc/index.htm,有兴趣的朋友欢迎参与讨论。

解决方案

寻径算法是游戏的基础,也是运算量最大的部分。我没有使用A*算法,因为对脚本来说开销太大了,而是自主开发一种新算法,称之为交点法,特点是线性寻径,运算量比较小,缺点是不能保证结果为最短路径。交点法的基本思路简述如下:

1.从起点到终点画直线,与障碍物相交时,总会出现对应的穿入点和穿出点。

2.从穿入点的两个方向同时绕行障碍物,选择先到达穿出点的路线作为前进路线,这样就得到了一条比较原始的路线。

3.对路线进行优化,判断两点是否形成通路,删除冗余点,得到最终的路径。

寻径时大量使用了判断是否障碍点的运算,一般的做法是遍历数组,分别比较才能得到结果。我把障碍点序列变成一个长字符串,通过字符串包含关系就可以判断出当前点是否障碍点,这样就减少了很多运算量。

js星际所实现的,相当于是星际争霸的开场部分,即采矿、制造建筑物和生产士兵,战斗部分略有涉及。在编码之前,就需要有许多准备工作,光是图片的制作就非常烦锁,需要万分的耐心才行。另外,我还用hta技术开发了一个地图编辑器,用于生成地图数据。

游戏里的控制面板比较精简,缩略地图和选择信息集成到右上角的一个小面板里,其他部分都属于游戏场景。每个移动单位有8个方向,以枪兵为例,需要用24张图片来表现站立和走动各种姿态。这些图片都集成在一张大图里,根据走动或站立情况,显示其中的对应部分,比如在走动时,判断出走动方向,一边移动枪兵位置,一边三张图片轮显,表现出走动的情形。

游戏初始化时,载入地图数据,根据不同的建筑物属性,一方面生成场景,另一方面生成障碍物列表,用于寻路之用。默认情况下,地图上有几个矿工,圈选后,点击目标可以自主行走,根据游戏要求,如果点击到的是矿石,就会在矿区和总部间来回走动,每次往返都会增加矿藏量。

至于哪一种建筑物能生产什么兵,每个兵需要多少资源,建筑物的生产顺序是什么,这些相对来说都比较容易,无非是做更多的图片处理和更多的逻辑判断而已,限于篇幅就不详细介绍了。

经验分享

不用太担心功能的实现,因为js已经非常完善了,可以随心所欲地进行各种运算,使用绝对定位的机制,可以轻松创建界面,再利用时钟模拟多线程,实时移动图片,就可以表现动画了,问题主要体现在速度和性能上。因为js作为一种脚本语言,其计算性能无疑是先天不足的,同时浏览器也不支持directX和openGL等硬加速,动画能力无法另人满意。只有通过减轻运算量,合理分配动画资源,才能保证游戏的平滑运行。js星际的开发,正是处处遵循了这个原则,能简则简,能省则省,非常节约地使用各种资源,才最终得以实现。

千万不要在游戏中使用滤镜技术,特别是动态滤镜,滤镜渲染时会占用大量的cpu,在cpu占用达到80%以上时,游戏就会感觉比较卡。这一点和flash做的同类程序有明显区别,即使cpu占用率接近100%,flash程序仍然能保持相当的平滑。

凭心而论,客户端的游戏开发,应该还是以flash为主。与之相比,js的好处是可与网站无缝连接,也不需要安装插件。当然了,只要是好玩实用的游戏,即使是用js开发的,也未尝不可。

Javascript 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
ExtJS下grid的一些属性说明
Dec 13 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
js版本A*寻路算法
Dec 22 #Javascript
优化JavaScript脚本的性能的几个注意事项
Dec 22 #Javascript
网页设计常用的一些技巧
Dec 22 #Javascript
用JavaScript脚本实现Web页面信息交互
Dec 21 #Javascript
在 IE 中调用 javascript 打开 Excel 表
Dec 21 #Javascript
用js+xml自动生成表格的东西
Dec 21 #Javascript
FCK调用方法..
Dec 21 #Javascript
You might like
php发送post请求的三种方法
2014/02/11 PHP
php实现微信公众号无限群发
2015/10/11 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
表单提交验证类
2006/07/14 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
pycharm安装和首次使用教程
2018/08/27 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
周年庆典邀请函范文
2014/01/24 职场文书
水电工岗位职责
2014/02/12 职场文书
租房协议书
2014/04/10 职场文书
给老师的感谢信
2015/01/20 职场文书
开除通知书范本
2015/04/25 职场文书
表扬信范文
2015/05/04 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
python的变量和简单数字类型详解
2021/09/15 Python