学习HTML5开发RPG游戏第四步＞游戏对象设计

最新推荐文章于 2021-05-31 06:38:53 发布
最新推荐文章于 2021-05-31 06:38:53 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： HTML5学习 文章标签： Canvas HTML5 Prototype.js RPG游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crow_html5/article/details/17715573
版权

游戏对象主要分为以下几类：

1、地图单元

2、触发器

3、物品

4、游戏角色

地图单元是组成地图的单元格，地图单元中可以放置触发器，主角行走在单元格上会触发放置的触发器事件。

触发器只是一个统称，它具体之后可以是宝箱、传送阵等，可以控制游戏的进度。

物品包括装备、药品等

游戏角色可分为主角和NPC。

 

1、地图单元

地图单元可设置游戏角色是否可以通行，代码如下：

var GControls={};
GControls.MapCell = Class.create(JControls.PictureBox, {
    walk:null,//是否可以行走
    initialize:function ($super,  argP, argWH, argPicName) {
        $super( argP, argWH);
        if(argPicName)this.setMapPic(argPicName);
    },
    setMapPic:function(mapPicName){
        if(mapPicName){
            this.setPicture(ResourceData.Images[ResourceData.MainPic[mapPicName].imageName]
                ,ResourceData.MainPic[mapPicName].picPosition);
            if(ResourceData.MainPic[mapPicName].walk)this.walk=true;
            else this.walk=false;
        }
        return this;
    }
});

 

其中ResourceData.MainPic如下：

var ResourceData= {
    MainPic:{
        //imageName：资源ResourceData.Images中的图片名称，picPosition：从图片的那个位置开始显示，walk：是否可以通行
        Move_0_0:{"imageName":"move","picPosition":{"x":0,"y":0},"walk":true}
    }
}


2、触发器

代码如下：

GControls.Trigger = Class.create(JControls.PictureBox, {//触发装置，适用如宝箱（Treasure），传送阵（JumpToMap）等
    open:false,//是否可以触发
    eventData:null,//触发装置数据
    triggerType:null,
    initialize:function ($super,  argP, argWH, argTriggerPicName,triggerType) {
        $super( argP, argWH, ResourceData.Images[ResourceData.MainPic[argTriggerPicName].imageName]);
        if(triggerType)this.triggerType=triggerType;
        else this.triggerType="Treasure";//默认为宝箱
        this.setPicture(ResourceData.Images[ResourceData.MainPic[argTriggerPicName].imageName]
            ,ResourceData.MainPic[argTriggerPicName].picPosition);
    },
    onTrigger:function(){//触发
        switch(this.triggerType){
            case "Treasure":
                var a=[], b=[];
                if(this.eventData.goods)b=this.eventData.goods.split(",");
                if(this.eventData.goldNum){
                    a[0]="获得"+this.eventData.goldNum+"金币.";
                    GMain.GoldNum+=parseInt(this.eventData.goldNum);
                }
                GFunction.gainGoods(b);
                for(var i=0;i< b.length;i++){
                    a[a.length]="获得"+ResourceData.Goods[b[i]].showName+".";
                }
                var msgBox=new JControls.MessageBox({width:200,height:0},a);
                msgBox.onClick=function(){
                    this.remove.call(this);
                    GMain.MapPanel.saveShowImageData();//更新地图缓存数据
                    return true;
                }
                this.open=true;
                this.picPosition.x+= this.picSize.width;
                break;
            case "JumpToMap":
                GMain.FloorsNum=this.eventData.goToFloorNum;
                GMain.MapData=GFunction.createMap();
                GMain.loadMapPanel();
                GMain.showMapPanel();
                break;
            default: break;
        }
    }
});

 

可以通过重写onTrigger方法来实现不同触发事件。

 

3、物品

代码如下：

