admin 管理员组

文章数量: 887016

html5（熊与蘑菇）一步一步学做游戏 第三回：让熊动起来

这一回我们让熊动起来~ 预期达到效果： .html 一、先定义全局变量 JavaScript Code 复制内容到剪贴板 var bearEyesClosedImg= new Image(); //闭着眼睛的熊熊 var…

 这一回我们让熊动起来~

预期达到效果：.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 复制内容到剪贴板

 第三回就讲到这了，第四回讲熊碰撞边界和蘑菇的事件

大家有什么建议的话，可以到论坛留言讨论：.php?tid=2

希望大家在其他地方引用的时候，注明引用来自html5中文网

 --作者：深邃老马    

本文标签： html5（熊与蘑菇）一步一步学做游戏 第三回让熊动起来

版权声明：本文标题：html5（熊与蘑菇）一步一步学做游戏 第三回：让熊动起来 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351529h1533208.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。