零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2016 am 09:09 AM

adminh

了解上三篇的内容请点击：

html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一)

http://www.html5cn.org/article-1737-1.html

html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄

http://www.html5cn.org/article-1738-1.html

html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现

http://www.html5cn.org/article-1740-1.html

首先，本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇，来实现游戏的脚本化，和利用游戏脚本实现地图场景的切换。如下应该是我们先了解的。

一，什么是游戏脚本

简单说，游戏脚本就是依据一定的格式编写的可执行文件，游戏可以通过脚本中自定义的语句来执行相应的逻辑。

二，为什么要将游戏脚本化

游戏脚本，可以令我们的游戏动态化，比如当我们开发了一款rpg游戏，里面的剧情，事件以及地图等，我们如果将这些全部写进程序里，当然是可以的，但是一旦出现问题，哪怕几个错别字，我们需要先将这几个错别字改正，并且将整个程序重新编译发布一遍，这个过程是相当令人反感的，因为如果游戏的程序跟着游戏的内容不断进行修改的话，那只会使你的程序越来越复杂。但是如果我们将这些可重复的数据，都定义到游戏程序之外的文件里面，当游戏引擎开发完毕，我们的游戏通过读取这些外部文件，来执行相应的剧情和事件，那么，像上述当我们的游戏出现了问题，我们只需要改动这些外部文件就可以了，并不需要重新编译整个程序，这样便使得我们的游戏开发，变得便利简洁。

*当然，对于html5来说，不需要重新编译程序，但是对于rpg的游戏来说，脚本还是必不可少的，因为游戏的剧本不可能全都写到程序里。

三，如何来实现游戏的脚本化

好了，接下来，先来考虑以什么形式来制作游戏的脚本，我们有多种选择，可以选择xml，可以选择json，也可以选择纯自定义语法，

这次，我为了省事，选用比较方便处理的json，因为javascript可以很轻松的处理json数据。

目前游戏中实现的内容有，地图场景添加，游戏人物添加，以及人物对话的实现。那么，我在设计游戏脚本的时候，必须包含这些数据，然后才能将这三项功能用脚本来控制。

首先看下面的json

var script = {
stage01:{
map:[
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],
[1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],
[1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],
[1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],
[1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],
add:[
{chara:"player",img:"mingren",x:5,y:6},
{chara:"npc",img:"npc1",x:7,y:6},
{chara:"npc",img:"npc1",x:3,y:3}],
talk:{
talk1:[
{img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},
{img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}
],
talk2:[
{img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},
{img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}
]
}
}
};

复制代码

我将脚本定义成了变量，实际游戏制作的时候，脚本应该储存到一个外部文档当中，在这里我只是讲解一下理论，如何完善那是后话了。

可以看到，json中，包含了地图相关的map数组和mapdata数组，添加人物的相关数据，以及对话的数组。这样，我在游戏显示的时候，只需要读入json数据，然后根据这些内容来显示游戏画面就可以了，定义一个initScript函数来进行这些操作。

function initScript(){
//地图位置初始化
mapLayer.x = 0;
mapLayer.y = 0;
//地图层初始化
mapLayer.removeAllChild();
//人物层初始化
charaLayer.removeAllChild();
//效果层初始化
effectLayer.removeAllChild();
//对话层初始化
talkLayer.removeAllChild();
//地图数据获取
map = stage.map;
mapdata = stage.mapdata;
//对话数据获取
talkScriptList = stage.talk;
//添加地图
addMap(0,0);
delMap();
//添加人物
addChara();
}

复制代码

removeAllChild方法是legendForHtml5Programming引擎独有的方法，可以用来移出LScript显示层上的所有子对象，从而实现本游戏中各个显示层的初始化工作。

修改一下addChara方法，如下

//添加人物
function addChara(){
var charaList = stage.add;
var chara,charaObj;
for(var i=0;i ;i++){
charaObj = charaList[i];
if(charaObj.chara == "player"){
//加入英雄
bitmapdata = new LBitmapData(imglist[charaObj.img]);
chara = new Character(true,i,bitmapdata,4,4);
player = chara;
}else{
//加入npc
bitmapdata = new LBitmapData(imglist[charaObj.img]);
chara = new Character(false,i,bitmapdata,4,4);
}
chara.x = charaObj.x * 32;
chara.y = charaObj.y * 32;
charaLayer.addChild(chara);
}
}

复制代码

即，根据json脚本中的add数组，来添加游戏中的人物。

好了，运行一下游戏，可以看到，游戏正常显示了，和之前一模一样，实现了同样的功能。

四，利用游戏脚本实现地图的切换

为了让大家看到游戏脚本的便利性，现在利用脚本实现游戏中的场景切换。

将json脚本修改如下