GControls.Goods = Class.create(JControls.PictureBox, {
    num:null,//数量
    goodsData:null,//物品数据
    isUsed:null,//是否装备在身上
    initialize:function ($super,goodsName) {
        $super();
        this.num=1;
        this.isUsed=false;
        var goodsLabel=new JControls.Label({x:0,y:0}, this.num)
            .setTextPos({x:2, y:2}).setFontSize(15).setFontColor(JColor.red);
        this.addControlInLast([goodsLabel]);
        this.BGColor=JColor.white;
        this.setGoodsName(goodsName);
    },
    setNum:function(num){
        this.num=num;
        return this;
    },
    setSize:function($super,size){
        $super(size);
        this.controls[0].setSize(size);
    },
    setGoodsName:function(goodsName){
        if(goodsName){
            this.setPicture(ResourceData.Images[ResourceData.Goods[goodsName].imageName]
                ,ResourceData.Goods[goodsName].picPosition);
            this.goodsData=ResourceData.Goods[goodsName];
        }
        return this;
    },
    getSaveData:function(){
        var saveData={};
        saveData.goodsData=this.goodsData;
        saveData.num=this.num;
        saveData.isUsed=this.isUsed;
    },
    beginShow:function($super){
        if(this.num>1){
            this.controls[0].setText(this.num);
            this.controls[0].visible=true;
        }
        else  this.controls[0].visible=false;
        $super();
    },
    onClick:function(){
        if(GMain.SelectedGoods){
            GMain.SelectedGoods.selected=false;
        }
        GMain.SelectedGoods=this;
        GMain.SelectedGoods.selected=true;
        GMain.DataPanel.loadData();
        return true;
    }
});

 

其中ResourceData.Goods如下：

var ResourceData= {
    Goods:{
        //showName:物品名称，goodsLevel：物品级别，useStandards：使用要求，goodsType：物品类型，imageName：图片名称，picPosition：图片中得显示位置，attributes：物品属性
        "ZB1_0_0":{"showName":"长剑",goodsLevel:1,useStandards:{level:1,jobsName:"Soldier"},"goodsType":"handR","imageName":"ZB1",
            "picPosition":{"x":0,"y":0},attributes:{"ATK":"10"}}
    }
}


 


4、游戏角色4、游戏角色

代码如下：

