- 浏览: 296442 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
熊碰撞蘑菇处理
第五回主要讲熊碰到蘑菇之后向上反弹的效果
预期达到的效果:http://www.html5china.com/html5games/mogu/index4.html
一、由于碰撞的地方比较多,所以定义一个通用的判断2个物体是否碰撞的函数
JavaScript Code复制内容到剪贴板
1. //方法用途:检测2个物体是否碰撞
2. //参数object1:物体1
3. //参数object1:物体2
4. //参数overlap:可重叠的区域值
5. //返回布尔值:碰撞返回true,不碰撞返回false
6. function CheckIntersect(object1, object2, overlap)
7. {
8. // x-轴 x-轴
9. // A1------>B1 C1 A2------>B2 C2
10. // +--------+ ^ +--------+ ^
11. // | object1| | y-轴 | object2| | y-轴
12. // | | | | | |
13. // +--------+ D1 +--------+ D2
14. // 看图可知两物体各4个点的位置
15. A1 = object1.x + overlap;
16. B1 = object1.x + object1.image.width - overlap;
17. C1 = object1.y + overlap;
18. D1 = object1.y + object1.image.height - overlap;
19.
20. A2 = object2.x + overlap;
21. B2 = object2.x + object2.image.width - overlap;
22. C2 = object2.y + overlap;
23. D2 = object2.y + object2.image.width - overlap;
24.
25. //假如他们在x-轴重叠
26. if(A1 > A2 && A1 < B2
27. || B1 > A2 && B1 < B2)
28. {
29. //判断y-轴重叠
30. if(C1 > C2 && C1 < D1
31. || D1 > C2 && D1 < D2)
32. {
33. //碰撞
34. return true;
35. }
36. }
37. return false;
38. }
二、熊碰撞蘑菇发生的事件以及处理
JavaScript Code复制内容到剪贴板
1. //动物碰撞蘑菇
2. function HasAnimalHitMushroom()
3. {
4. //假如碰撞
5. if(CheckIntersect(animal, mushroom, 5))
6. {
7. //假如碰撞的位置属于蘑菇的左下位置
8. if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))
9. {
10. horizontalSpeed = -speed;//反弹
11. }
12. //假如碰撞的位置属于蘑菇的左上位置
13. else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))
14. {
15. //反弹速度减半
16. horizontalSpeed = -speed/2;
17. }
18. //假如碰撞的位置属于蘑菇的右上位置
19. else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))
20. {
21. horizontalSpeed = speed/2;
22. }
23. else
24. {
25. horizontalSpeed = speed;
26. }
27. verticalSpeed = -speed;//改变垂直速度。也即动物向上移动
28.
29. }
30. }
三、在游戏循环GameLoop()尾部中加入熊碰撞蘑菇函数,如下
JavaScript Code复制内容到剪贴板
1. //游戏功能循环
2. function GameLoop()
3. {
4. //清除屏幕
5. ctx.clearRect(0, 0, screenWidth, screenHeight);
6. ctx.save();
7. //绘制背景
8. ctx.drawImage(backgroundForestImg, 0, 0);
9. //绘制蘑菇
10. ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
11. //绘制熊
12. //改变移动动物X和Y位置
13. animal.x += horizontalSpeed;
14. animal.y += verticalSpeed;
15. //改变翻滚角度
16. animal.angle += bearAngle;
17. //以当前熊的中心位置为基准
18. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
19. //根据当前熊的角度轮换
20. ctx.rotate(animal.angle * Math.PI/180);
21. //描绘熊
22. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
23. ctx.restore();
24. //检测是否碰到边界
25. HasAnimalHitEdge();
26. //检测熊碰撞蘑菇
27. HasAnimalHitMushroom();
28. }
到此第五回的完整代码如下:
展开XML/HTML Code复制内容到剪贴板
第五回就讲到这了,第六回讲描绘奖品
第五回主要讲熊碰到蘑菇之后向上反弹的效果
预期达到的效果:http://www.html5china.com/html5games/mogu/index4.html
一、由于碰撞的地方比较多,所以定义一个通用的判断2个物体是否碰撞的函数
JavaScript Code复制内容到剪贴板
1. //方法用途:检测2个物体是否碰撞
2. //参数object1:物体1
3. //参数object1:物体2
4. //参数overlap:可重叠的区域值
5. //返回布尔值:碰撞返回true,不碰撞返回false
6. function CheckIntersect(object1, object2, overlap)
7. {
8. // x-轴 x-轴
9. // A1------>B1 C1 A2------>B2 C2
10. // +--------+ ^ +--------+ ^
11. // | object1| | y-轴 | object2| | y-轴
12. // | | | | | |
13. // +--------+ D1 +--------+ D2
14. // 看图可知两物体各4个点的位置
15. A1 = object1.x + overlap;
16. B1 = object1.x + object1.image.width - overlap;
17. C1 = object1.y + overlap;
18. D1 = object1.y + object1.image.height - overlap;
19.
20. A2 = object2.x + overlap;
21. B2 = object2.x + object2.image.width - overlap;
22. C2 = object2.y + overlap;
23. D2 = object2.y + object2.image.width - overlap;
24.
25. //假如他们在x-轴重叠
26. if(A1 > A2 && A1 < B2
27. || B1 > A2 && B1 < B2)
28. {
29. //判断y-轴重叠
30. if(C1 > C2 && C1 < D1
31. || D1 > C2 && D1 < D2)
32. {
33. //碰撞
34. return true;
35. }
36. }
37. return false;
38. }
二、熊碰撞蘑菇发生的事件以及处理
JavaScript Code复制内容到剪贴板
1. //动物碰撞蘑菇
2. function HasAnimalHitMushroom()
3. {
4. //假如碰撞
5. if(CheckIntersect(animal, mushroom, 5))
6. {
7. //假如碰撞的位置属于蘑菇的左下位置
8. if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))
9. {
10. horizontalSpeed = -speed;//反弹
11. }
12. //假如碰撞的位置属于蘑菇的左上位置
13. else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))
14. {
15. //反弹速度减半
16. horizontalSpeed = -speed/2;
17. }
18. //假如碰撞的位置属于蘑菇的右上位置
19. else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))
20. {
21. horizontalSpeed = speed/2;
22. }
23. else
24. {
25. horizontalSpeed = speed;
26. }
27. verticalSpeed = -speed;//改变垂直速度。也即动物向上移动
28.
29. }
30. }
三、在游戏循环GameLoop()尾部中加入熊碰撞蘑菇函数,如下
JavaScript Code复制内容到剪贴板
1. //游戏功能循环
2. function GameLoop()
3. {
4. //清除屏幕
5. ctx.clearRect(0, 0, screenWidth, screenHeight);
6. ctx.save();
7. //绘制背景
8. ctx.drawImage(backgroundForestImg, 0, 0);
9. //绘制蘑菇
10. ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
11. //绘制熊
12. //改变移动动物X和Y位置
13. animal.x += horizontalSpeed;
14. animal.y += verticalSpeed;
15. //改变翻滚角度
16. animal.angle += bearAngle;
17. //以当前熊的中心位置为基准
18. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
19. //根据当前熊的角度轮换
20. ctx.rotate(animal.angle * Math.PI/180);
21. //描绘熊
22. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
23. ctx.restore();
24. //检测是否碰到边界
25. HasAnimalHitEdge();
26. //检测熊碰撞蘑菇
27. HasAnimalHitMushroom();
28. }
到此第五回的完整代码如下:
展开XML/HTML Code复制内容到剪贴板
第五回就讲到这了,第六回讲描绘奖品
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1312转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14261.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 9991 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1238One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1384版权声明:转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1125你一整年都像现在一样沮丧,这我知道。所有铁杆Objecti ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1914本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 899本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2843本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1499本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1143JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1365本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 694css中display属性的参考值: display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6665简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1072设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 995在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7467超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1025Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 734В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1351html5 代码: <video width ...
相关推荐
003《老HRD手把手教你做绩效考核》.pdf
手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F...
这是教程手把手教你做问答系列的资源。 系列专题:https://blog.csdn.net/weixin_43233491/category_9656513.html
手把手教你配路由器手把手教你配路由器手把手教你配路由器手把手教你配路由器手把手教你配路由器
手把手教你学2812,很全面的一本书。电子版,适合初学者学习,
手把手教你学28335PDF文档,看了这个确实和2812有了对比
本书主要介绍如何利用3D固定流水线编写游戏引擎,以及在已编写引擎的基础上开发游戏,全书共分10章,主要内容包括游戏引擎简介、数学知识、材质和光照、固定流水线、游戏引擎架构、3D引擎底层封装、3D引擎封装、游戏...
手把手教你用C#制作RPG游戏__罗培羽著是一本很好的国内开发RPG游戏的书籍,可以教会读者如何学会C#做游戏,而Unity3D网络游戏实战游戏开发与设计技术丛书 是在C#基础上,利用Unity引擎开发网络实战游戏,这两本书...
手把手教你DSP配套资料 很有用的资料,用钱买来的资料
手把手教你如何从一无所有到财务自由.pdf
手把手教你学DSP28335高清pdf文件,北京航空航天大学出版社
手把手教你学dsp电子版,文档有标签,一本很好的dsp入门书,希望大家一起学习!
高清珍藏学习嵌入式开发入门最好资料《手把手教你学51单片机》教材pdf
手把手教你学DSP配套资源,里面包含例程和头文件以及配套调试助手
手把手教你学dsp2812,这本书是顾卫刚的,他的讲解比较详细
手把手教你单片机程序框架---吴坚鸿doc,手把手教你单片机程序框架---吴坚鸿
对于新手来说,很多人还不会一些窗体设计和消息响应的添加,本项目将手把手教你做一个学生考试管理系统
手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 手把手教你制作html登录和注册页面 ...
手把手教你学DSP 顾卫刚.以TMS320X281X, DSP的开发为主线,采用生动的语言深入浅出的介绍与DSP开发的方方面面,适合初学者。
手把手教你做批处理,cmd命令大全,dos命令大全,简明批处理