用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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
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 什么是PEAR?(第三篇)
2009/03/19 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
婚庆司仪主持词
2014/03/15 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS