这一回我们让熊动起来~

预期达到效果：http://www.html5china.com/html5games/mogu/index2.html

一、先定义全局变量

JavaScript Code复制内容到剪贴板
var bearEyesClosedImg = new Image();//闭着眼睛的熊熊    
var horizontalSpeed = 2;//水平速度   
var verticalSpeed = -2; //垂直速度,开始肯定是要向上飘，所以要负数   
var bearAngle = 2;//熊旋转的速度  
二、定义熊

首先定义一只公用熊

JavaScript Code复制内容到剪贴板
//定义动物熊 Animal 继承 游戏对象GameObject   
function Animal() {};   
Animal.prototype = new GameObject();//游戏对象GameObject   
Animal.prototype.angle = 0;//旋转的角度，（用来改变熊的旋转速度)  
定义我们使用的熊

JavaScript Code复制内容到剪贴板
//定义熊实例    
var animal = new Animal();  
初始化熊

JavaScript Code复制内容到剪贴板
bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的   
animal.image = bearEyesClosedImg;//熊图片   
animal.x = parseInt(screenWidth/2);//x坐标   
animal.y = parseInt(screenHeight/2); //y坐标  
三、描绘熊在画布上

因为熊是相对移动的，所以我们要加一个基准

JavaScript Code复制内容到剪贴板
//以当前熊的中心位置为基准   
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));   
//描绘熊   
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));  
但是熊要旋转啊，好的，想要改变它的角度，上面的代码中加入旋转

JavaScript Code复制内容到剪贴板
//以当前熊的中心位置为基准   
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));  
上面的熊是不动的，为什么呢，因为x,y轴和角度没变，因此我们再加上改变x,y和角度的代码,于是上面的代码变成了

JavaScript Code复制内容到剪贴板
//改变移动动物X和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));  
到现目前为止熊已经能滚动和移动了，最终代码如下：

展开XML/HTML Code复制内容到剪贴板
 第三回就讲到这了，第四回讲熊碰撞边界和蘑菇的事件

大家有什么建议的话，可以到论坛留言讨论：http://bbs.html5china.com/read.php?tid=2
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com