用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的动态删除Table表格的行和列的代码
May 12 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vue前后分离调起微信支付
Jul 29 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 Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
使用JS动态显示文本
2017/09/09 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
Python类的用法实例浅析
2015/05/27 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
网页美工求职信
2014/02/15 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
个人查摆剖析材料
2014/10/04 职场文书
法院答辩状格式
2015/05/22 职场文书