HTML5另类塔防游戏 -『三国战线』发布

关于本作

游戏介绍

本游戏是一款另类塔防游戏。本作以三国这段历史为题材,提供了从颍川之战到官渡之战,官渡之战到夷陵之战,夷陵之战到五丈原之战等15个关卡。在每个关卡中,你会控制一名三国武将与出现的敌军进行交战以此保护你的主公;同时,你还可以召唤出你的友军,与你并肩作战。
除此之外,本作还提供了人物对话,以及火计、水攻等计谋,使游戏可玩度更高。

操作说明

游戏中,你只需要点击屏幕左右两侧,使你扮演的角色左右移动,当敌军进入你的攻击范围后会自动攻击。你还可以通过点击下方的人物头像进行召唤队友。其他的操作就请各位玩家自己摸索吧~

技术相关

与此前相同,本作依旧是HTML5和Javascript作为开发语言。并且使用了HTML5游戏引擎lufylegend.js。在发布exe执行程序时,使用的是NW.js。以下会给出两款库件的官方地址,以及文档及教程地址:

lufylegend.js官方地址:https://lufylegend.com/lufylegend
lufylegend.js文档地址:http://lufylegend.com/api/zh_CN/out/index.html

NW.js官方地址:http://nwjs.io/

游戏截图

游戏中的基本界面

游戏中的战场

对话与计谋

游戏下载

由于文件过大,所以我把它保存到新浪微盘里了
下载地址:http://vdisk.weibo.com/s/ushEc4hVGHFoZ

后记

本来打算制作为一款手机端APP的,哪知道由于Canvas渲染效率本身就不高,再加上界面元素过多和一开始就没重视优化等因素,最后只有发布到PC端了,为了做得正式一点,所以就用NW.js把游戏打包成exe执行文件。所以你可以发现,游戏里的很多界面设计处处都在考虑手机端。比如说游戏里的按钮就都做得很大,以方便手机端玩家点击。
这款游戏做了大致有3个月左右,实质上,游戏主体部分早在寒假(大约是春节后的几天)里就已经完成了,后来要上学了,所以进度就慢下来了。除此之外,由于后期功能需要拓展和界面需要美化,又引出了许多bug,所以进度就更慢了。最后要做的就是关卡编辑和人物编辑,及编辑关卡脚本和人物攻击、体力等数据,这个工作量就很大了,而且不如拓展功能和美化界面那样有趣。为了途方便,我直接用json作为游戏的脚本,比如说,某一关卡的脚本节选:

{
        name : lang.place.SHOU_CHUN,
        id : "shou_chun",
        location : {
            x : 520,
            y : 380
        },
        backgroundMusicIndex : 2,
        background : "shou_chun_bg",
        backgroundOffset : {
            y : -120
        },
        backgroundHiddenWidth : 150,
        characters : {
            ours : {
                lord : "cao_cao",
                player : "zhang_fei",
                friends : [
                    "guan_yu",
                    "liu_bei",
                    "sun_shang_xiang",
                    "sun_quan",
                    "soldier1"
                ]
            },
            enemies : {
                1 : [
                    "soldier1",
                    "soldier1",
                    "soldier1",
                    "soldier1"
                ],
                2 : [
                    "soldier1",
                    "soldier1",
                    "soldier1",
                    "soldier2",
                    "soldier2"
                ],
                3 : [
                    "han_jin",
                    "soldier1",
                    "soldier1",
                    "soldier2",
                    "soldier2"
                ],
                ......
            },
            rouse : [
                "ji_ling"
            ]
        },
        events : {
            round : [
                {
                    value : 1,
                    instructions : [
                        {name : "addTalk", param : "1"}
                    ]
                },
                ......
            ],
            ......
        },
        talks : {
            1 : [
                {
                    speaker : "cao_cao",
                    side : "ours",
                    content : lang.talk.SHOU_CHUN_1_0
                },
                {
                    speaker : "liu_bei",
                    side : "ours",
                    content : lang.talk.SHOU_CHUN_1_1
                },
                {
                    speaker : "zhang_fei",
                    side : "ours",
                    content : lang.talk.SHOU_CHUN_1_2
                }
            ],
            ......
        },
        unlockLevelList : ["xia_pi"],
        initialMoney : 400,
        ......
    }

这只是节选,整个脚本可能会比这个长一倍左右。再加上没有制作关卡编辑方面的工具,所以纯手工写起来肯定是不大舒服的。不过还好,做了一个人物编辑器,所以在人物编辑方面还是省了不少力气的。
说到这儿,我不禁想起了“衣沾不足惜,但使愿无违”这诗句,也许游戏本身可以称得上“衣不沾”,可是我的初衷还是没有完成呐——并没有作为一款手机游戏发布,而是成为了一款本地游戏——所以说也就“愿有违了”。不得不再次吐槽一下HTML5的效率啊,咋比我解一道数列的题还要慢呢……
不过令人欣慰的是,游戏终究还是发布了~

支持

如果你发现了游戏中的bug或者希望参与游戏后续的开发与测试,你通过以下方式联系我。

邮箱:wangyuehao1999@gmail.com
新浪微博:@Yorhom

最后,欢迎各位来玩我的游戏~

内容索引:脚本资源,HTML,网页游戏,魔塔   运行方法:进入 src 或 build 目录,用浏览器(如IE9)打开 td.html 即可运行。   请注意,IE8不能运行本游戏,你必需按以上要求运行。   相关的技术说明:   1.本游戏完全使用 HTML5 / JavaScript / CSS 实现,没有用到 Flash、SilverLight 等技术。   2.这一个版本没有用到图片,游戏中的所有物品都是使用 HTML5 画出来的。   3.这一个版本部分地方为 IE9 做了专门的优化,可正常运行在 IE9 下。   脚本及资源目录说明:   /build 压缩后的可发布的文件   /screenshorts 屏幕截图   /src 源码   /css 样式表   /js JavaScripts 源文件   /tools 小工具、脚本      作弊方法:为方便测试,本游戏内置了几个作弊方法,如下:   1.增加 100 万金钱:[removed]_TD.cheat="money+";void(0);   2.难度增倍:[removed]_TD.cheat="difficulty+";void(0);   3.难度减半:[removed]_TD.cheat="difficulty-";void(0);   4.生命值恢复:[removed]_TD.cheat="life+";void(0);   5.生命值降为最低:[removed]_TD.cheat="life-";void(0);   在浏览器地址栏输入上面的“[removed]...;”并回车,即可实现作弊。   注意,以上作弊方法主要是为测试设计,正常游戏过程中请酌情使用,否则可能会降低游戏乐趣。   更新历史:   2010-12-29 根据网友建议,增加生命自动恢复功能(每隔 5 波生命恢复 5 点,每隔 10 波生命恢复 10 点)。调整参数,减小了激光枪的射程,增强了重机枪的威力。(v0.1.12)。   2010-12-18 添加新武器“激光枪”(v0.1.8.0)。   2010-12-12 暂停图片资源版本分支的开发,继续优化、开发圈圈版(v0.1.7.0)。   2010-11-28 第一个图片资源版本(v0.2.1.3267)。   2010-11-23 发布 圈圈版(v0.1.6.2970)。   2010-11-14 线上发布第一个版本。   2010-11-11 开始编写这个游戏
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值