Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 4, héritage et jeu de rôle simple

Cette fois, j'utilise une classe héritée de LSprite pour implémenter une simple démo de RPG
Jetons d'abord un coup d'œil à la similitude entre le code final et comme

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

Il devrait être plutôt bien, non ?
Jetez un œil aux résultats. Si vous ne voyez pas l'effet, veuillez télécharger un navigateur prenant en charge html5
http://fsanguo.comoj.com/html5/jstoas03/index.html


ci-dessous Parlons de la façon d'hériter. En termes d'héritage, js ne peut pas hériter comme
L'héritage JS est illustré ci-dessous

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

Les trois paramètres sont enfant, base et. tableau de paramètres du constructeur de base
Cette méthode peut obtenir un héritage parfait de js
Créons maintenant une classe CharacterSprite qui hérite de LSprite
Il vous suffit d'appeler base(this,LSprite,[]) dans le constructeur pour obtenir héritage
et CharacterSprite Parce qu'il hérite de la méthode LSprite, il a addChild et d'autres méthodes
Le code de la classe CharacterSprite est le suivant

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

Ce qui précède consiste à utiliser une syntaxe de type ActionScript pour write html5 - Partie 4, héritage et RPG simple Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !