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

时间： 2024-12-13 13:32:35

Html5游戏开发-145行代码完成一个RPG小Demo的相关文章

从零开始学C语言，200行代码完成一个打字母游戏！

很多刚开始学习编程的同学都希望自己可以去开发一些游戏,当学习了c语言的时候却发现总是用c语言去解决一些数学问题,今天我就分享给大家一个我学习c语言时候学到的一些好玩的东西,希望可以帮助大家保持对编程的兴趣. 创一个小群,供大家学习交流聊天如果有对学C++方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学C++能够持之以恒C++爱好群,如果你想要学好C++最好加入一个组织,这样大家学习的话就比较方便,还能够共同交流和分享资料,给你推荐一个学习的组织:快乐学习

【Html5游戏开发 with LufyLegend.js 之一】一览全局函数 &amp; LGlobal静态类

一,前言 最近开始学习lufylegend.js,它是一款基于MIT协议的开源HTML5游戏引擎,目前使用Canvas渲染,2.0后会增添WebGL渲染.与其他的引擎相比,最大的特点就是模仿了ActionScript 3.0的语法,当然这只是一个特点,不会ActionScript对于学习lufylegend.js也没有什么坏的影响,我就是一个很好的例子(*_^),只不过如果你接触过ActionScript,那使用lufylegend.js的时候可能会顺手一些.以下是关于lufylegend.js

HTML5游戏实战之160代码实现黄金矿工

黄金矿工是一款在flash时代红极一时的游戏,变种非常多,今天介绍它的html5版本制作过程. 这是一款结合了商业元素的游戏,在游戏的某些页面上有企业的品牌露出,这也是html5游戏盈利的一种方式,您可以根据需要替换成需要的品牌. 首先show一下最终成果,PC玩家点这里 手机玩家扫描二维码: 如果您需要在本游戏的基础上加以改进点这里. 在开始介绍游戏开发步骤前,先打个广告,对html5游戏开发,TangIDE 或者Cantk 感兴趣的朋友请扫描下方二维码,加入七巧板官方QQ交流群,一起交流做h

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫" HTML5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为视点,为大家讲述如何开发一款简单的游戏.希望大家看了这篇文章,能使你对理解游戏开发有帮助. 你可以先测试一下游戏: http://lufylegend.com/lufylegend_developers/yorhom_Christmas/index.html 1,如何进行游戏开发 1.1游

HTML5游戏开发中基础的Tag讲解

一般在HTML5游戏开发中,基础的Tag都用在标题,段落以及分行上,下面就来讲解下几种最常用的Tag.当然最好用的HTML5学习方式就是跟随示例,今天我们的HTML5游戏开发教程也从实例开始. 首先来看一下标题中的Tag应用.在HTML5游戏开发中,我们用从h1至h6的几个Tag来定义文章的标题,每个正文中的标题都是自成一段的.例如这样: <html>  <head></head>  <body>   <h1>This is a heading&

HTML5游戏开发实战--注意点

1.WebSocket是HTML5标准的一部分,Web页面可以用它来持久连接到socket服务器上.该接口提供了浏览器与服务器之间的事件驱动型连接,这意味着客户端不必再每隔一个时间段就需要向服务器发送一次新的数据请求.当有数据需要更新时,服务器就可以直接推送数据更新给浏览器.该功能的好处之一就是玩家之间可以实时进行交互.当一个玩家做了些事,就会向服务器发送数据,服务器将广播一个事件给其他已连接的所有浏览器,让它们知道玩家做了什么.这样就使得制作HTML5网络游戏成为可能. 2.随着现代浏览器对H

html5游戏开发--&quot;动静&quot;结合(二)-用地图块拼成大地图 &amp; 初探lufylegend

一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟"动静结合"是先有动再有静.看了上一章的内容,或许你就有了对html5实现动画有了初步了解: html5游戏开发--"动静"结合(一):  http://blog.csdn.NET/yorhomwang/article/details/8301451 二.html5实现用

html5 游戏开发

近来想做html5游戏开发些小东西玩一下,因为手边就是笔记本,想怎么玩就怎么玩了,今年可以说是非常重要特殊的一年,感觉有些倒霉,不过,心态最重要,该怎么做的时候就去怎么做吧,日子的24小时是不会变的,不管能活多久. 游戏开发感觉不错,所以就刚看了一个碰撞检测canvas的来做,一段段代码弄下来试,成功运行了,原理也是一些很简单的,不过是 不停地检测 FPS,不停刷新每一帧来达到最终的探测目的: 每一帧里面都去检测范围,是否会碰撞: 有三种检测方法: 范围检测: 光线投影速度向量检测:分离轴定理:

HTML5游戏开发技术基础整理

随着HTML5标准最终敲定,HTML5将有望成为游戏开发领域的的热门平台.HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施方案.本文系根据[HML5 Canvas游戏开发实战]一书中的内容整理而成,是了解和学习HTML5游戏开发的基础内容,希望能够帮助到那些和博主一样致力于游戏开发的朋友们! JavaScript中的面向对象编程 对于游戏开发来说,面向对象编程(OOP)是一种重要而且必要的方法,所以在了解HTML5游戏