html5(熊与蘑菇)一步一步学做游戏 第三回:让熊动起来
2012-05-30 15:24
302 查看
这一回我们让熊动起来~ 预期达到效果: http://www.html5china.com/html5games/mogu/index2.html 一、先定义全局变量 JavaScript Code 复制内容到剪贴板 var bearEyesClosedImg= new Image(); //闭着眼睛的熊熊 var…
这一回我们让熊动起来~
预期达到效果: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
希望大家在其他地方引用的时候,注明引用来自html5中文网
--作者:深邃老马
这一回我们让熊动起来~
预期达到效果: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
希望大家在其他地方引用的时候,注明引用来自html5中文网
--作者:深邃老马
相关文章推荐
- 一步一步学做游戏 第三回:让熊动起来
- html5(熊与蘑菇)一步一步学做游戏 第一回:游戏分析
- html5(熊与蘑菇)一步一步学做游戏 第二回:让蘑菇随鼠标动起来
- html5(熊与蘑菇)一步一步学做游戏 第四回:熊碰撞边界处理
- html5(熊与蘑菇)一步一步学做游戏 第五回:熊碰撞蘑菇处理
- html5(熊与蘑菇)一步一步学做游戏 第六回:绘制奖品
- html5(熊与蘑菇)一步一步学做游戏 第七回:熊碰到奖品处理
- html5(熊与蘑菇)一步一步学做游戏 第八回:完善游戏
- 一步一步学Cocos2d-html5做游戏教程(入门篇)
- 一步一步学Jquery+HTML5做游戏教程讨论
- 一步一步学做游戏 第二回:让蘑菇随鼠标动起来
- 一步一步学做游戏 第二回:让蘑菇随鼠标动起来
- cocos2d-html5游戏学习之绘画蘑菇
- 一步一步学做游戏 第三回:让熊动起来
- 一步一步学做游戏 第五回:熊碰撞蘑菇处理
- [Cocos2d-html5] 使用Ant一步一步压缩混淆Cocos2d-html5游戏
- 使用Ant一步一步压缩混淆Cocos2d-html5游戏
- HTML5游戏引擎排行榜
- 零基础HTML5游戏制作教程 第3章 图形的移动
- 分享一个帮助你快速构建HTML5游戏的javascript类库 - CreateJS