ActionScript와 유사한 구문을 사용하여 html5 작성 - 4부, 상속 및 단순 RPG 작성

이번에는 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의 완벽한 상속을 실현할 수 있습니다

이제 LSprite를 상속하는 CharacterSprite 클래스를 생성해 보겠습니다

생성자에서 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];  
        }  
    }  
}

위는 ActionScript와 유사한 구문을 사용하여 html5를 작성하는 것입니다. Part 4, 상속과 단순 RPG 컨텐츠, 기타 더 많은 관련 컨텐츠는 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!