用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

原创 2011年09月13日 17:36:49
第四篇,继承与简单的rpg


用仿ActionScript的语法来编写html5——第一篇,显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032


用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6760812


用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
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;
}


应该还算可以吧?
看一下成果吧,看不到效果的请下载支持html5的浏览器
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人物的添加移动等内容了


下一篇,也不知该研究什么了,先试着做个小游戏,然后看缺什么吧

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

第三篇,鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article...

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...

如何制作一款HTML5 RPG游戏引擎——第二篇,烟雨+飞雪效果

今天我们来实现烟雨+飞雪效果。首先来说,一款经典的RPG游戏难免需要加入天气的变化。那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它。 本文为该系列文章的第二篇,如果想了解以前的文章可以...

如何制作一款HTML5 RPG游戏引擎——第三篇,利用幕布切换场景

本文转载自 http://blog.csdn.net/yorhomwang/article/details/9042571 开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果...

如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做。由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于luf...

使用Python语言编写简单的HTML5语法解析器

使用Python语言编写简单的HTML5语法解析器 摘要:通过使用Python语言编写一个简单的HTML5语法解析器作为例子,探讨了在设计手写的递归下降语法解析器程序时需要注意的一些事项。   关...
  • cteng
  • cteng
  • 2014年09月04日 10:35
  • 2039

如何制作一款HTML5 RPG游戏引擎——第五篇,人物&人物特效

上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类。 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里。 为了使这个类更有意义,我还给人物类加...

如何制作一款HTML5 RPG游戏引擎——第三篇,利用幕布切换场景

开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果。所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕。 为了大家做游戏方便,于是我给这个引擎加了...

如何制作一款HTML5 RPG游戏引擎——第五篇,人物&人物特效

上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类。 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里。 为了使这个类更有意义,我还给...

【HTML5游戏开发小技巧】RPG情景对话中,令文本逐字输出

以前用JAVAscript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下。canvas里的内容可不像那样好操作,首先,你需要懂得一些html5的API才能操作canvas,而...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
举报原因:
原因补充:

(最多只允许输入30个字)