<!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>