<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<title>熊碰撞蘑菇处理</title>
<script type="text/javascript">
var backgroundImg=new Image();
var mushroomImg=new Image();
//定义一个熊
var bearEyesClosedImg=new Image();
var speed=2;//开始的速度
var horizontalSpeed=speed;//水平速度
var verticalSpeed=-speed;//垂直速度
var bearAngle=2;//熊旋转速度
var ctx;
var screenWidth;
var screenHeight;
//定义游戏物体对象
function GameObject(){
this.x=0;
this.y=0;
this.image=null;
}
function Mushroom(){};
Mushroom.prototype=new GameObject();//继承GameObject
//定义一个熊Amimal继承GameObject
function Animal(){};
Animal.prototype=new GameObject();
Animal.prototype.angle=0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回）
var animal=new Animal();//实例化一个熊
var mushroom=new Mushroom();
function gameLoop(){
//清屏
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
//绘制背景
ctx.drawImage(backgroundImg,0,0);
//绘制蘑菇
ctx.drawImage(mushroom.image,mushroom.x,mushroom.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();
}
function loadImages(){
mushroomImg.src="mushroom.png";
backgroundImg.src="forest1.jpg";
bearEyesClosedImg.src="bear_eyesclosed.png";
mushroom.image=mushroomImg;
animal.image=bearEyesClosedImg;
}
function AddEventHandlers(){
$("#container").mousemove(function(e){
mushroom.x=e.pageX-(mushroom.image.width/2);
});
}
//检测碰撞边界
function HasAnimalHitEdge(){
//熊碰到右边边界
if(animal.x>screenWidth-animal.image.width){
if(horizontalSpeed>0){
horizontalSpeed=-horizontalSpeed;
}
}
//熊碰到左边边界
if(animal.x<-10){
if(horizontalSpeed<0){
horizontalSpeed=-horizontalSpeed;
}
}
if(animal.y>screenHeight-animal.image.height){
setTimeout(function(){
horizontalSpeed=speed;
verticalSpeed=-speed;
animal.x=parseInt(screenWidth/2);
animal.y=parseInt(screenHeight/2);
gameLoop();
},2000);
}
if(animal.y<0){
verticalSpeed=-verticalSpeed;
}
}
//检测2个物体是否碰撞
function CheckIntersect(object1, object2, overlap){
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.height-overlap;
//假如他们在x-轴重叠
if(A1>A2&&A1<B2||B1>A2&&B1<B2){
if(C1>C2&&C1<D1||D1>C2&&D1<D2){
return true;
}
}
return false;
}
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;//改变垂直速度。也即动物向上移动
}
}
$(window).ready(function(){
AddEventHandlers();
loadImages();
ctx=document.getElementById("canvas").getContext('2d');;
screenWidth=parseInt($("#canvas").attr("width"));
screenHeight = parseInt($("#canvas").attr("height"));
mushroom.image = mushroomImg;
mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标
mushroom.y = screenHeight - 40;//蘑菇Y坐标
animal.x = parseInt(screenWidth/2);// 蘑菇X坐标
animal.y = screenHeight - 40;//蘑菇Y坐标
setInterval(gameLoop, 10);
});
</script>
</head>
<body>
<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
<canvas id="canvas" width="480" height="320" >
</canvas>
</div>
</body>
</html>
分享到：
相关推荐
标题“蘑菇游戏_熊碰撞边界处理”涉及到的是游戏开发中的一个重要环节——碰撞检测与边界处理。在游戏开发中，特别是2D游戏，碰撞检测确保了游戏物体（如角色、道具等）之间的交互真实且准确。当游戏中的“熊”与...
【标题】：“蘑菇游戏_让蘑菇动起来” 这篇博客文章主要探讨了如何通过编程技术让蘑菇这一游戏元素在屏幕上生动地动起来。这通常涉及到游戏开发中的动画制作和物理模拟技术，尤其是对于初学者和对游戏开发感兴趣的...
这款游戏中，"蘑菇与熊"的主题可能涉及到森林生态、冒险或者角色扮演等元素，旨在通过趣味性的互动，吸引玩家进行探索和挑战。 HTML5是现代网页开发的标准，它的出现极大地提升了网页的交互性和多媒体内容的承载...
这个“js游戏引擎phaser示例：吃蘑菇游戏”是一个基于Phaser.js开发的互动小游戏，它展示了如何利用该引擎创建一个简单的游戏场景，包括角色控制、碰撞检测以及用户交互。 首先，我们从“game.html”文件入手，这是...
为了实现游戏的物理效果，如锤子的移动、蘑菇的坠落，开发者可能会使用简单的碰撞检测算法，这通常基于几何学原理，比如矩形碰撞检测。同时，为了增加游戏的趣味性，可能还会添加一些特殊效果，如动画、声音等，这些...
3. JavaScript文件：实现游戏的逻辑，包括角色移动、碰撞检测、得分计算、事件处理（如用户输入响应）等。可能使用了像jQuery这样的库来简化DOM操作，或者用到Three.js这样的3D库来增强图形效果。 4. 图片和音频资源...
在游戏开发中，尤其是2D游戏，常用的技术包括图形渲染（如使用SDL或SFML库）、碰撞检测、游戏循环和状态管理等。在这个项目中，我们可以期待看到这些基本概念的实现。比如，角色的移动可能通过键盘输入事件来驱动，...
同时，游戏中的事件处理，如吃到金币或蘑菇的效果，都是通过条件语句来实现的。这种逻辑控制是C语言编程的基础，也是提高编程能力的关键所在。 在C语言中，结构体是封装数据的有效工具。在采蘑菇游戏中，我们可以...
2. **游戏编程基础**：游戏编程涉及到游戏逻辑、图形渲染、碰撞检测、用户输入处理等多个方面。这个课程设计涵盖了游戏的基本元素，如角色控制、游戏场景和障碍物。 3. **输入/输出处理**：游戏中玩家通过鼠标键盘...
"蘑菇与熊"游戏源码可能包含了以下几个关键知识点： 1. Canvas基本操作：学习如何创建Canvas元素，获取其上下文，并通过context对象的drawImage、fillRect、beginPath、arc等方法进行图形绘制。 2. JavaScript基础...
这个游戏是在碰球游戏的基础上改进而来的，加入了连击判断、各种碰撞音乐、计分系统还有生命值，每掉在地上一次，生命少一次。 这是良心系列，绝对不会传与标题不一致的资源，下载后，如不能运行或与运行结果描述不...
总结来说，"超级蘑菇"游戏的设计和实现展示了C++ MFC在游戏开发中的应用，包括用户输入处理、对象状态管理、碰撞检测、物理模拟等多个方面。通过这样的实践项目，开发者可以加深对C++面向对象编程的理解，同时提高在...
"js"目录则可能包含游戏的主要逻辑和控制代码，如玩家输入处理、碰撞检测、游戏状态管理等。 总的来说，这个"新手入门级html5游戏开发源码（蘑菇熊）"是一个全面的学习资源，涵盖了HTML5游戏开发的基本要素。通过...
4. **条件判断**：当角色与蘑菇碰撞时，需要检查是健康蘑菇还是毒蘑菇。这需要使用`if`语句进行条件判断，如果碰到毒蘑菇，角色的生命值将减少或游戏结束。 5. **循环语句**：游戏循环是持续进行的，直到满足某个...
《采蘑菇源代码》是一款经典的休闲游戏，其源代码对于那些对游戏开发充满热情的程序员而言，无疑是一份宝贵的学习资料。源代码是程序的核心，它揭示了游戏背后的逻辑和算法，是理解软件运行机制的直接途径。通过阅读...
碰撞检测是游戏中的关键部分，它确保了角色与其他游戏对象之间的交互。在超级玛丽中，开发者可能使用了矩形碰撞检测算法，通过比较角色和障碍物的边界来判断是否发生碰撞。这种简单但有效的算法在很多2D游戏中广泛...
此外，碰撞检测是游戏中的关键部分，我们需要检测角色与障碍物、敌人之间的碰撞，以决定游戏的进程。 六、用户输入与事件处理 玩家通过键盘控制玛丽的行动，Pygame提供了监听键盘事件的功能。我们需要编写代码来...
游戏中的角色移动、碰撞检测和场景渲染都可能依赖于Canvas API，通过JavaScript来绘制和更新画面。 6. **音频处理**：游戏往往包含背景音乐和音效，源码可能涉及到HTML5的Audio API，用于加载、播放和控制音频资源...