GControls.GameRole=Class.create(JControls.AnimationBox,{
    GameRoleData:null,//GameRole键值
    mStep:4,//行走步伐数值
    moveDirection:GMain.Direction.down,//移动方向，37:左， 38:上，39:右，40:下
    level:1,//等级
    EXP:0,//经验值
    base:null,//基础能力
    HP:0,//剩余血值
    MP:0,//剩余魔力值
    bodySlots:null,//穿戴的装备
    ///
    basePosition:null,//战斗时站立的位置
    toGameRoleArray:null,//要攻击对象数组
    usedSkillName:null,//要释放的技能
    attackTime:null,//攻击计时
    isAttacking:null,//攻击或施法中
    bodyState:null,//附加状态
    /
    GameRoleSign:1,//敌对GameRole
    isControl:false,
    usedGoods:null,

    initialize :function ($super,argGameRoleName,GameRoleSign) {
        $super();
        //this.canMove=false;
        this.bodyState={defend:false,died:false};
        this.base={STR:0,VIT:0,DEX:0,INT:0,HP:0,MP:0};
        this.bodySlots={head:null,body:null,foot:null,handL:null,handR:null,neck:null,fingerL:null,fingerR:null,glove:null};
        this.setGameRoleName(argGameRoleName,GameRoleSign);
    },
    setGameRoleName:function(GameRoleName,GameRoleSign){
        if(GameRoleName){
            this.GameRoleData=ResourceData.GameRole[GameRoleName];
            this.HP=this.getMaxHP();
            this.MP=this.getMaxMP();
        }
        if(GameRoleSign==1){
            this.initBattle();
            this.GameRoleSign=1;
        }
        else{
            this.initMove();
            this.GameRoleSign=0;
        }

        return this;
    },
    setRelativePosition:function ($super,relativePosition) {
        $super(relativePosition);
        if(GMain.IsBattle)this.basePosition={x:relativePosition.x,y:relativePosition.y};
        return this;
    },
    selectAttackBegin:function(){
        GMain.FromAttackSelect=false;
        GMain.BattleControlPanel.visible=true;
        this.isHighLight=true;
        this.usedSkillName=null;
        this.clearControls();
        this.addControlInLast([
            new JControls.Label({x:0,y:-60},"LV"+this.level+" "+this.getShowName()).setFontType("bold")
            ,new JControls.Label({x:0,y:-40}).setFontColor(JColor.red).setFontType("bold")
            ,new JControls.Label({x:0,y:-20}).setFontColor(JColor.blue).setFontType("bold")
        ]);
    },
    setBattleState:function(state){
        this.animationTime = 0;
        this.animationPlayNum = 0;
        this.blockInvert=false;
        switch (state){
            case ResourceData.BattleState.stand:
                this.animationOffset={WNum:0,HNum:1};
                break;
            case ResourceData.BattleState.moveTo:
                this.animationOffset={WNum:0,HNum:0};
                break;
            case ResourceData.BattleState.moveBack:
                this.animationOffset={WNum:0,HNum:0};
                this.blockInvert=true;
                break;
            case ResourceData.BattleState.underFire:
                this.animationOffset={WNum:0,HNum:3};
                break;
            case ResourceData.BattleState.attack:
                this.animationOffset={WNum:0,HNum:4};
                break;
            case ResourceData.BattleState.die:
                this.animationOffset={WNum:0,HNum:6};
                break;
        }
        return this;
    },
    getHP:function(){
        return this.HP;
    },
    getMP:function(){
        return this.MP;
    },
    attack:function(toGameRoleArray,usedSkillName){
        this.toGameRoleArray=toGameRoleArray;
        this.isHighLight=false;
        this.attackTime=0;
        if(usedSkillName)this.usedSkillName=usedSkillName;
    },
    playEffects:function (animationName,playPosition,size){
        var effects=new JControls.AnimationBox(playPosition,size,animationName);
        effects.loop=false;
        this.parent.addControlInLast([effects]);
    },
    onClick:function(){
        if(GMain.BattlesGameRole[0][GMain.SelectLeaderNum].usedSkillName){
            JMain.JForm.canvas.style.cursor="default";
            GMain.BattlesGameRole[0][GMain.SelectLeaderNum].attack([this]);
            GMain.BattlesGameRole[0][GMain.SelectLeaderNum].clearControls();
            GFunction.nextAttackSelect();
        }
        return true;
    },

    getHeadImageName:function(){
        return this.GameRoleData.headImageName;
    },
    getShowName:function(){
        return ResourceData.Professions[this.GameRoleData.jobsName].showName;
    },
    getJobsName:function(){
        return this.GameRoleData.jobsName;
    },
    getLevelExp:function(){
        var num1=0;
        for(var i=this.level;i>0;i--)num1+=100*i;
        return num1;
    },
    getSTR:function(){
        var n=this.GameRoleData.growUp.STR*this.level+this.base.STR;
        for(var bs in this.bodySlots){
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.STR)n+=parseInt(this.bodySlots[bs].goodsData.attributes.STR);
        }
        return n;
    },
    getVIT:function(){
        var n=this.GameRoleData.growUp.VIT*this.level+this.base.VIT;
        for(var bs in this.bodySlots){
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.VIT){
                n+=parseInt(this.bodySlots[bs].goodsData.attributes.VIT);
            }
        }
        return n;
    },
    getDEX:function(){
        var n=this.GameRoleData.growUp.DEX*this.level+this.base.DEX;
        for(var bs in this.bodySlots){
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.DEX)n+=parseInt(this.bodySlots[bs].goodsData.attributes.DEX);
        }
        return n;
    },
    getINT:function(){
        var n=this.GameRoleData.growUp.INT*this.level+this.base.INT;
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.INT)n+=parseInt(this.bodySlots[bs].goodsData.attributes.INT);
        return n;
    },
    getATK:function(){
        var n=this.getSTR()*2+this.getDEX();
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.ATK)n+=parseInt(this.bodySlots[bs].goodsData.attributes.ATK);
        return n;
    },
    getDEF:function(){
        var n=this.getVIT();
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.DEF)n+=parseInt(this.bodySlots[bs].goodsData.attributes.DEF);
        return n;
    },
    getMATK:function(){
        var n=this.getINT()*2;
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.MATK)n+=parseInt(this.bodySlots[bs].goodsData.attributes.MATK);
        return n;
    },
    getMDEF:function(){
        var n=this.getINT();
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.MDEF)n+=parseInt(this.bodySlots[bs].goodsData.attributes.MDEF);
        return n;
    },
    getMaxHP:function(){
        var n=this.base.HP+this.getVIT()*5+this.GameRoleData.growUp.HP*this.level;
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.HP)n+=parseInt(this.bodySlots[bs].goodsData.attributes.HP);
        return n;
    },
    getMaxMP:function(){
        var n=this.base.MP+this.getINT()*5+this.GameRoleData.growUp.MP*this.level;
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.MP)n+=parseInt(this.bodySlots[bs].goodsData.attributes.MP);
        return n;
    },
    getSpeed:function(){
        var n=this.getDEX();
        for(var bs in this.bodySlots)
            if(this.bodySlots[bs]&&this.bodySlots[bs].goodsData.attributes.SPD)n+=parseInt(this.bodySlots[bs].goodsData.attributes.SPD);
        return n;
    },
    addEXP:function(exp){
        this.EXP+=exp;
        var levelExp=this.getLevelExp();
        if(this.EXP>=levelExp){
            this.level++;
            this.EXP=this.EXP-levelExp;
            this.HP=this.getMaxHP();
            this.MP=this.getMaxMP();
        }
    },
    useGoods:function(goods){//使用物品
        //{head:null,body:null,foot:null,handL:null,handR:null,neck:null,fingerL:null,fingerR:null,glove:null};
        //"0">武器,"1">护甲,"2">头盔,"3">靴子,"4">戒子,"5">项链,"6">盾牌,"7">药品
        switch (goods.goodsData.goodsType){
            case "drug":
                if(goods.goodsData.attributes.HP){
                    this.HP+=parseInt(goods.goodsData.attributes.HP);
                    if( this.HP>this.getMaxHP())this.HP=this.getMaxHP();
                }
                if(goods.goodsData.attributes.MP){
                    this.MP+=parseInt(goods.goodsData.attributes.MP);
                    if( this.MP>this.getMaxMP())this.HP=this.getMaxMP();
                }
                if(goods.goodsData.attributes.MaxHP){
                    this.base.HP+=parseInt(goods.goodsData.attributes.MaxHP);
                }
                if(goods.goodsData.attributes.MaxMP){
                    this.base.MP+=parseInt(goods.goodsData.attributes.MaxMP);
                }
                if(goods.goodsData.attributes.STR){
                    this.base.STR+=parseInt(goods.goodsData.attributes.STR);
                }
                if(goods.goodsData.attributes.VIT){
                    this.base.VIT+=parseInt(goods.goodsData.attributes.VIT);
                }
                if(goods.goodsData.attributes.DEX){
                    this.base.DEX+=parseInt(goods.goodsData.attributes.DEX);
                }
                if(goods.goodsData.attributes.INT){
                    this.base.INT+=parseInt(goods.goodsData.attributes.INT);
                }
                goods.num--;
                for (var i = 0; i < GMain.Goods.length; i++) {
                    if(GMain.Goods[i].num==0){
                        for (var j = i; j < GMain.Goods.length-1; j++) {
                            GMain.Goods[j]=GMain.Goods[j+1];
                        }
                        GMain.Goods.length-=1;
                    }
                }
                GMain.SelectedGoods=null;
                break;
            default:
                if(this.bodySlots[goods.goodsData.goodsType])this.bodySlots[goods.goodsData.goodsType].isUsed=false;
                this.bodySlots[goods.goodsData.goodsType]=goods;
                this.bodySlots[goods.goodsData.goodsType].isUsed=true;
                break;
        }

    },
    deleteCombatGear:function(goods){//卸下装备
        if(goods){
            goods.isUsed=false;
            this.bodySlots[goods.goodsData.goodsType]=null;
        }

    },
    setMoveDirection:function(direction){//设置行走方向
        this.moveDirection=direction;
        this.animationTime=0;
        switch (this.moveDirection){
            case GMain.Direction.left:
                this.animationOffset={WNum:0,HNum:1};
                GMain.MapPanel.moveStep={x:this.mStep,y:0};
                break;
            case GMain.Direction.up:
                this.animationOffset={WNum:0,HNum:3};
                GMain.MapPanel.moveStep={x:0,y:this.mStep};
                break;
            case GMain.Direction.right:
                this.animationOffset={WNum:0,HNum:2};
                GMain.MapPanel.moveStep={x:this.mStep*-1,y:0};
                break;
            case GMain.Direction.down:
                this.animationOffset={WNum:0,HNum:0};
                GMain.MapPanel.moveStep={x:0,y:this.mStep*-1};
                break;
        }

    },
    initMove:function(){
        this.setRelativePosition({x:GMain.CellSize.width*GMain.InPoint.x,y:GMain.CellSize.height*(GMain.InPoint.y-0.5)});
        this.setSize({width:GMain.CellSize.width,height:GMain.CellSize.height*1.5});
        this.setAnimation(this.GameRoleData.animation.move);
        this.setMoveDirection(this.moveDirection);
        this.canMove=false;
        GMain.MapPanel.moveStep=null;
        this.stopPlayAnimation=true;
    },
    initBattle:function(){
        this.setSize({width:80,height:80});
        this.setAnimation(this.GameRoleData.animation.battle);
        this.setBattleState(ResourceData.BattleState.stand);
        this.usedSkillName=null;
        this.usedGoods=null;
        GMain.MapPanel.moveStep=null;
        this.canMove=true;
    },
    beginShow:function($super){
        $super();
        if(GMain.IsBattle){
            this.toBattle();
        }else {
            if(this.isControl){
                this.toMove();
            }
        }
    },
    toMove:function(){
        if (GMain.MapPanel.canMove&&GMain.MapPanel.moveStep&&(GMain.MapPanel.moveStep.x||GMain.MapPanel.moveStep.y)) {
            var x=this.position.x-GMain.MapPanel.moveStep.x;
            var y=this.position.y-GMain.MapPanel.moveStep.y;
            var c=parseInt((x-GMain.MapPanel.position.x+GMain.CellSize.width/2)/GMain.CellSize.width);
            var r=parseInt((y-GMain.MapPanel.position.y+GMain.CellSize.width)/GMain.CellSize.width);
            var toMove;
            if(this.pointInBlock({x:x,y:y+parseInt(GMain.CellSize.height/2)},GMain.MapPanel)
                &&this.pointInBlock({x:x+this.size.width,y:y+parseInt(GMain.CellSize.height/2)},GMain.MapPanel)
                &&this.pointInBlock({x:x,y:y+this.size.height},GMain.MapPanel)
                &&this.pointInBlock({x:x+this.size.width,y:y+this.size.height},GMain.MapPanel)){
                toMove=GMain.MapCells[r][c].walk;
                if(GMain.MapCells[r][c].controls.length>0){
                    toMove=GMain.MapCells[r][c].controls[0].open;
                }
            }else{
                toMove=false;
            }
            if(toMove){
                var n=JFunction.Random(1,100);
                if(n<GMain.BattleProbability){
                    GMain.MapPanel.moveStep=null;
                    GMain.BattlesGameRole[0][0].stopPlayAnimation=true;
                    var n1=JFunction.Random(1,5);
                    GMain.BattlesGameRole[1]=[];
                    for(var i=0;i<n1;i++){
                        GMain.BattlesGameRole[1][i]=new GControls.GameRole("Lang",1).setSize({width:160,height:160});
                    }
                    GFunction.showBattlePanel();
                }
            }else{
                GMain.MapPanel.relativePosition.x -=  GMain.MapPanel.moveStep.x;
                GMain.MapPanel.relativePosition.y -=  GMain.MapPanel.moveStep.y;
            }
        }
    },
    toBattle:function(){
        if(this.controls[1])this.controls[1].setText("HP:"+this.HP+"/"+this.getMaxHP());
        if(this.controls[2])this.controls[2].setText("MP:"+this.MP+"/"+this.getMaxMP());
        var MTime=15,ATime=10;
        if(this.isAttacking&&this.usedSkillName){
            if(ResourceData.Skill[this.usedSkillName].toMove){
                if(this.attackTime==0){//移动
                    this.moveStep={x:(this.toGameRoleArray[0].position.x+this.toGameRoleArray[0].size.width-this.size.width-this.position.x)*1.0/MTime,
                        y:(this.toGameRoleArray[0].position.y+this.toGameRoleArray[0].size.height-this.size.height-this.position.y)*1.0/MTime};
                    this.setBattleState(ResourceData.BattleState.moveTo);
                }else if(this.attackTime==MTime){//攻击
                    this.moveStep={x:0,y:0};
                    if(ResourceData.Skill[this.usedSkillName].effect.fromShow)this.playEffects(ResourceData.Skill[this.usedSkillName].effect.fromShow,
                        {x:this.relativePosition.x-16,y:this.relativePosition.y-16},{width:96,height:96});
                    if(ResourceData.Skill[this.usedSkillName].effect.toShow)this.playEffects(ResourceData.Skill[this.usedSkillName].effect.toShow,
                        {x:this.toGameRoleArray[0].relativePosition.x-32,y:this.toGameRoleArray[0].relativePosition.y-32},{width:192,height:192});
                    this.setBattleState(ResourceData.BattleState.attack);

                    var DHP=getDHP(this,this.toGameRoleArray[0])
                    this.toGameRoleArray[0].showNumber({x:40,y:40},DHP);
                    if(DHP<0)this.toGameRoleArray[0].setBattleState(ResourceData.BattleState.underFire);
                    this.toGameRoleArray[0].HP+=DHP;
                    if(this.toGameRoleArray[0].HP<=0)this.toGameRoleArray[0].HP=0;
                }else if(this.attackTime==(MTime+ATime)){//返回
                    this.moveStep={x:(this.basePosition.x-this.relativePosition.x)*1.0/MTime,
                        y:(this.basePosition.y-this.relativePosition.y)*1.0/MTime};
                    this.setBattleState(ResourceData.BattleState.moveBack);
                    if(this.toGameRoleArray[0].HP<=0){
                        this.toGameRoleArray[0].setBattleState(ResourceData.BattleState.die);
                        this.toGameRoleArray[0].bodyState.died=true;
                    }
                    else {
                        this.toGameRoleArray[0].setBattleState(ResourceData.BattleState.stand);
                    }
                }else if(this.attackTime==(MTime*2+ATime)){//攻击完成
                    this.moveStep={x:0,y:0};
                    this.setBattleState(ResourceData.BattleState.stand);
                    this.isAttacking=false;
                    GFunction.nextBattle();
                }
            }else{
                if(this.attackTime==0){//吟唱
                    this.playEffects(ResourceData.Skill[this.usedSkillName].effect.fromShow,
                        {x:this.relativePosition.x-16,y:this.relativePosition.y-16},{width:96,height:96});
                    this.setBattleState(ResourceData.BattleState.stand);
                }else if(this.attackTime==MTime){//施放
                    for(var i1=0;i1<this.toGameRoleArray.length;i1++){
                        this.playEffects(ResourceData.Skill[this.usedSkillName].effect.toShow,
                            {x:this.toGameRoleArray[i1].relativePosition.x-32,y:this.toGameRoleArray[i1].relativePosition.y-32},{width:192,height:192});
                        if(this.usedGoods){
                            this.toGameRoleArray[i1].useGoods(this.usedGoods);
                        }else{
                            var DHP=getDHP(this,this.toGameRoleArray[i1])
                            this.toGameRoleArray[i1].showNumber({x:40,y:40},DHP);
                            if(DHP<0)this.toGameRoleArray[i1].setBattleState(ResourceData.BattleState.underFire);
                            this.toGameRoleArray[i1].HP+=DHP;
                            if(this.toGameRoleArray[i1].HP<=0){
                                this.toGameRoleArray[i1].HP=0;
                            }
                        }
                    }
                }else if(this.attackTime==(MTime+ATime)){
                    for(var i1=0;i1<this.toGameRoleArray.length;i1++){
                        if(this.toGameRoleArray[i1].HP<=0){
                            this.toGameRoleArray[i1].setBattleState(ResourceData.BattleState.die);
                            this.toGameRoleArray[i1].bodyState.died=true;
                        }
                        else  this.toGameRoleArray[i1].setBattleState(ResourceData.BattleState.stand);
                    }
                }else if(this.attackTime==(MTime*2+ATime)){
                    this.setBattleState(ResourceData.BattleState.stand);
                    this.isAttacking=false;
                    GFunction.nextBattle();
                }
            }
            this.attackTime++;
        }
        function getDHP(_this,toGameRole){
            var data={};
            if(ResourceData.Skill[_this.usedSkillName].damageType=="attack")data.ATK=_this.getATK();
            else if(ResourceData.Skill[ _this.usedSkillName].damageType=="magic")data.MTK=_this.getMATK();
            var toDEF=toGameRole.getDEF();
            var toMDEF=toGameRole.getMDEF();
            if(toGameRole.bodyState.defend){
                toDEF=toDEF*2;
                toMDEF=toMDEF*2;
            }
            var DHP1=0;
            if(data.ATK)DHP1+=toDEF/5.0-data.ATK;
            if(data.MATK)DHP1+=toMDEF/5.0-data.MATK;
            if(DHP1>0)DHP1=0;
            return parseInt(DHP1);
        }
    },
    getSaveData:function(){
        var saveData={};
        saveData.GameRoleData=this.GameRoleData;
        saveData.base=this.base;
        saveData.HP=this.HP;
        saveData.MP=this.MP;
        saveData.level=this.level;
        saveData.bodySlots=this.bodySlots;
        return saveData;
    },
    showNumber:function(p,num){//用于显示增加和减少生命值和魔法值
        var strNum=Math.abs(num).toString();
        var numSize=ResourceData.Images.DamageNumber.cellSize;
        var w=strNum.length*numSize.width;
        var showNumberObj=new JControls.Object({x:p.x-w/2,y:p.y}, {width:w,height:numSize.height});
        showNumberObj.moveStep={x:0,y:-4};
        showNumberObj.endShow=function(){
            if (this.canMove && this.moveStep) {
                this.relativePosition.x += this.moveStep.x;
                this.relativePosition.y += this.moveStep.y;
            }
            this.alpha-=0.05;
            if(this.alpha<=0){
                this.remove();
            }
        }
        var n=[]
        for(var i=0;i<strNum.length;i++){
            n[i]=new JControls.PictureBox({x:i*numSize.width,y:0},numSize)
                .setPicture(ResourceData.Images.DamageNumber,{x:parseInt(strNum[i])*numSize.width,y:num>=0?numSize.height:0});
        }
        showNumberObj.addControlInLast(n);
    }
});

 

