HTML5 game development-145 lines of code to complete an RPG demo

Lufy's predecessors wrote the article [Code Art] 17 lines of code-Greedy snake games, and fooled many knowledgeable brothers into reading the article. Of course, the reading volume is quite large. Today, I am not doing this kind of tutorial. I want to help others instead of fooling people.

First look at the demo:

Test URL:

Http://www.cnblogs.com/yorhom/articles/3157553.html

The followers of my blog will see that I recently released the new engine lufylegendrpg 1.0.0. I 'd like to promote this engine today. Let everyone witness the power of encapsulation.

Engine: http://www.cnblogs.com/yorhom/archive/2013/06/08/3126534.html

Lufylegendrpg 1.0.0 post: http://blog.csdn.net/yorhomwang/article/details/9103451

First of all, in order not to let everyone question it, I declare that the 145 code I mentioned here has not been compressed or formatted, but it does not contain scripts ...... After all, the script is too big ......

(Lufy's predecessors must have been thinking: "You're not fooling around, you're still jealous of me ")

Let's take a look at the 145 lines of code:

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;}}

We can see that the code is still the same, with no compression. In fact, we didn't see any data here because I put the data in the script. The script can be a language in a specific format and can be customized, for example, L # Of lufy's predecessors #. Of course, XML and JSON can also be used in JS, which is more convenient, so this time I chose it. The code in it is as follows:

VaR script; function initscriptdata () {script = {stage01: {map: [[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 18, 18], [18, 18, 18,, 17,17, 17,17, 17,17, 17,17, 17,17, 55,55, medium, 18], [18, 18, 17,17, 17,17, 18, 18, 17,17, 55,55, 17,17, 18], [18, 17, 17,17, 18,18, 18,18, 18,17, 17,55, 55,17, middle, 18], [18 ,17, 17,18, 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,, 18,55, 55,17, 17,17, 17,17], [, 17,17, 10,16, 16,16, 11,55, 55,17, 17,17,17, 18], [, 17,17, 77,16, 16,16, 16,21, 21,17, 17,17, 17,17, 18], [, 17,17, 77,16, 16,16, 16,55, 55,17, 17,17, 17,17, 18], [, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18, 18, 18, 18, 18], mapdata: [[, 1, 0, 0, 0, 0, 0, 0, 1], [, 0, 1,, 1], [1, ,], [, 1, 0, 0, 0, 0, 0, 0, 0], [, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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: "[Naruto]", MSG: "I am a Naruto in muye village. Who are you? "},{ Face: datalist [" N "], name:" [heiyi ninja] ", MSG:" Are you a Naruto? Are you still in your body? "}], 2: [{Face: datalist [" N "], name:" [heiyi ninja B] ", MSG:" Naruto, I heard that the ninja war is about to begin. "},{ Face: datalist [" M "], name:" [Naruto] ", MSG:" really? Be sure to find a solution. "}]}, 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, 1, 0, 0], [0, 0, 0,, 0], [,], [, 4,, 0,, 0, 0], [,], mapdata: [[, 1, 1, ,], [, 1,, 1], [, 1, 1], [, 1], [, 0, 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"], Ro W: 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: "[Naruto]", MSG: "What are you doing? "},{ Face: datalist [" N "], name:" [heiyi ninja] ", MSG:" We are drinking tea. "}], 2: [{Face: datalist [" N "], name:" [heiyi ninja B] ", MSG:" We are drinking tea. Don't bother us. "},{ Face: datalist [" M "], name:" [Naruto] ", 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, pushed, 55], [55,55, 19,19, 19,19, 19,19, 19,19, 19,19, 19,19, 19,19, 19,19, 19,19, 19,18, 19,19, 18,18, 18,18, 17,17, clerk, 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,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, clerk, 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,55], mapdata,, 1], [, 1,, 0, 0, 1], [, 1], [, 1], [, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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: datax T ["NPC"], row: 4, Col: 4, speed: 3, X: 8, Y: 7}], talk: {1: [{face: datalist ["M"], name: "[Naruto]", MSG: "Where is this? It's so beautiful. "},{ Face: datalist [" N "], name:" [heiyi ninja A] ", MSG:" mangrove forest "}]}, jump: [{: {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 ();}

There are three scripts in total, so it seems that there are a lot of code. The first 136 rows are data records, and only the initscript is used to initialize the scenario.

Because I wrote this example only for entertainment, I didn't write a comment (it's too lazy ......), To make it easier for everyone to understand, let me talk about the entire game production process and design method.

First of all, our game subjects should be something like templates. Data is separated from these templates. when data is used, introduce the data and use a fixed template to achieve the same effect but different effects. For example, assume that our programmers have one day crossed the ancient times and become steel-making workers who are harder than programmers (I have not cursed everyone )...... In order to facilitate ironmaking, the factory has prepared several models for us. We only need to pour different hot metal into this model, and then wait for it to cool down, it can be used to create weapons with different materials but with the same shape (I don't know if there is such a high-tech thing in ancient times ). The advantage of doing so is quick and convenient modification. In the age of war, what should we do if the emperor asked us to make so many long guns to defend against foreign enemies within a month ?? If this method is used, we only need to continuously pour the molten metal into the mold. Then again, if the model is poor, What is the thing that is made?

Now we are going back to the new IT age. What we need to do is almost the same principle as doing weapons. Therefore, we should write a mold in Main. js and hand it over to the script for processing.

If you have been stunned for a long time, take a look at HTML5 game development-Zero-basic development RPG games-Open Source lecture (4) -script-based game & map jump

After talking about a bunch of principles, we will not talk about our engine. In fact, the most important thing about the model is to look at the materials. If we spend more money than the palace to build this model, I really don't think it is necessary, therefore, we should make the model relatively simple. An important factor that causes less code in Main. JS is the use of the lscene class in lufylegendrpg. This class is very handsome and its usage will not be discussed much. You will know after reading the API.

API documentation: http://www.cnblogs.com/yorhom/archive/2013/06/15/3137789.html

You can use this engine to create a decent RPG Game.

As for the source code, you can download the lufylegendRPG-1.0.0, just in the rpg_sample folder after the unzipping.

Also made a message board, welcome to love technology friends to discuss: http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html

Thank you for reading this article. Support is the greatest encouragement.

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

You are welcome to repost my article.

Reprinted Please note: transferred from yorhom's game box

Http://blog.csdn.net/yorhomwang

Continue to follow my blog