Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 4, Vererbung und einfaches RPG

Dieses Mal verwende ich eine von LSprite geerbte Klasse, um eine einfache RPG-Demo zu implementieren
Werfen wir zunächst einen Blick auf die Ähnlichkeit zwischen dem endgültigen Code und wie

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.divideCoordinate(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.divideCoordinate(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;  
}

Es sollte sein ziemlich gut, oder?
Sehen Sie sich die Ergebnisse an. Wenn Sie den Effekt nicht sehen, laden Sie bitte einen Browser herunter, der HTML5 unterstützt
http://fsanguo.comoj.com/html5/jstoas03/index.html


unten Lassen Sie uns darüber sprechen, wie man vererbt.
Die Vererbung von js ist wie folgt

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

Die drei Parameter sind Kind, Basis , und Basiskonstruktorparameter-Array
Diese Methode kann eine perfekte Vererbung von js erreichen
Jetzt erstellen wir eine Klasse CharacterSprite, die von LSprite erbt
Sie müssen nur base(this,LSprite,[]) im Konstruktor aufrufen um Vererbung zu erreichen
und CharacterSprite Da es die Methode von LSprite erbt, verfügt es über Methoden wie addChild
Der Code der CharacterSprite-Klasse lautet wie folgt

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

Das Obige dient der Verwendung von ActionScript- Wie Syntax zum Schreiben von HTML5 - Teil 4, Vererbung und einfaches RPG Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!