Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过《[代码艺术]17行代码的贪吃蛇小游戏》一文，忽悠了不少求知的兄弟进去阅读，阅读量当然是相当的大。今天我不仿也搞一个这样的教程，目地不在于忽悠人，而在于帮助他人。
先看demo效果图：
测试URL：
http://www.cnblogs.com/yorhom/articles/3157553.html
关注我的blog的人不仿会看到我最近发布了新引擎lufylegendRPG 1.0.0，今天就算来推广一下这个引擎吧。也好让大家见证一下封装的力量。
引擎下载地址：http://www.cnblogs.com/yorhom/archive/2013/06/08/3126534.html
lufylegendRPG 1.0.0发布帖：http://blog.csdn.net/yorhomwang/article/details/9103451
首先为了不让大家质疑，我先声明，我这里说的145代码没有经过压缩和格式优化，只不过这里是没有包含脚本的……毕竟脚本太大了嘛……
（lufy前辈一定心中在想：“你还不是忽悠人，还冤枉我”）
话不多讲，把145行代码上给大家看看：
LSystem.screen(LStage.FULL_SCREEN);
init(50,"mylegend",480,288,main);
LGlobal.setDebug(true);
LRPG.setShortcuts(true); var backLayer,loadingLayer;
var loadData = [
{path:"./js/script.js",type:"js"},
{name:"map",path:"./images/map01.jpg"},
{name:"player",path:"./images/p0.png"},
{name:"npc",path:"./images/p1.png"},
{name:"m",path:"./images/m.jpg"},
{name:"n",path:"./images/n.jpg"},
{name:"talk",path:"./images/back.png"},
{name:"e1",path:"./images/e1.png"},
{name:"e2",path:"./images/e2.png"}
];
var datalist = []; var map,mapData;
var charaList;
var talkContent;
var jumpTo;
var stage; var isJumpMap = false;
var stageObj; var dir = ""; function main(){
loadingLayer = new LoadingSample3();
addChild(loadingLayer); LLoadManage.load(
loadData,
function(progress){
loadingLayer.setProgress(progress);
},
gameInit
);
}
function gameInit(result){
removeChild(loadingLayer);
datalist = result; initLayer(); initScriptData();
stage = script.stage01;
initScript();
addCtrl();
}
function initLayer(){
backLayer = new LSprite();
addChild(backLayer);
ctrlLayer = new LSprite();
addChild(ctrlLayer);
}
function addScene(){
var mapObj = new LTileMap(map,datalist["map"],32,32,mapData);
var stageData = new LSceneData(mapObj,charaList,talkContent);
stageObj = new LScene(stageData);
backLayer.addChild(stageObj); var talkBoardData = new LBitmapData(datalist["talk"]);
var talkBoard = new LBitmap(talkBoardData);
talkBoard.scaleX = 28;
talkBoard.scaleY = 6.2;
talkBoard.x = 100;
talkBoard.y = 70;
talkBoard.alpha = 0.7; stageObj.talk.x = 120;
stageObj.talk.y = 30;
stageObj.setTalkStyle({x:-80,y:20},{x:20,y:55,size:12,color:"lightgray"},{x:20,y:85,size:10,color:"lightgray"},talkBoard,200);
stageObj.addMoveEventListener(LEvent.COMPLETE,function(){
for(var i=0;i<jumpTo.length;i++){
if(isJumpMap == false && stageObj.playerX == jumpTo[i].at.x && stageObj.playerY == jumpTo[i].at.y){
stage = script[jumpTo[i].to];
initScript();
isJumpMap = true;
}
if(isJumpMap == true)isJumpMap = false;
}
});
}
function addCtrl(){
var bitmapdata = new LBitmapData(datalist["e1"]);
var bitmap = new LBitmap(bitmapdata);
bitmap.x = 0;
bitmap.y = 0;
ctrlLayer.addChild(bitmap);
var bitmapdata = new LBitmapData(datalist["e2"]);
var bitmap = new LBitmap(bitmapdata);
bitmap.x = 280;
bitmap.y = 30;
ctrlLayer.addChild(bitmap);
ctrlLayer.x = 40;
ctrlLayer.y = 160; addEvent();
}
function addEvent(){
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);
backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function ondown(event){
if(event.offsetX >= ctrlLayer.x + 40 && event.offsetX <= ctrlLayer.x+80){
if(event.offsetY >= ctrlLayer.y && event.offsetY <= ctrlLayer.y+40){
dir = "UP";
}else if(event.offsetY >= ctrlLayer.y+80 && event.offsetY <= ctrlLayer.y+120){
dir = "DOWN";
}
}else if(event.offsetX >= ctrlLayer.x && event.offsetX <= ctrlLayer.x+40){
dir = "LEFT";
}else if(event.offsetX >= ctrlLayer.x+80 && event.offsetX <= ctrlLayer.x+120){
dir = "RIGHT";
}
}
function onup(event){
dir = "";
if(event.offsetX >= ctrlLayer.x + 280 && event.offsetX <= ctrlLayer.x+330){
if(event.offsetY >= ctrlLayer.y+40 && event.offsetY <= ctrlLayer.y+100){
stageObj.startTalk();
}
}
}
function onframe(){
switch(dir){
case "UP":
stageObj.movePlayer(LPlayerMove.UP);
break;
case "DOWN":
stageObj.movePlayer(LPlayerMove.DOWN);
break;
case "LEFT":
stageObj.movePlayer(LPlayerMove.LEFT);
break;
case "RIGHT":
stageObj.movePlayer(LPlayerMove.RIGHT);
break;
}
}
可以看到，代码是还是老样子，没有一点压缩。其实这里面大家没有看到一点数据是因为我把数据放在了脚本里，脚本可以是一种特定格式的语言，可以用自定义的，比如像lufy前辈的L#。当然在js里也可以用xml和json，json比较方便，所以这次就选择了它，里面的代码如下：
var script;
function initScriptData(){
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,17],
[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,0],
[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",data:datalist["player"],row:4,col:4,speed:3,x:5,y:6},
{chara:"npc",talkIndex:1,data:datalist["npc"],row:4,col:4,speed:3,x:7,y:7},
{chara:"npc",talkIndex:2,data:datalist["npc"],row:4,col:4,speed:3,x:3,y:3}
],
talk:{
1:[
{face:datalist["m"],name:"[鸣人]",msg:"我是木叶村的鸣人，你是谁？"},
{face:datalist["n"],name:"[黑衣忍者甲]",msg:"你就是鸣人？九尾还在你身体里吗？"}
],
2:[
{face:datalist["n"],name:"[黑衣忍者乙]",msg:"鸣人，听说忍者大战就要开始了。"},
{face:datalist["m"],name:"[鸣人]",msg:"真的吗？一定要想想办法啊。"}
]
},
jump:[
{at:{x:6,y:5},to:"stage02"},
{at:{x:16,y:6},to:"stage03"}
]
},
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",data:datalist["player"],row:4,col:4,speed:3,x:7,y:8},
{chara:"npc",talkIndex:1,data:datalist["npc"],row:4,col:4,speed:3,x:8,y:3},
{chara:"npc",talkIndex:2,data:datalist["npc"],row:4,col:4,speed:3,x:10,y:3}
],
talk:{
1:[
{face:datalist["m"],name:"[鸣人]",msg:"你们在干什么啊？"},
{face:datalist["n"],name:"[黑衣忍者甲]",msg:"我们在喝茶。"}
],
2:[
{face:datalist["n"],name:"[黑衣忍者乙]",msg:"我们在喝茶，你不要打扰我们。"},
{face:datalist["m"],name:"[鸣人]",msg:"....."}
]
},
jump:[
{at:{x:7,y:8},to:"stage01"}
]
},
stage03:{
map:[
[55,55,55,55,55,55,55,55,55,55,55,55,55,55,55,55,55],
[55,55,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19],
[55,55,19,19,19,18,19,19,18,18,18,18,17,17,17,17,19],
[55,55,55,19,19,19,19,19,19,18,18,17,17,17,19,19,19],
[55,19,55,19,19,18,19,19,18,19,17,17,17,17,19,18,19],
[55,19,19,19,19,19,18,19,18,19,17,17,17,17,19,19,19],
[10,11,11,11,11,11,11,12,17,17,17,17,17,17,19,18,19],
[55,19,19,19,19,19,19,16,11,56,57,17,17,17,19,19,19],
[55,18,17,17,77,16,16,16,16,55,55,17,17,17,19,19,19],
[55,19,17,17,77,16,16,16,16,55,55,18,18,19,19,19,18],
[55,55,55,55,55,55,55,55,55,55,55,55,55,55,55,55,55]
],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1],
[1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1],
[1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1],
[1,1,1,1,1,1,1,0,0,1,1,0,0,0,1,1,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1],
[1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
],
add:[
{chara:"player",data:datalist["player"],row:4,col:4,speed:3,x:1,y:6},
{chara:"npc",talkIndex:1,data:datalist["npc"],row:4,col:4,speed:3,x:8,y:7}
],
talk:{
1:[
{face:datalist["m"],name:"[鸣人]",msg:"这是哪里？好美啊。"},
{face:datalist["n"],name:"[黑衣忍者甲]",msg:"这里是红树林"}
]
},
jump:[
{at:{x:0,y:6},to:"stage01"}
]
}
};
}
function initScript(){
map = stage.map;
mapData = stage.mapdata;
talkContent = stage.talk;
charaList = stage.add;
jumpTo = stage.jump;
backLayer.removeAllChild();
addScene();
}
这里一共有三个脚本，所以看上去代码比较多。前面136行都是数据的记录，只有后面的initScript是用来初始化场景的。
由于我写这个示例只是为了娱乐一下，所以没有写一句注释（在下实在是太懒了……），为了方便大家理解，我说一下整个游戏的制作过程和设计方式。
首先，我们的游戏主体应该是一像模板样的东西，数据和这些模板分开，要用到数据时，将数据引入然后通过固定的模板实现相同的作用但不同的效果。举一个例子，假设我们这些程序员有一天穿越到了古代，成为了比程序员还苦的炼钢工人（我可没有诅咒大家啊）……为了方便炼铁，工厂给我们准备了几个模子，我们只用将不同的铁水倒进这个模子，然后等它冷却，就能打造出材料不同但造型相同的武器（也不知道古代有没有这种高科技东西）。这样做的好处是快捷和方便修改。假如我们遇到战乱的年代，皇帝老儿要咱们在一个月内做1GB这么多的长枪去抵抗外敌，我们怎么办呢？？这时如果用到这种方法，那我们就只用不断得将铁水倒进模子就可以了。话又说回来，如果模子做得差，那制造出来的东西还是个什么玩意？
现在我们穿越回来，回到高新的IT时代。现在我们要做的差不多和做兵器是一个原理，因此我们在Main.js里写模子，铁水就交给脚本处理吧。
如果说看了半天被搅昏了的同学，那就看一下《html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转》一文吧
说了一堆原理性的话，我们不仿聊一下我们的引擎。其实模子做的好不好最关键就是看材料，如果我们花比皇宫还贵的钱来修这个模子，那我真心觉得没这个必要，因此我们应该把模子作得相对简单。使Main.js中的代码少的一个重要因素就是用到了lufylegendRPG中的LScene类，这个类非常得帅，用法就不多说了，API看了就知道。
API文档：http://www.cnblogs.com/yorhom/archive/2013/06/15/3137789.html
差不多就讲到这里吧，各位可以尽可能地发挥特长，利用该引擎制作一款像样的RPG游戏。
至于源代码嘛，可以下载lufylegendRPG-1.0.0，就在解开压缩包后的rpg_sample文件夹中。
Html5游戏开发-145行代码完成一个RPG小Demo的更多相关文章
- html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl
一.前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画 ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...
- html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend
一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟“ ...
- 优秀工具推荐：两款很棒的 HTML5 游戏开发工具
HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...
- HTML5游戏开发引擎,初识CreateJS
CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...
- HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5游戏开发,剪刀石头布小游戏案例
剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...
- HTML5游戏开发技术基础整理
随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
随机推荐
- 修复安卓的bug
一直不明白listview中的复用,为什么会出现,项目多了.点击同一行的按钮,操作的不是指定行的对象. 仔细研读了代码,突然明白了.因为复用了,导致了position改变了. 伪码 if(conver ...
- 【BZOJ】1657: [Usaco2006 Mar]Mooo 奶牛的歌声（单调栈）
http://www.lydsy.com/JudgeOnline/problem.php?id=1657 这一题一开始我想到了nlog^2n的做法...显然可做,但是麻烦.(就是二分+rmq) 然后我 ...
- springcloud微服务架构搭建
SpringCloud微服务框架搭建 一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么是集群 多台服务器部署相同应用构成一个集群 作用:通 ...
- ThinkPHP整合cropper剪裁图片上传功能
1.先下载核心文件:https://github.com/fengyuanchen/cropper 2. 3.对于index.html文件 4.对于main.js文件 5.对于crop.php文件 & ...
- [转]Oracle dbms_random函数用法快速生成多条测试数据
Java 随机生成中文姓名,手机号,邮编,住址:http://blog.csdn.net/xiaokui_wingfly/article/details/45913885 Java 批量随机生成身份证 ...
- DML语句报错是因为控制文件无法扩大还是另有原因?
今天处理了一个很有意思的故障问题,来龙去脉是这种: 客户来电咨询控制文件无法扩展,数据库仅仅能查询但不支持DML,须要远程支持.接到电话的第一反应就是CONTROL_FILE_RECORD_KEEP_ ...
- 《Windows核心编程》读书笔记.Chapter06线程基础
原文链接在印象笔记(效果也好的多):https://app.yinxiang.com/l/AAQlNLnxTPRMAppVr5W0upchipQDDC_FHlU 概要: 现成也有两个组成部分: 现成的 ...
- IOS7开发～新UI学起（一）
本文转载至:http://blog.csdn.net/lizhongfu2013/article/details/9124893 IOS7在UI方面发生了很大改变,所以感觉有必要重新审视的学习一下(新 ...
- 二、Android Studio使用——导入jar包，运行、debug都不是问题
[新建AndroidStudio工程,lib导入jar包] 我们的项目代码都在app里面,可以看作是一个Model. src 下面除了我们的代码之外,还有单元测试. 把JAR复制到libs文件 ...
- Netty 服务端创建
参考:http://blog.csdn.net/suifeng3051/article/details/28861883?utm_source=tuicool&utm_medium=refer ...