var script = {
stage01:{
map:[
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],
[1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],
[1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],
[1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],
[1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],
add:[
{chara:"player",img:"mingren",x:5,y:6},
{chara:"npc",img:"npc1",x:7,y:6},
{chara:"npc",img:"npc1",x:3,y:3}],
talk:{
talk1:[
{img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},
{img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}
],
talk2:[
{img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},
{img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}
]
},
jump:[
{at:{x:6,y:5},to:"stage02"}
]
},
stage02:{
map:[
[0,0,1,2,2,2,2,2,2,2,2,1,0,0,0],
[0,0,1,3,5,5,1,5,5,5,5,1,0,0,0],
[0,0,1,80,4,4,1,80,4,4,4,1,0,0,0],
[0,0,1,80,4,4,1,80,8,7,8,1,0,0,0],
[0,0,1,80,4,4,5,81,4,4,4,1,0,0,0],
[0,0,1,2,2,2,6,4,4,4,4,1,0,0,0],
[0,0,1,3,5,5,81,4,4,4,4,1,0,0,0],
[0,0,1,80,4,4,4,4,4,4,9,1,0,0,0],
[0,0,1,2,2,2,2,6,2,2,2,1,0,0,0]],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,1,0,0,1,0,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,1,1,1,1,0,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,1,1,1,1,1],
[1,1,1,1,1,1,1,0,1,1,1,1,1,1,1]],
add:[
{chara:"player",img:"mingren",x:7,y:8},
{chara:"npc",img:"npc1",x:8,y:3},
{chara:"npc",img:"npc1",x:10,y:3}],
talk:{
talk1:[
{img:"m",name:"鸣人",msg:"你们在干什么啊？"},
{img:"n",name:"黑衣忍者甲",msg:"我们在喝茶。"}
],
talk2:[
{img:"n",name:"黑衣忍者乙",msg:"我们在喝茶，你不要打扰我们。"},
{img:"m",name:"鸣人",msg:"....."}
]
},
jump:[
{at:{x:7,y:8},to:"stage01"}
]
}
};

复制代码

可以看到，我添加了stage02，即第二个场景，并且在脚本里引入了jump节点来控制游戏场景的切换，其中jump中的at表示游戏主人公移动到达的坐标，to表示到达这个坐标后跳转到的画面名称。这里的jump之所以是数组，是因为一个场景也可以跳转到其他多个场景。

上面的脚本实现了stage01和stage02两个场景的互相跳转。

为了读取这个jump，以及实现跳转，我们需要在游戏主人公移动一个步长之后，判断一下是否应该跳转了，修改Character类的onmove方法

/**
* 开始移动
**/
Character.prototype.onmove = function (){
var self = this;
//设定一个移动步长中的移动次数
var ml_cnt = 4;
//计算一次移动的长度
var ml = STEP/ml_cnt;
//根据移动方向，开始移动
switch (self.direction){
case UP:
if(mapmove){
mapLayer.y += ml;
charaLayer.y += ml;
}
self.y -= ml;
break;
case LEFT:
if(mapmove){
mapLayer.x += ml;
charaLayer.x += ml;
}
self.x -= ml;
break;
case RIGHT:
if(mapmove){
mapLayer.x -= ml;
charaLayer.x -= ml;
}
self.x += ml;
break;
case DOWN:
if(mapmove){
mapLayer.y -= ml;
charaLayer.y -= ml;
}
self.y += ml;
break;
}
self.moveIndex++;
//当移动次数等于设定的次数，开始判断是否继续移动
if(self.moveIndex >= ml_cnt){
//一个地图步长移动完成后，判断地图是否跳转
if(self.isHero && self.moveIndex > 0)checkJump();
self.moveIndex = 0;
//一个地图步长移动完成后，如果地图处于滚动状态，则移除多余地图块
if(mapmove)delMap();
//如果已经松开移动键，或者前方为障碍物，则停止移动，否则继续移动
if(!isKeyDown || !self.checkRoad()){
self.move = false;
return;
}else if(self.direction != self.direction_next){
self.direction = self.direction_next;
self.anime.setAction(self.direction);
}
//地图是否滚动
self.checkMap(self.direction);
}
};

复制代码

我添加了一行

if(self.isHero && self.moveIndex > 0)checkJump();

复制代码

表示，移动完后如果该人物是游戏主人公则进行跳转判断

所以，我们需要添加一个checkJump方法

//游戏场景跳转测试
function checkJump(){
var jump = stage.jump;
var jumpstage;
for(var i=0;i ;i++){
jumpstage = jump[0];
if(player.x == jumpstage.at.x * 32 && player.y == jumpstage.at.y * 32){
//获取该场景脚本数据
stage = script[jumpstage.to];
//开始跳转
initScript(stage);
return;
}
}
}

复制代码

好了，一切都很简单吧，运行游戏看看效果吧,小鸣人走到地图的小房门的部分是，场景发生跳转

游戏测试URL：

http://fsanguo.comoj.com/html5/rpg5/index.html

本次更新源代码下载：

http://legend-demo.googlecode.com/files/rpg5.zip

本文转自个人博客：http://blog.csdn.net/lufy_legend

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

uniapp如何实现小程序和H5的快速转换Oct 20, 2023 pm 02:12 PM