其中ResourceData.GameRole如下：

var ResourceData= {
    GameRole:{
        Leader0:{headImageName:"ZSTX",jobsName:"Soldier", growUp:{STR:8,VIT:8,DEX:5,INT:4,HP:20,MP:5},
            animation:{ move:"ZS1_move",battle:"ZS1_battle"},
            skills:"attack1"
        }
    }
}

ResourceData.Skill如下

var ResourceData= {
    Skill:{
        //showName:技能名称，skillLevel：技能级别，toMove:是否要近身,damageType：技能伤害类型(attack,magic)
        attack:{showName:"普通攻击",toMove:true,damageType:"attack",toRival:true,fromGameRole:{level:1},toGameRole:{num:1},effect:{num:1}}
    }
}


把所有对象都设计好之后，就是设计游戏界面了。


 

Crow0176
关注
专栏目录
HTML5 canvas 游戏设计：创建一个经典的魔塔游戏
m8705的博客
01-26 1万+
整个项目都已经开源，项目地址：https://github.com/m8705/MAGIC-TOWER-JS 注：这是我高中时候的作品，BUG 很多，已经不再更新了。下载项目到本地就能玩。   前言 魔塔是一个非常经典的 2D 策略类 固定数值RPG游戏，你将扮演一个王国的勇士，前往远方的魔塔，解救里面的公主，探寻魔塔的秘密。以前我在学习机上玩的这款游戏，后来高中学了前端，用前端技术还原了这...
HTML5RPG游戏学习源码
01-03
该源码仅供学习使用，欢迎访问我的博客:http://blog.csdn.net/crow_html5
学习HTML5RPG游戏源码
12-17
该源码仅供学习使用，欢迎访问我的博客:http://blog.csdn.net/crow_html5
如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现
Yorhom's Game Box
05-06 370
一，话说天下大事 前不久看到lufy的博客上，有一位朋友想要一个RPG游戏引擎，出于兴趣准备动手做一做。由于我研究lufylegend有一段时间了，对它有一定的依赖性，因此就准备将这个引擎基于lufylegend。暂时命名为lufylegendRPG。毕竟基于lufylegend，如果名称中不加上lufylegend这几个字的话，有点说不通啊。。。最近发布了0.1.0版，但是不理想，连一惯都是鼓...
HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布
xuela-net
06-15 216
经历了几个月的改进，终于发布1.0.0版了。虽然引擎依然存在漏洞，但是比起上次更新还是要好多了。在这里不得不感谢各位网友的大力支持。 首先为引擎做一个开场白吧，也好让大家了解一下它： lufylegendRPG是基于lufylegend的HTML5游戏引擎。使用它时，需要引入lufylegend.js。 包含了LTileMap，LCharacter，LTalk，LEffect等多个实用的类。 ...
学习HTML5开发RPG游戏第一步>准备
xidajiancun
12-17 349
第一步当然是准备工作了。 首先，确认你的浏览器版本对HTML5的支持。 其次，准备好开发工具。 IDE这个看各自的喜好，支持Web开发就行。 Prototype.js 是Sam Stephenson写的一个非常优雅的JavaScript基础类库，对JavaScript做了大量的扩展，而且很好的支持Ajax。 Prototype.js的使用方法在网络有大量的介绍，我这里用到是一个简...
学习HTML5开发RPG游戏第三步>基本对象设计<二>
xidajiancun
12-18 179
前面我们已经完成了父对象的编写，现在我们可以通过继承来实现各对象了。 1、游戏主窗体。 游戏主窗体只有一个，游戏中的对象显示都是在主窗体的画布上绘制的，代码如下： var JForm = null; JControls.Form = Class.create(JControls.Object, {//从父类继承 context:null,//画布环境 canvas:null,...
html5游戏开发-零基础开发RPG游戏-开源讲座(一)
热门推荐
lufy小屋
12-13 4万+
因为上一篇雷电的开发中，有朋友反应不太理解，本篇将以零基础的视点，来讲解如何开发一款RPG游戏。在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然
Flash游戏开发第14周作业9.zip
最新发布
02-08
在本压缩包“Flash游戏开发第14周作业9.zip”中，主要涉及的是使用Flash进行游戏开发的相关知识。Flash是一款历史悠久的动画制作和交互式内容开发工具，尤其在早期互联网时代，它广泛用于创建网页游戏、动画以及丰富...
学习HTML5开发RPG游戏第三步＞基本对象设计＜四＞
Crow's blog
09-03 1014
7、对话框 用于显示信息。 JControls.MessageBox = Class.create(JControls.Object, { initialize:function ($super, argname, argWH, argAString,argP) { //如果没有指定显示位置，则居中显示 if(!argP)argP={x:parseInt
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转
lufy小屋
01-22 1万+
首先，本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇，来实现游戏的脚本化，和利用游戏脚本实现地图场景的切换，离上次更新貌似很长时间了，你在看下面的文字之前，需要先了解前三篇在下啰嗦了些什么东东。html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://blog.csdn.net/lufy_legend/article/details/7063316html5游戏开发-零基础开
html5rpg游戏策划案,HTML 5开发RPG游戏之一（地图人物实现）
weixin_42509518的博客
05-31 634
在地图显示的时候，首先把图片切割，然后在根据预先设定好的位置显示到地图层上，这样我们就看到了一张完整的地图了接下来，打开Main.js在里面加入init(50,"mylegend",480,320,main);在legendForHtml5Progarmming中，用init这个函数来初始化canvas，上面的代码表示，初始化一个速度为50，名字为mylegend，大小为480*320的游戏界面，...
学习HTML5开发RPG游戏第三步>基本对象设计<一>
xidajiancun
12-17 169
通过分析基本对象主要分为以下几类： 1、游戏主窗体 2、文字 3、按钮 4、图片 5、动画 6、容器 7、对话框 8、声音 9、时钟 前面七种都是可视的。所以为他们写一个父类，通过继承以提高代码利用率。 后两种没有什么共同点，只能单独写了。 父类代码如下： var JControls = {}; JControls.Object= Class.create({ n...
(二)游戏对象和关卡设计
gepengmiss的博客
03-28 3005
1. 战场对象: 角色、敌人、技能、陷阱 2. 关卡配置 关卡编号(从1开始),关卡角色ID、关卡进度(不同进度时游戏难易程度不一样), 每个进度时各种敌人ID和数量、技能ID和数量、障碍物ID和数量. 3.对象控制逻辑: (1) 为每个对象设计一个controller,controller负责初始化对象的配置、记录对象运行数据、动画控制器、移动ai引用、 武器ai引...
游戏对象系统的设计（一）
Dlite的技术笔记
09-09 2236
这篇文章主要描述基于数据驱动的游戏对象系统设计的基本要点。
学习HTML5开发RPG游戏第三步＞基本对象设计＜一＞
Crow's blog
09-03 1570
通过分析RPG游戏元素主要分为以下几类： 1、容器控件 2、文字控件 3、按钮控件 4、图片控件 5、动画控件 6、对话框控件 7、声音控件 8、时钟控件 前面六种都是可视的，会显示在画布上。所以为他们写一个父对象，通过继承以提高代码利用率。 后两种没有什么共同点，只能单独写了。 父对象代码如下： JControls.Control = Class.create({
《游戏脚本的设计与开发》-(RPG部分)3.2 地图遮挡和人物行走
lufy小屋
01-02 2万+
上一节中已经介绍了RPG游戏中地图怎么实现，在RPG游戏的地图中通常有各种遮挡，比如人物站在房屋的后面的时候，房子应该遮挡住人物，这就涉及到各种建筑物和人物的排序显示。另外，上一节中我为了测试地图，已经添加了一个简单的人物类Character，这个类是我从其他游戏中拷贝过来的，本次除了介绍地图上的遮挡之外，也会详细介绍一下一个人物类的具体实现方法，包括它的动作改变，方向变换以及行走。
html5 游戏 地图,HTML5 RPG游戏引擎 地图实现篇
weixin_36418590的博客
05-31 412
[j];indexY = Math.floor(index/mapdata.length);indexX = index - indexY*mapdata.length;bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);bitmap = new LBitma...
HTML5 RPG游戏示例
weixin_30566063的博客
08-24 303
演示地址 点击打开链接 转载于:https://www.cnblogs.com/pangblog/p/3279674.html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值