zoukankan      html  css  js  c++  java
  • 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文件夹中。

  • 相关阅读:
    (uC/OS-II学习笔记) 事件标志……
    (uC/OS-II学习笔记) 消息邮箱&&消息队列
    (uC/OS-II学习笔记)关于共享资源与信号量
    (uC/OS-II学习笔记)uC/OS-II 时间管理
    (uC/OS-II学习笔记)uC/OS-II在kinetis K60上移植与任务建立
    (Kinetis K60)RTC实时时钟
    (Kinetis K60)flash读写
    JQuery官方学习资料(译):避免与其他库的冲突
    JQuery官方学习资料(译):$( document ).ready()
    JQuery官方学习资料(译):$ vs $()
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/6005088.html
Copyright © 2011-2022 走看看