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

标签: Html5 JavaScript 游戏 lufylegend 脚本
12689人阅读 评论(11) 收藏 举报
分类:

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

欢迎继续关注我的博客

查看评论

一个最基础视频监控Demo

本项目包括一个客户端和一个服务器程序,服务器通过opencv3.0打开摄像图,采集图像,通过x264把RGB数据压缩为H264的nalu数据,然后打包为rtp包,通过udp发送给客户端,客户端接收到数据后,把数据组合成nalu, 用ffmpeg解码为BGR, 然后用opencv3.0实时显示在桌面上。
  • 2017年09月05日 23:28

HTML5面向对象的游戏开发简单实例总结

在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中。首先创建一个Sp...
  • fareise
  • fareise
  • 2016-07-15 22:37:47
  • 3302

如何制作一款HTML5 RPG游戏引擎——第五篇,人物&人物特效

上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类。 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里。 为了使这个类更有意义,我还给人物类加...
  • yorhomwang
  • yorhomwang
  • 2013-06-13 18:50:26
  • 17748

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

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

如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做。由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于luf...
  • yorhomwang
  • yorhomwang
  • 2013-05-06 21:49:41
  • 22324

Html5游戏框架Craftyjs入门简单RPG及A*寻路

Crafty.js是一个比较简单轻量的Html5游戏框架,个人比较喜欢,是因为它足够简便(如果你只需要制作简单的小游戏,例如微信h5中的各种游戏)。 遗憾的是,Crafty.js的社区活跃的人越来越少...
  • dyyaries
  • dyyaries
  • 2016-10-29 17:22:11
  • 2136

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

前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下想要了解前两篇内容,请电击下面的链接html5游戏开发-零基础开发RPG游戏-开源讲座(一)ht...
  • lufy_Legend
  • lufy_Legend
  • 2011-12-23 01:45:05
  • 22968

HTML5实战之100行代码实现《打地鼠》

对于没有接触过html的朋友,要实现一个最简单的html5打地鼠游戏,也是不知道从何下手的。就算是html高手,没有上千行代码,也完不成一个像样的打地鼠游戏。 今天我要介绍的打地鼠游戏,主要逻辑代码,...
  • shenhaijy
  • shenhaijy
  • 2015-07-09 13:38:28
  • 3908

一个纯JS的8方向RPG游戏(模拟城市)webgame

  • 2010年08月18日 13:58
  • 5.18MB
  • 下载

一个JS的RPG引擎,备忘,准备写个html5的动作游戏

http://rpgjs.rpgcreative.net/examples/demo.php
  • hack2me
  • hack2me
  • 2011-08-31 08:02:07
  • 642
    个人资料
    专栏达人
    等级:
    访问量: 83万+
    积分: 9087
    排名: 2610
    我开发的游戏
      Greedy Bug
    基于HTML5和lufylegend.js开源引擎的一款类似于贪吃蛇的游戏。相信这款游戏能给你带来欲速则不达、近在咫尺却无法接触地虐心体验!
      翻三国
    本游戏基于开源HTML5引擎lufylegend.js开发,是一款跨平台休闲类翻牌游戏。本游戏一共有五个关卡,随着关卡难度的增加会有更多卡牌出现。快来考验一下自己的记忆力吧~

    More >>
    博客专栏
    最新评论