Html5游戏开发-145行代码完成一个RPG小Demo

原创 2013年06月26日 22:51:49

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文件夹中。

另外做了一个留言板,欢迎热爱技术的朋友前来讨论:http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html


谢谢大家阅读本文,支持就是最大的鼓励。

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

版权声明:

相关文章推荐

HTML5游戏开发-扫雷及其算法研究

吕蒙曰:士隔三月【1】,当刮目相看。所以,在下在这三月中发奋图强,花了约莫8节信息课的时间研究扫雷。呜呼,由于在下才能尚且不足,所以也就只能勉强打过中级难度的吧。不过,一边玩的同时,我还一边对扫雷这个...

[代码艺术]17行代码的贪吃蛇小游戏

一个贪吃蛇小游戏javascrpt有效代码17行加上html代码的话,共25行运行方法chrome或者firefox测试连接http://lufylegend.com/html5/lufylegend...

HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布

经历了几个月的改进,终于发布1.0.0版了。虽然引擎依然存在漏洞,但是比起上次更新还是要好多了。在这里不得不感谢各位网友的大力支持。 首先为引擎做一个开场白吧,也好让大家了解一下它: lufyle...

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。不过当时初学游...

【HTML5游戏开发小技巧】RPG情形对话中,令文本逐琢夸出

从前用JAVAscript完成过令文本逐琢夸出的效果,明天嗡炒用html5中的canvas完成一下。canvas里的内容可没有像那样好操做,起首,您需求懂得一些html5的API才气操做canvas,...

【HTML5游戏开发小技巧】RPG情景对话中,令文本逐字输出

以前用javascript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下。canvas里的内容可不像那样好操作,首先,你需要懂得一些html5的API才能操作canvas,而...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)