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

原创 2011年09月13日 11:34:04

第三篇,鼠标事件与游戏人物移动


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

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


一,假设
假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用。
这样的话,添加鼠标事件,其实只需要给canvas添加一个鼠标事件,然后循环LGlobal类里的childList,即循环所有的可视对象,如果被添加了鼠标事件,那么就调用它相应的方法。
二,实现
1,给LGlobal类追加mouseEvent方法,然后修改LGlobal类的setCanvas,实现canvas的鼠标事件的添加与调用

LGlobal.setCanvas = function (id,width,height){
	LGlobal.canvasObj = document.getElementById(id);
	if(width)LGlobal.canvasObj.width = width;
	if(height)LGlobal.canvasObj.height = height;
	LGlobal.width = LGlobal.canvasObj.width;
	LGlobal.height = LGlobal.canvasObj.height;
	LGlobal.canvas = LGlobal.canvasObj.getContext("2d");
    
    LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){
    	LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);
	});
} 
LGlobal.mouseEvent = function(event,type){
	var key;
	for(key in LGlobal.childList){
		if(LGlobal.childList[key].mouseEvent){
			LGlobal.childList[key].mouseEvent(event,type);
		}
	}
}

2,给LSprite类添加mouseList数组,用来保存所添加的鼠标事件,然后添加mouseEvent方法
mouseEvent方法中,我们需要做2个处理,
1),判断自己是否添加了鼠标事件,如果没有添加,则循环它的childList
2),如果添加了鼠标事件,判断自己是否被点击,LSprite虽说意义上是可视类,但是其实目前它本身是不可见的,可见的是它上面的Bitmap,准确点说,是这个Bitmap类中的BitmapData,更准确点说,是这个BitmapData中的Image,所以判断自己是否被点击,需要判断的是LSprite中的childList中的可视对象是否被点击,如果被点击,则调用相应的方法
mouseEvent:function (event,type,cood){
		if(cood==null)cood={x:0,y:0};
		var self = this;
		if(self.mouseList.length == 0){
			for(key in self.childList){
				if(self.childList[key].mouseEvent){
					self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});
				}
			}
			return;
		}
		if(self.childList.length == 0)return;
		var key;
		var isclick = false;
		for(key in self.childList){
			isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});
			if(isclick)break;
		}
		if(isclick){
			for(key in self.mouseList){
				var obj = self.mouseList[key];
				if(obj.type == type){
					event.selfX = event.offsetX - (self.x+cood.x);
					event.selfY = event.offsetY - (self.y+cood.y);
					event.currentTarget = self;
					obj.listener(event);
				}
			}
			return;
		}
		
	},
	ismouseon:function(event,cood){
		var self = this;
		var key;
		var isclick = false;
		for(key in self.childList){
			isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});
			if(isclick)break;
		}
		return isclick;
	}


ismouseon方法,用来判断自己是否被点击
LBitmap类中也需要判断是否自己被点击,所以添加ismouseon
ismouseon:function(event,cood){
		var self = this;
		if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x + self.width && 
			event.offsetY >= self.y + cood.y && event.offsetY <= self.y + cood.y + self.height){
			return true;
		}else{
			return false;
		}
	}


添加鼠标事件的时候,模仿ActionScript的语法
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);




下面,准备一张地图,一个人物行走图,用鼠标事件来控制人物的走动,
init(80,"back",800,480,main);


var list = new Array();
var index = 0;
var backLayer;
//地图
var mapimg;
//人物
var playerimg;
var loader
var imageArray;
var animeIndex = 0;
var dirindex = 0;
var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-1,y:1},{x:1,y:1},{x:-1,y:-1},{x:1,y:-1});
var 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};


//移动目标
var toX = 0;
var toY = 0;
function main(){
	
	loader = new LLoader();
	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
	loader.load("back.jpg","bitmapData");
}
function loadBitmapdata(event){
	var bitmapdata = new LBitmapData(loader.content);
	mapimg = new LBitmap(bitmapdata);
	loader = new LLoader();
	loader.addEventListener(LEvent.COMPLETE,loadOver);
	loader.load("1.png","bitmapData");
}
function loadOver(event){
	var bitmapdata = new LBitmapData(loader.content,0,0,70,92);
	imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);
	document.getElementById("inittxt").innerHTML="";
	playerimg = new LBitmap(bitmapdata);
	playerimg.bitmapData.setCoordinate(0,0);
	index = 0;
	backLayer = new LSprite();
	addChild(backLayer);
	backLayer.addChild(mapimg);
	backLayer.addChild(playerimg);
	backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)
	backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);
}


function onframe(){
	index++;
	if(index >= imageArray[0].length){
		index = 0;
	}
	var markx = 0,marky = 0;
	var l = 3;
	if(playerimg.x > toX){
		playerimg.x -= l;
		markx = -1;
	}else if(playerimg.x < toX){
		playerimg.x += l;
		markx = 1;
	}
	if(playerimg.y > toY){
		playerimg.y -= l;
		marky = -1;
	}else if(playerimg.y < toY){
		playerimg.y += l;
		marky = 1;
	}
	if(markx !=0 || marky != 0){
		var mark = markx+","+marky;
		dirindex = dirmark[mark];
	}
	playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);
}
function onmousedown(event){
	toX = parseInt(event.selfX/3)*3;
	toY = parseInt(event.selfY/3)*3;
}




看一下成果吧
http://fsanguo.comoj.com/html5/jstoas02/index.html


下一篇,研究下继承吧

用仿ActionScript的语法来编写html5——第七篇,自定义按钮

第七篇,自定义按钮 这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码, function gameI...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:41
  • 5165

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

第四篇,继承与简单的rpg 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article/d...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 17:36
  • 5075

用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEv...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月26日 21:39
  • 5000

用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。 这次用Sprite来动态显示图片。 依然遵循上一篇对显示对象的处理的思路,添加LSprit...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月08日 16:25
  • 10090

用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

用仿ActionScript的语法来编写html5——第六篇,TextField与输入框 一,对比 1,html5中 首先看看在html5的canvas中的文字显示 var canva...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月16日 15:28
  • 7156

flex---->ActionScript 3.0基本语法

测试输出: trace(123); trace("abc");  变量与常量: var a:int, b:int, c:int; a = b = c = 6; trace(a, b, c); ...
  • ncepustrong
  • ncepustrong
  • 2012年08月27日 20:19
  • 1180

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

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...
  • lufy_Legend
  • lufy_Legend
  • 2011年10月05日 11:21
  • 13344

用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

第八篇,图片处理+粒子效果用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:45
  • 6809

用仿ActionScript的语法来编写html5——第一篇,显示一张图片

最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 ...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月06日 13:15
  • 24579

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.cs...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月15日 12:44
  • 7240
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
举报原因:
原因补充:

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