이번에는 LSprite에서 상속받은 클래스를 사용하여 간단한 RPG 데모를 구현해봤습니다
먼저 최종 코드와 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.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; }
의 유사점을 살펴보겠습니다. 꽤 좋을 것 같습니다. , 오른쪽?
결과를 살펴보세요. 효과가 보이지 않으면 html5를 지원하는 브라우저를 다운로드하세요
http://fsanguo.comoj.com/html5/jstoas03/index.html
아래에서 상속 방법에 대해 이야기해보겠습니다. 생성자 매개변수 배열
this 이 메소드는 js의 완벽한 상속을 실현할 수 있습니다
생성자에서 base(this,LSprite,[])를 호출하기만 하면 됩니다. 상속을 실현
그리고 CharacterSprite는 LSprite 메서드를 상속하므로 addChild 및 기타 메서드를 갖습니다.
CharacterSprite 클래스의 코드는 다음과 같습니다
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]; } } }