- 浏览: 478329 次
文章分类
最新评论
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文件夹中。
另外做了一个留言板,欢迎热爱技术的朋友前来讨论:http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html
谢谢大家阅读本文,支持就是最大的鼓励。
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自Yorhom's Game Box
http://blog.csdn.net/yorhomwang
欢迎继续关注我的博客
相关推荐
C++开发的RPG简易小游戏源代码 本人用C++写的一个RPG小游戏,有打怪、学习技能、升级、接受完成任务的功能,里面一些基本逻辑比较完善,大家感兴趣的可以看看参考参考
D5rpg Demo代码
Unity3D RPG角色扮演游戏源码(上下)-----源代码分析----01-----主角人物动画 编译运行工具------------------------Unity 2021.3.0f1c1---------------------- 分割动画为4个不同动作,骨骼动画文件和模型...
毕业设计用MFC做的一个RPG游戏Demo,基于VC6.0开发,虽然是老古董了,但对于学习MFC的同学还是有一定的学习价值,附带源代码。工程项目体积略大不好上传,需要的可以留言,我再传
[游戏开发参考书-用DirectX编写RPG游戏]. Programming.Role.Playing.Games.with.DirectX
C++RPG小游戏代码
Android游戏开发方向游戏全程实战开发(飞行射击类游戏+RPG游戏开发)
RPG游戏的一些源代码,一个小小RPG游戏DEMO.
DX程序实例源代码-一个简单的RPG游戏示例 DX程序实例源代码-一个简单的RPG游戏示例 DX程序实例源代码-一个简单的RPG游戏示例 学习用吧~
c#写的一个RPG小游戏源代码, 对于想学习用C#写游戏的初学者是一个 很错的学习例子。
游戏源代码RPG 游戏 一个简单的RPG游戏 游戏源代码RPG 游戏 一个简单的RPG游戏 游戏源代码RPG 游戏 一个简单的RPG游戏 游戏源代码RPG 游戏 一个简单的RPG游戏 游戏源代码RPG 游戏 一个简单的RPG游戏
使用flex写的rpg demo,欢迎来我博客作客。。。 http://blog.csdn.net/yaojian12/archive/2010/03/04/5346311.aspx
(仅有代码,无resource,需要的朋友可再联系)
一个RPG游戏源代码
rpg小游戏制作代码,对于初学者非常有用的游戏代码
Unity3D 单机RPG游戏学习Demo源码,实测可以编译通过,该素材来源于网络,仅供学习参考
(5.x-2019)unity3D RPG游戏开发包 Top-Down RPG Starter Kit.unitypackage
html5+springmvc+mybatis+maven框架RPG游戏demo。 data目录下是游戏数据的数据库表结构和测试数据。 用html5的canvas开发的纯jsRPGdemo,已实现地图加载,人物行走,打怪升级,地图切换,装备,技能,物品,状态等...
RPG游戏必备--背包;RPG游戏必备--背包;RPG游戏必备--背包;RPG游戏必备--背包;RPG游戏必备--背包;RPG游戏必备--背包
一个MFC rpg游戏代码!非常的简单!一对一的对战!一人攻击一下的那种!