ActionScript 를 모방 한 문법 으로 html 5-네 번 째 편,계승 과 간단 한 rpg 를 작성 합 니 다.

제4 편,계승 과 간단 한 rpg
ActionScript 를 모방 한 문법 으로 html 5-첫 번 째 편 을 작성 하여 그림 을 표시 합 니 다.
http://blog.csdn.net/lufy_legend/article/details/6753032
ActionScript 를 모방 한 문법 으로 html 5-두 번 째 편 을 작성 하고 Sprite 를 이용 하여 애니메이션 을 실현 합 니 다.
http://blog.csdn.net/lufy_legend/article/details/6760812
html 5-세 번 째,마우스 이벤트 와 게임 캐릭터 이동
http://blog.csdn.net/lufy_legend/article/details/6770713
이번 에는 LSprite 의 클래스 를 계승 하여 간단 한 rpg 의 demo 를 실현 합 니 다.
마지막 코드 와 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;
}

괜 찮 겠 죠?
성 과 를 보 세 요.효과 가 보이 지 않 는 html 5 를 지원 하 는 브 라 우 저 를 다운로드 하 세 요.
http://fsanguo.comoj.com/html5/jstoas03/index.html
다음은 어떻게 계승 하 는 지,계승 하 는 지,js 는 as 처럼 계승 할 방법 이 없다.
js 의 계승 아래

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

세 개의 매개 변 수 는 각각 child,base,base 구조 기 매개 변수 배열 이다.
이 방법 은 js 의 완벽 한 계승 을 실현 할 수 있다.
LSprite 에서 계승 할 클래스 CharacterSprite 를 만 들 겠 습 니 다.
구조 기 에서 base(this,LSprite,[])를 호출 하면 계승 이 가능 합 니 다.
그리고 CharacterSprite 는 LSprite 의 방법 을 계승 하기 때문에 addChild 등 방법 이 있 습 니 다.
CharacterSprite 클래스 코드 는 다음 과 같 습 니 다.

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

그리고 그림 을 준비 하고 시작 코드 에 따라 rpg 캐릭터 의 추가 이동 등 내용 을 완성 할 수 있 습 니 다.
다음 편 은 무엇 을 연구 해 야 할 지 모 르 겠 습 니 다.먼저 작은 게임 을 한 다음 에 무엇이 부족 한 지 보 세 요.