用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

 

第四篇，继承与简单的rpg

用仿ActionScript的语法来编写html5——第一篇，

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

 

这次用继承自LSprite的类来实现简单的rpg的demo

先看一下最后的代码与as的相似度

 

var backLayer; 

//地图 

var mapimg; 

//人物 

var playerimg; 

var loader 

var imageArray; 

var loadIndex = 0; 

var imgData = new Array({name:"back.jpg",img:null},{name:"1.png",img:null},{name:"2.png",img:null}); 

var chara; 

var charaList; 

 

 

function main(){ 

    loadImage(); 

} 

function loadImage(){ 

    if(loadIndex >= imgData.length){ 

        gameInit(); 

        return; 

    } 

    loader = new LLoader(); 

    loader.addEventListener(LEvent.COMPLETE,loadComplete); 

    loader.load(imgData[loadIndex].name,"bitmapData"); 

} 

function loadComplete(event){ 

    imgData[loadIndex].img = loader.content; 

    loadIndex++; 

    loadImage(); 

} 

function gameInit(event){ 

    var bitmapdata; 

    bitmapdata = new LBitmapData(imgData[0].img); 

    mapimg = new LBitmap(bitmapdata); 

     

    document.getElementById("inittxt").innerHTML=""; 

    backLayer = new LSprite(); 

    addChild(backLayer); 

    backLayer.addChild(mapimg); 

     

    bitmapdata = new LBitmapData(imgData[1].img,0,0,70,92); 

    imageArray = LGlobal.pideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8); 

    playerimg = new LBitmap(bitmapdata); 

    chara = new CharacterSprite(true,playerimg,imageArray,0,0); 

    backLayer.addChild(chara); 

 

 

    charaList = new Array(); 

    for(var i=0;i<10;i++){ 

        bitmapdata = new LBitmapData(imgData[2].img,0,0,80,91); 

        imageArray = LGlobal.pideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8); 

        playerimg = new LBitmap(bitmapdata); 

        var npcx = parseInt(Math.random()*800/3)*3; 

        var npcy = parseInt(Math.random()*480/3)*3; 

        var npc = new CharacterSprite(false,playerimg,imageArray,npcx,npcy); 

        backLayer.addChild(npc); 

        charaList.push(npc); 

    } 

     

    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe) 

    backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown); 

} 

 

 

function onframe(){ 

    chara.onframe(); 

     

    for(var i=0;i<charaList.length;i++){ 

        charaList[i].onframe(); 

    } 

} 

function onmousedown(event){ 

    chara.toCoordinate.x = parseInt(event.selfX/3)*3; 

    chara.toCoordinate.y = parseInt(event.selfY/3)*3; 

} 

 

 

应该还算可以吧？

看一下成果吧,看不到效果的请下载支持html5的浏览器

https://fsanguo.comoj.com/html5/jstoas03/index.html

 

 

下面说一说如何继承，继承的话，js没有办法像as那样继承，

js的继承看下面

 

function base(derive,baseSprite,baseArgs){ 

    baseSprite.apply(derive,baseArgs); 

     

    for(prop in baseSprite.prototype){ 

        var proto = derive.constructor.prototype; 

        if(!proto[prop]){ 

            proto[prop] = baseSprite.prototype[prop]; 

        } 

    } 

} 

 

 

三个参数分别是child,base,base构造器参数数组

这个方法可以实现js的完美继承

现在来建立一个继承自LSprite的类CharacterSprite

只需要在构造器里调用base(this,LSprite,[])就可以实现继承

而且CharacterSprite因为继承了LSprite的方法，所以它有addChild等方法

CharacterSprite类代码如下

 

function CharacterSprite(ishero,bitmap,imageArray,x,y){ 

    base(this,LSprite,[]); 

    var self = this; 

    self.x = x; 

    self.y = y; 

    self.toCoordinate = {x:x,y:y}; 

    self.ishero = ishero; 

    self.animeIndex = 0; 

    self.dirindex = 0; 

    self.dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7}; 

     

    self.bitmap = bitmap; 

    self.imageArray = imageArray; 

    self.addChild(bitmap); 

} 

CharacterSprite.prototype.onframe = function (){ 

    var self = this; 

    self.animeIndex++; 

    if(self.animeIndex >= self.imageArray[0].length){ 

        self.animeIndex = 0; 

    } 

    var markx = 0,marky = 0; 

    var l = 3; 

    if(self.x > self.toCoordinate.x){ 

        self.x -= l; 

        markx = -1; 

    }else if(self.x < self.toCoordinate.x){ 

        self.x += l; 

        markx = 1;  

    } 

    if(self.y > self.toCoordinate.y){ 

        self.y -= l; 

        marky = -1; 

    }else if(self.y < self.toCoordinate.y){ 

        self.y += l; 

        marky = 1; 

    } 

    if(markx !=0 || marky != 0){ 

        var mark = markx+","+marky; 

        self.dirindex = self.dirmark[mark]; 

    }else if(!self.ishero){ 

        if(self.index > 0){ 

            self.index -= 1; 

        }else{ 

            self.index = parseInt(Math.random()*300); 

            self.toCoordinate.x = parseInt(Math.random()*800/3)*3; 

            self.toCoordinate.y = parseInt(Math.random()*480/3)*3; 

        } 

    } 

    self.bitmap.bitmapData.setCoordinate(self.imageArray[self.dirindex][self.animeIndex].x,self.imageArray[self.dirindex][self.animeIndex].y); 

     

} 

 

 

然后，准备好图片，按照最开始的代码，就可以完成rpg人物的添加移动等内容了

 

 

下一篇，也不知该研究什么了，先试着做个小游戏，然后看缺什么吧

 

摘自 lufy小屋