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 (m.sbmmt.com)!