html5 手把手教你做游戏《熊和蘑菇》(三)

这一回我们让熊动起来~
预期达到效果：http://www.html5china.com/html5games/mogu/index2.html
一、先定义全局变量
JavaScript Code复制内容到剪贴板
1. var bearEyesClosedImg = new Image();//闭着眼睛的熊熊   
2. var horizontalSpeed = 2;//水平速度  
3. var verticalSpeed = -2; //垂直速度,开始肯定是要向上飘，所以要负数  
4. var bearAngle = 2;//熊旋转的速度 
二、定义熊
首先定义一只公用熊
JavaScript Code复制内容到剪贴板
1. //定义动物熊 Animal 继承 游戏对象GameObject  
2. function Animal() {};  
3. Animal.prototype = new GameObject();//游戏对象GameObject  
4. Animal.prototype.angle = 0;//旋转的角度，（用来改变熊的旋转速度) 
定义我们使用的熊
JavaScript Code复制内容到剪贴板
1. //定义熊实例   
2. var animal = new Animal(); 
初始化熊
JavaScript Code复制内容到剪贴板
1. bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的  
2. animal.image = bearEyesClosedImg;//熊图片  
3. animal.x = parseInt(screenWidth/2);//x坐标  
4. animal.y = parseInt(screenHeight/2); //y坐标 
三、描绘熊在画布上
因为熊是相对移动的，所以我们要加一个基准
JavaScript Code复制内容到剪贴板
1. //以当前熊的中心位置为基准  
2. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));  
3. //描绘熊  
4. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2)); 
但是熊要旋转啊，好的，想要改变它的角度，上面的代码中加入旋转
JavaScript Code复制内容到剪贴板
1. //以当前熊的中心位置为基准  
2. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));  
3. //根据当前熊的角度轮换  
4. ctx.rotate(animal.angle * Math.PI/180);  
5. //描绘熊  
6. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2)); 
上面的熊是不动的，为什么呢，因为x,y轴和角度没变，因此我们再加上改变x,y和角度的代码,于是上面的代码变成了
JavaScript Code复制内容到剪贴板
1. //改变移动动物X和Y位置  
2. animal.x += horizontalSpeed;  
3. animal.y += verticalSpeed;  
4. //改变翻滚角度  
5. animal.angle += bearAngle;  
6. //以当前熊的中心位置为基准  
7.         ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));  
8. //根据当前熊的角度轮换  
9.     ctx.rotate(animal.angle * Math.PI/180);  
10. //描绘熊  
11.     ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2)); 
到现目前为止熊已经能滚动和移动了，最终代码如下：
展开XML/HTML Code复制内容到剪贴板
第三回就讲到这了，第四回讲熊碰撞边界和蘑菇的事件