一步一步学做游戏第五回：熊碰撞蘑菇处理

第五回主要讲熊碰到蘑菇之后向上反弹的效果预期达到的效果： http://www.html5china.com/html5games/mogu/index4.html 一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函…

第五回主要讲熊碰到蘑菇之后向上反弹的效果

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

一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函数

JavaScript Code 复制内容到剪贴板

//方法用途：检测2个物体是否碰撞
//参数object1：物体1
//参数object1：物体2
//参数overlap：可重叠的区域值
//返回布尔值：碰撞返回true，不碰撞返回false
function CheckIntersect(object1, object2, overlap)
{
// x-轴 x-轴
// A1------>B1 C1 A2------>B2 C2
// +--------+ ^ +--------+ ^
// | object1| | y-轴 | object2| | y-轴
// | | | | | |
// +--------+ D1 +--------+ D2
// 看图可知两物体各4个点的位置
A1 = object1.x + overlap;
B1 = object1.x + object1.image.width - overlap;
C1 = object1.y + overlap;
D1 = object1.y + object1.image.height - overlap;
A2 = object2.x + overlap;
B2 = object2.x + object2.image.width - overlap;
C2 = object2.y + overlap;
D2 = object2.y + object2.image.width - overlap;
//假如他们在x-轴重叠
if(A1 > A2 && A1 < B2
|| B1 > A2 && B1 < B2)
{
//判断y-轴重叠
if(C1 > C2 && C1 < D1
|| D1 > C2 && D1 < D2)
{
//碰撞
return true;
}
}
return false;
}

二、熊碰撞蘑菇发生的事件以及处理

JavaScript Code 复制内容到剪贴板

//动物碰撞蘑菇
function HasAnimalHitMushroom()
{
//假如碰撞
if(CheckIntersect(animal, mushroom, 5))
{
//假如碰撞的位置属于蘑菇的左下位置
if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))
{
horizontalSpeed = -speed;//反弹
}
//假如碰撞的位置属于蘑菇的左上位置
else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))
{
//反弹速度减半
horizontalSpeed = -speed/2;
}
//假如碰撞的位置属于蘑菇的右上位置
else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))
{
horizontalSpeed = speed/2;
}
else
{
horizontalSpeed = speed;
}
verticalSpeed = -speed;//改变垂直速度。也即动物向上移动
}
}

三、在游戏循环GameLoop()尾部中加入熊碰撞蘑菇函数，如下

JavaScript Code 复制内容到剪贴板

//游戏功能循环
function GameLoop()
{
//清除屏幕
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
//绘制背景
ctx.drawImage(backgroundForestImg, 0, 0);
//绘制蘑菇
ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
//绘制熊
//改变移动动物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));
ctx.restore();
//检测是否碰到边界
HasAnimalHitEdge();
//检测熊碰撞蘑菇
HasAnimalHitMushroom();
}

到此第五回的完整代码如下：

展开 XML/HTML Code 复制内容到剪贴板

第五回就讲到这了，第六回讲描绘奖品

大家有什么建议的话，可以到论坛留言讨论：http://bbs.html5china.com/read.php?tid=2

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

--作者：深邃老马

-----------------逆水行舟，不进则退

一步一步学做游戏第五回：熊碰撞蘑菇处理相关推荐

html5（熊与蘑菇）一步一步学做游戏第一回：游戏分析
该游戏教程主要参考了老外Jason Croucher的博客 http://jacebook.co.uk/blog/2010/09/11/html5-writing-a-game/ 游戏代码也下载自他的 ...
我在日本学做游戏期间的所见所闻与所想
"想去日本学做游戏",我当初只有这么一个懵懵懂懂的想法.或许有些朋友的情况与我类似,从小接触游戏,自然而然有了投身游戏行业的想法.国内现在还没有成熟的游戏开发教育体系,而邻国日本作 ...
蘑菇游戏_熊碰撞蘑菇处理
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...
用python的tkinter做游戏（五）—— 魔塔篇
好久没更新了,今天继续:用python自带的tkinter做游戏系列的第五弹,魔塔篇之前的四篇博文介绍的分别是贪食蛇和俄罗斯方块,推箱子的简易版和推箱子的重制版. 用python自带的tkinte ...
一步一步学做游戏第二回：让蘑菇随鼠标动起来
上回分析了游戏,在这一回我们将让蘑菇跟随鼠标动起来~ 达到这个效果: http://www.html5china.com/html5games/mogu/index1.html 一.写html代码 X ...
unity零基础开始学习做游戏（五）看看你的完成度，进度条了解一下？
-------小基原创,转载请给我一个面子上回书说道,英雄和魔王都做完了,子弹也能发射了,就是不知道啥时候能干死魔王.那小基得做个血条来展示一下,他离死不远了(•౪• ) 其实血条也可以看作是进度条 ...
一天一天学做外挂@第五天-物品清单我知道[武林外传]
经过前四天的学习,我想很多朋友一定已经完成一个简单的挂机程序了,不过是不是觉得还不够智能,不够完善呢!如果我们能得到更多的数据,就能更好的控制流程. 学习目的: 1.第四天教程后续延伸 2.地面物品显 ...
跟hoowa学做智能路由(五)：熟悉OpenWRT
题记:呦呦鹿鸣,食野之苹.我有嘉宾,鼓瑟吹笙. 从本章开始,我们要更多的了解系统的特性,以及不论是智能路由还是智能家居,我们用路由器的处理器到底能做多少事情. 系统结构在上一章我们已经完成了刷机工作 ...
html5 游戏制作教程,【整理】一步一步学做HTML5游戏教程
本帖最后由蓝色力量1221 于 2012-11-29 01:26 编辑游戏源码下载地址:http://l13.yunpan.cn/lk/QMQFfWQjvWGvg 该游戏教程主要参考了老外Jaso ...

一步一步学做游戏第五回：熊碰撞蘑菇处理

一步一步学做游戏第五回：熊碰撞蘑菇处理相关推荐

最新文章

热门文章

一步一步学做游戏 第五回：熊碰撞蘑菇处理

一步一步学做游戏 第五回：熊碰撞蘑菇处理相关推荐

最新文章

热门文章

一步一步学做游戏第五回：熊碰撞蘑菇处理

一步一步学做游戏第五回：熊碰撞蘑菇处理相关推荐