蘑菇游戏_熊碰撞蘑菇处理

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<title>熊碰撞蘑菇处理</title>
		<script type="text/javascript">
		var backgroundImg=new Image();
		var mushroomImg=new Image();
		//定义一个熊
		var bearEyesClosedImg=new Image();
		var speed=2;//开始的速度
		var horizontalSpeed=speed;//水平速度
		var verticalSpeed=-speed;//垂直速度
		var bearAngle=2;//熊旋转速度
		var ctx;
		var screenWidth;
		var screenHeight;
		//定义游戏物体对象
		function GameObject(){
			this.x=0;
			this.y=0;
			this.image=null;
		}
		function Mushroom(){};
		Mushroom.prototype=new GameObject();//继承GameObject
		//定义一个熊Amimal继承GameObject
		function Animal(){};
		Animal.prototype=new GameObject();
		Animal.prototype.angle=0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回）
		var animal=new Animal();//实例化一个熊
		var mushroom=new Mushroom();
		function gameLoop(){
			//清屏
			ctx.clearRect(0, 0, screenWidth, screenHeight);
			ctx.save();
			//绘制背景
			ctx.drawImage(backgroundImg,0,0);
			//绘制蘑菇
			ctx.drawImage(mushroom.image,mushroom.x,mushroom.y);
			animal.x+=horizontalSpeed;
			animal.y+=verticalSpeed;
			animal.angle+=bearAngle;
			ctx.translate(animal.x+(animal.image.width/2),animal.y+(animal.image.height/2));//转换画布的用户坐标系统。
			ctx.rotate(animal.angle*Math.PI/180);//旋转画布
			ctx.drawImage(animal.image,-(animal.image.width/2),-(animal.image.height/2));
			ctx.restore();
			HasAnimalHitEdge();
			HasAnimalHitMushroom();
		}
		function loadImages(){
			mushroomImg.src="mushroom.png";
			backgroundImg.src="forest1.jpg";
			bearEyesClosedImg.src="bear_eyesclosed.png";
			mushroom.image=mushroomImg;
			animal.image=bearEyesClosedImg;
		}
		function AddEventHandlers(){
			$("#container").mousemove(function(e){
				mushroom.x=e.pageX-(mushroom.image.width/2);
			});
		}
		//检测碰撞边界
		function HasAnimalHitEdge(){
			//熊碰到右边边界
			if(animal.x>screenWidth-animal.image.width){
				if(horizontalSpeed>0){
					horizontalSpeed=-horizontalSpeed;
				}
			}
			//熊碰到左边边界
			if(animal.x<-10){
				if(horizontalSpeed<0){
					horizontalSpeed=-horizontalSpeed;
				}
			}
			if(animal.y>screenHeight-animal.image.height){
				setTimeout(function(){
					horizontalSpeed=speed;
					verticalSpeed=-speed;
					animal.x=parseInt(screenWidth/2);
					animal.y=parseInt(screenHeight/2);
					gameLoop();
				},2000);
			}
			if(animal.y<0){
				verticalSpeed=-verticalSpeed;
			}
		}
		//检测2个物体是否碰撞
		function CheckIntersect(object1, object2, overlap){
			A1=object1.x+overlap;
			B1=object1.x+object1.image.width-overlap;
			C1=object1.y+overlap;
			D1=object1.y+object1.image.height-overlap;
			
			A2=object2.x+overlap;
			B2=object2.x+object2.image.width-overlap;
			C2=object2.y+overlap;
			D2=object2.y+object2.image.height-overlap;
			//假如他们在x-轴重叠
			if(A1>A2&&A1<B2||B1>A2&&B1<B2){
				if(C1>C2&&C1<D1||D1>C2&&D1<D2){
					return true;
				}
			}
			return false;
		}
		function HasAnimalHitMushroom(){
				//假如碰撞
			if(CheckIntersect(animal, mushroom, 5))
			{
				//假如碰撞的位置属于蘑菇的左下位置
				if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))
				{
					horizontalSpeed = -speed;//反弹
				}
				//假如碰撞的位置属于蘑菇的左上位置
				else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))
				{
					//反弹速度减半
					horizontalSpeed = -speed/2;
				}
				//假如碰撞的位置属于蘑菇的右上位置
				else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))
				{
					horizontalSpeed = speed/2;
				}
				else
				{
					horizontalSpeed = speed;
				}
				verticalSpeed = -speed;//改变垂直速度。也即动物向上移动
		 
			}

		}

		$(window).ready(function(){
			AddEventHandlers();
			loadImages();
			ctx=document.getElementById("canvas").getContext('2d');;
			screenWidth=parseInt($("#canvas").attr("width"));
			screenHeight = parseInt($("#canvas").attr("height"));
			mushroom.image = mushroomImg;
			mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标  
            mushroom.y = screenHeight - 40;//蘑菇Y坐标    
            animal.x = parseInt(screenWidth/2);// 蘑菇X坐标  
            animal.y = screenHeight - 40;//蘑菇Y坐标    
            setInterval(gameLoop, 10);
		});
	</script> 
	</head>
	<body>
		<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
			<canvas id="canvas" width="480" height="320" >
			</canvas>
	    </div>
	</body>
</html>
蘑菇游戏_熊碰撞蘑菇处理

猜你喜欢
