用js重建星际争霸

演示地址

    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开发的，也未尝不可。

赞 (0)

相关推荐

  • 用js重建星际争霸

    演示地址     http://www.script8.com/works/sc/index.htm 背景介绍 对很多人来说,javaScript是一种颇为神秘的语言,这种语言由浏览器解析,可以实现很复杂的功能,但在实际中又使用甚少.在以相对定位为基础的网站体系中,js并不是必不可少的,最早的浏览器并不支持js,只需使用纯静态的html,也能建立功能完备的网站.对于页面开发人员来说,使用js的时候估计也就是用于数据合法性检查而已.近年来,随着ajax概念崛起,js的使用有所增加,不过除了web邮

  • HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h

  • php面向对象基础详解【星际争霸游戏案例】

    本文实例讲述了php面向对象基础.分享给大家供大家参考,具体如下: 前言 面向对象博大精深,对于从未接触过得的人,会觉得一头雾水. 学习的资料很多,但大多比较抽象,所以我用经典的游戏-星际争霸来讨论PHP面向对象. 现在假设我们来用PHP开发星际争霸,从而接触PHP面向对象. 注意,为了便于学习,除了特殊说明,否则各部分代码之间没有关联.而且同一件事情往往用的是不同的代码. 另外我也不去考证各个兵种的属性数字,仅仅用来说明. 一.类和对象 如果玩家制造了一个机枪兵,那么我们怎么表示他呢,因为每个

  • php设计模式之抽象工厂模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之抽象工厂模式.分享给大家供大家参考,具体如下: 星际争霸是战略游戏,所以同样的兵种,敌我显示是不同的. 典型的就是鼠标的颜色,点中自己的物体的时候,鼠标颜色变成绿色,点中敌人的物体的时候,鼠标颜色变成红色. 还有就是每个物体的状态,点中自己的物体的时候,状态区显示完整的状态,点中敌人的物体的时候,状态区显示一部分信息. 我们假设只考虑鼠标和人族的运输船,玩家自己的运输船点中后状态区会显示里面装载的部队,而点中敌人的则不会显示里面是否装载部队. 这样我们就有四种对象:

  • php设计模式之代理模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之代理模式.分享给大家供大家参考,具体如下: 星际争霸如果是多人对战模式,就会遇到一个问题:如何降低网络延时和负担. 为了确保数据的一致性,我们应该将每个玩家的发生变化的数据不停的传送到开地图的主机进行保存,一旦任何某个玩家的客户机读取数据,就必须向主机请求数据. 尽管大多数数据是交互性的,即使某个玩家的人口也是这样的,如果某个敌人的部队杀死了这个玩家的一个部队,立即影响了他的人口数量. 不过水晶矿和气矿有所不同,除了玩家自己的建造操作和农民采集,别的玩家影响不了这个

  • php设计模式之建造器模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之建造器模式.分享给大家供大家参考,具体如下: 星际里面有不少的任务关,也可以自己编辑地图,画面上有各种地形,建筑和部队. 这存在一个问题,初始化画面的流程很乱. 待解决的问题:完成初始化画面的工作,同时尽量减少各种绘制细节的耦合. 思路:既然星际的画面由几个部分组成:地图(就是地形和矿产),建筑,部队.那么我们把他们看成是零件,组装起来就是最后的产品(整个画面). 建造器(Builder)模式示例: <?php //规范制造各个零件的接口 interface Bui

  • php设计模式之享元模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之享元模式.分享给大家供大家参考,具体如下: 星际的战斗达到后面,地图里面的部队很多,如果我们把每个兵的图像动画和属性值作为一个对象的话,系统的内存里会消耗极大. 我们在玩的时候会发现,因为星际里面的种族只有三个,其实兵种只有几十个. 虽然每个独立的士兵剩余的血不同,但是同一兵种的图像动画是一样的,即使不同的玩家,只是不同的颜色.比如每个人族的机枪兵. 而且大多数玩家只用到常用的一些兵种,很多时候不会制造所有的兵种. 待解决的问题:把把兵种的图像动画共享. 思路:我们

  • php设计模式之中介者模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之中介者模式.分享给大家供大家参考,具体如下: 星际的升级系统做得比较平衡,不过由于不少兵种和建筑的制造都需要有相关的科技建筑,所以关系比较复杂. 比如一个科学站造出来后,所有的飞机场都可以建造科技球了,但是一旦一个科学站被摧毁,就要看是否还有科学站,否则就得让所有的飞机场都不能造科技球. 我们可以用上次说的观察者模式解决问题,不过由于星际里面的升级相关比较多,似乎比较麻烦. 其实从实质来讲,任何升级一般只要知道某种建筑是否存在就行了,因此我们不必让他们多对多联系,设

  • php设计模式之原型模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之原型模式.分享给大家供大家参考,具体如下: 我们一般用new来新增对象,不过很多时候新增一个对象需要一些工作.而星际里面往往会新增某些类的大量的对象,比如新增很多机枪兵和龙骑. 待解决的问题:我们能否减少new的使用,同时避免需要新增对象的时候,了解对象的类名. 思路:php5提供了克隆方法,我们可以新增一个对象,然后每次需要新增和她同类的对象,克隆他就可以了. 原型(Prototype)模式示例: <?php //机枪兵类 class Marine { //所属的

  • php设计模式之正面模式实例分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之正面模式.分享给大家供大家参考,具体如下: 星际里面的战斗都是在地图上进行的,只要我们可以编辑地图,就可以创造一些新的战役.可是,星际里面的地图绘制相关的代码如果开放出来,估计大多数万家都看不懂,更不要说自己编辑地图了. 待解决的问题:在不了解地图代码的结构下,我们要让玩家自己编辑地图. 思路:对于玩家而言,他熟悉的是水晶矿,高地这些形状,他和系统通过鼠标交互.我们可以设计一个地图编辑器让玩家使用,而无需让他研究绘制地图的细节代码. (实际上暴雪公司就是这样做的,很

随机推荐