uniapp如何实现小程序和H5的快速转换，需要具体代码示例近年来，随着移动互联网的发展和智能手机的普及，小程序和H5成为了不可或缺的应用形式。而uniapp作为一个跨平台的开发框架，可以在一套代码的基础上，快速实现小程序和H5的转换，大大提高了开发效率。本文将介绍uniapp如何实现小程序和H5的快速转换，并给出具体的代码示例。一、uniapp简介unia

哪个版本更稳定：win1121h2还是22h2？Jan 04, 2024 am 08:53 AM

win1121h2和22h2两个版本相比较的话还是后者22h2更加稳定一点，22h2的功能也是更加多一点的，相较于之前的21h2，很多功能都得到的提升一起来看看吧。win1121h2和22h2哪个稳定：答：22h2更加稳定win1121h2和22h2两者相比较的话22h2更加稳定一些。22h2增加了很多的功能，而且21h2的问题也在22h2中得到了改善。22h2更新功能：开始菜单中的应用程序文件夹。开始菜单中可调整的固定区域。在任务栏上拖放。焦点辅助与通知中心实现整合。新的“聚光灯”墙纸功能。新

springboot admin监控的作用和使用方法是什么May 25, 2023 pm 06:52 PM

适用场景：1、项目规模不大2、用户量不是很大、并发要求不强3、无专门运维力量4、精致的团队规模对于一些常规的项目，或者企业职责分工不是非常明确的单位来说。往往一个系统从需求到设计，开发，测试到最终上线，运维。往往80%的任务由开发团队来完成。由此，开发人员除了要实现系统的功能，还要为客户进行问题咨询答疑以及生产问题解决。试想，一个应用上线后，没有任何监控措施。跟开着一辆没有任何仪表盘的汽车一样，这样上路，任何人都没有安全感。如何在极简和追求效率上做平衡是一件特别值得思考的事情。一、Springb

win101909和21h2比较哪个更好？Dec 26, 2023 pm 02:01 PM

Windows101909目前被认为是最为稳定可靠的版本之一，然而令人感到遗憾的是,该版本的服务支持已于近期结束。而21H2则是一个比较稳定的版本，其实从实际情况来看，二者都是很不错的选择。win101909和21h2哪个好答：1909更稳定，21h2则会更安全。在目前的环境中，1909仍然被普遍认为是最为稳定可靠的版本之一。不过Win101909版本已于2021年5月11日正式停止服务WindowsServer21h2则致力于为广大用户提供更多专业化的IT功能支持。1、经过众多用户的实际测试反

哪个是比较好的选择：win1123h2和22h2？Dec 28, 2023 pm 03:09 PM

Windows11系统中23h2版本和22h2版本分别先后于2023年和2022年发布，一般来说，系统的更新是越来越好，小编也认为23h2的版本比22h2的版本要更好一些。win1123h2和22h2哪个更好答：win1123h2更好。据介绍，win1123h2是22h2到下一个版本的累积的版本更新，而且它们都是相同的平台。这也就意味着这两个版本之间是没有任何兼容性问题的出现的，建议大家及时更新一下。win1123h2版本给我们带来了许多实用的功能，比如说任务栏窗口应用的永不合并的模式。还有更加

您需要admin提供的权限才能对此文件进行更改怎么解决Jul 26, 2023 am 10:56 AM

您需要admin提供的权限才能对此文件进行更改解决方法：1、在登录界面选择管理员账户并输入密码后，就可以顺利对文件进行修改了；2、可以通过右键点击文件选择“以管理员身份运行”的方式解决；3、修改文件权限，右键点击文件，选择“属性”，点击“安全”选项卡，然后点击“编辑”按钮，选择自己的用户名，然后勾选“完全控制”选项；4、利用命令提示符解决问题；5、设置UA权限。

如何使用Flask-Admin实现后台管理界面Aug 03, 2023 pm 11:30 PM

如何使用Flask-Admin实现后台管理界面背景介绍：随着网站和应用程序的发展，后台管理界面越来越重要。在开发过程中，我们经常需要一个方便快捷的后台管理界面来管理数据、用户和其他重要信息。Flask-Admin是一个功能强大且易于使用的Flask扩展，可以帮助我们快速实现后台管理界面。Flask-Admin是基于Flask和SQLAlchemy的一个开源项

解决无法获得Win11 23H2更新的问题Jan 14, 2024 pm 09:24 PM

大家最近都想要更新Win11的23H2版本，但是一小部分的用户至今还没有收到更新推送的消息，可能是后台更新进度中的某个进程卡住了，过段时间就好了。Win11更新获取不到23H2怎么办方法一：耐心等待如果用户查看电脑的更新升级情况，发现它卡住了，我们可以等待一段时间，系统就会继续更新的。方法二：清除更新的缓存如果用户之前更新过系统，而且未清除过更细腻的缓存就会影响23h2的正常更新，可以手动清理一下。方法三：使用镜像安装推荐大家到微软的官方网站去下载win1123h2的镜像文件，然后执行更新该文件

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、