零基础HTML5游戏制作教程 第5章 碰撞检测

第5章 碰撞检测

几乎所有的游戏都需要碰撞检测。比如《贪吃蛇》,你需要检测蛇的前端是不是已经碰到了它的尾巴;比如《俄罗斯方块》,你需要检查方块是不是已经碰到了底部;比如《英雄联盟》,你需要判断adc的子弹或魔法是不是已经碰到了对方。

其实要做好碰撞检测是很难的,尤其是对于3d游戏或者图形复杂的2d游戏来说。

当然,对于简单图形来说,碰撞检测还是比较容易的,本章将分别介绍圆形的碰撞检测,矩形的碰撞检测,以及逻辑碰撞检测。

一,圆形碰撞检测

圆形间碰撞检测的原理是最简单的,只要判断2个圆的圆心间距离是不是小于等于她们的半径之和就可以了。如果是,我们就认为这两个圆发生了碰撞,如果不是,我们就认为没有碰撞。

这里我们需要用到以前中学里学过的勾股定理来计算两个圆的圆心间距离。

代码如下:

<html>
<head>
<script>
function distance(x1,y1,x2,y2)
{var dis=Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2));
 return dis;
}
function collision()
{if (dis<=(r1+r2))
 return true;
 else
 return false;
}
</script>
</head>
</html>

二,方块的碰撞检测

方块的碰撞检测不能用两个方块的中心之间的距离来判断。因为矩形和圆不一样,中心到边缘的距离不是等长的,所以,同样的距离,有的时候是碰到了,有的时候是没有碰到。圆不会出现这种问题。所以,方块的碰撞检测一般是用它的四条边的位置来判断。

上次看到有人在做矩形的碰撞检测时,用她的四个角来做,分别判断她的4个角的坐标是不是在另一个矩形内。这其实是不正确的,而且要判断4次,比较复杂。

其实矩形的碰撞检测只要判断一次就可以了。原理是两个矩形碰撞时,一个矩形的右边界的x坐标减去另一矩形的左边界x坐标必然小于等于她们的宽度之和,同时大于等于0。同理,下边界的y坐标减去另一个矩形的上边界的y坐标,必然小于等于她们的高度之和,同时大于等于0。

<html>
<head>
<script>
function collision()
{if ((x2+w2-x1<=w1+w2)&&(x2+w2-x1>=0)&&(y2+h2-y1<=h1+h2)&&(y2+h2-y1>=0))
 return true;
 else
 return false;
}
</script>
</head>
</html>

三,逻辑碰撞检测

其实碰撞检测是比较消耗系统资源的,尤其对于一些运算能力较低的设备而言。比如20世纪末很流行的“小霸王”或“任天堂”游戏机,或者一些早期的手机。大家可以设想一下,假如做一个常见的《打飞机》类游戏,屏幕上敌方飞机有几十架,各种子弹有上百枚在飞,假设每秒刷新20次,那么每秒就要进行好几千次碰撞检测的运算。这对于早期设备是相当吃力的。于是,在很多游戏中,她们采用了一种更加简单的碰撞检测方式——逻辑碰撞检测。这类游戏包括《坦克大战》、《俄罗斯方块》、《推箱子》等等。

逻辑碰撞检测的原理是,把屏幕划分成很多方格,比如200格,每一个格只有2钟状态,有东西(true)或者没东西(false)。当你试图前进到一个新的格子时,系统会判断,如果已经有东西的,就判断为发生了碰撞,如果没东西的,就认为没发生碰撞。

可见,逻辑碰撞检测极大地减少了运算量,很适合用来做一些类似《俄罗斯方块》的游戏。下一章我计划讲一下《贪吃蛇》的做法,就会用到逻辑碰撞检测,所以这一章就不放逻辑碰撞检测的例子了,下一章一起讲好了。

另外,我发现有几个网站转载了本教程的前面几章。只是希望转载的时候能够注明一下出处,包含我的下面3个博客地址就算是注明出处了
新浪微博:地球生活eev http://weibo.com/u/5274447427/
CSDN博客:            http://blog.csdn.net/trackstatic/
博客园博客:          http://www.cnblogs.com/phyy/
大家知道原创很累的,一般程序猿有多余时间的话,要么去做赚钱的项目,要么出去玩。能够静下心来一章章写这些无聊的教程的人不多。所以希望大家支持原创(把这段一起复制就算注明出处了)。

时间: 2024-06-22 00:46:26

零基础HTML5游戏制作教程 第5章 碰撞检测的相关文章

零基础HTML5游戏制作教程 第6章 贪吃蛇的实现及代码

第6章 贪吃蛇的实现及代码 讲了不少东西了,老讲理论的东西没劲呀,我们不如先试着做一个小游戏吧. 作为我们的第一个游戏,当然是越简单越好.<贪吃蛇>大家应该都玩过吧?我觉得我玩过的游戏中,她应该算是最简单的一个了.好,就让我们从做<贪吃蛇>开始,享受自己做游戏的乐趣吧. 由于这个游戏是本教程的第一个实际的游戏例子,我会讲的比较详细一些.请大家重点注意编程的思路和实现的方法,这些远比代码本身要重要. 一,蛇身的制作 蛇身由一系列方格组成,初始我们设定蛇身的长度是4,以后每吃到一次食物

零基础HTML5游戏制作教程 第2章 简单图形的绘制

第二章 简单图形的绘制 HTML5支持使用Canvas和SVG等方式在网页直接绘制图形.其中SVG适合用来绘制高质量的矢量图形,不适合用来做游戏,所以我们做游戏一般使用Canvas. 由于本教程以简单为原则,所以在初学阶段请不要把注意力分散到美工.画质等细节,我们只需要掌握矩形.多边形.圆形等简单图形的绘制,并对这些图形编程,使之具有一定的运动能力和游戏效果. (如果你偷懒,你甚至可以跳过本章中多边形和圆形的绘制,只学矩形,然后直接去看下一章.) 一,矩形的绘制 命令的格式是context.fi

零基础HTML5游戏制作教程 第4章 移动的控制

第4章 移动的控制 一,捕获键盘击键的原理 有很多种方法可以控制游戏中图形的移动,常用的有键盘控制.鼠标控制以及屏幕上的按钮控制等.其中键盘控制比较简单,比较适合初学者,我们先来讲这种方法. 其实键盘上的每一个按键,在我们按下去的时候,会向电脑中传送一个编号.比如A的编号是65,B是66.在这一章里,我们只需要记住4个键就可以了,她们是光标的上下左右键.向上的编号是38,向下是40,向左是37,向右是39. 所以键盘捕获的原理其实很简单,就是读取键盘传到电脑中的编号,然后根据这个编号来判断哪个键

零基础HTML5游戏入门教程 第1章

第一章 绪论 HTML一直是网络编程的基石,其他任何编程语言,不论是PHP.Phython.CSS还是 JavaScript,都必须以HTML为基础. 上一代的标准,HTML4.01在1999年制定之后,统治互联网长达15年,越来越跟不上飞速发展的网络的步伐,尤其是在无线互联日益普及的今天.终于,在多年的争论和妥协之后,万维网联盟(W3C)在1个月前发布了HTML新标准.让我们一起来迎接我们的新王者HTML5. HTML5对网络的提升是多方面的,本教程只关注游戏方面.其实HTML5是一个相当不错

零基础unity3d游戏开发系列目录

零基础Unity3D游戏开发系列 第一章:游戏开发与游戏引擎(一) 零基础Unity3D游戏开发系列 第一章:游戏开发与游戏引擎(二) 零基础Unity3D游戏开发系列 第二章:Unity3D概览(一)界面... 零基础Unity3D游戏开发系列 第二章:Unity3D概览(一)创建与打开项目I 零基础unity3d游戏开发系列 第二章:unity3d概览(一)创建与打开项目II 零基础Unity3D游戏开发系列 第二章:Unity3D概览(一)创建与打开项目III 零基础Unity3D游戏开发

下载云计算Docker从零基础到专家实战教程【第一季】

云计算.大数据,移动技术的快速发展,加之企业业务需求的不断变化,导致企业架构要随时更改以适合业务需求,跟上技术更新的步伐.毫无疑问,这些重担都将压在企业开发人员身上:团队之间如何高效协调,快速交付产品,快速部署应用,以及满足企业业务需求,是开发人员亟需解决的问题.Docker技术恰好可以帮助开发人员解决这些问题. 云计算Docker从零基础到专家实战教程[第一季],刚刚入手,转一注册文件,视频的确不错,可以先下载看看:http://pan.baidu.com/s/1hsO74Gk 密码:g58j

Unity网络多玩家游戏开发教程第1章Unity自带网络功能

Unity网络多玩家游戏开发教程第1章Unity自带网络功能 Unity拥有大量的第三方插件,专门提供了对网络功能的支持.但是,大部分开发者第一次接触到的还是Unity自带的网络功能,也就是大家经常说到的Unity Networking API.这些API是借助于组件NetworkView发挥作用的,而它可以简化开发者大量的网络功能编码任务.本文选自<Unity网络多玩家游戏开发教程(大学霸内部资料)> NetworkView组件 在Unity中,NetworkView组件用于处理游戏在网络上

HTML5游戏制作完全指南

简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗?跟着这个教程,你将立刻上道儿. 阅读该教程需要至少熟悉javascript相关知识. 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码. 创建画布 在画任何东西之前,我们必须创建一个画布.因为这是完全指南,并且我们将用到jQuery. var CAN

游戏开发怎么样学能入门零基础学游戏编程

游戏编程入门级教程,讲解通俗易懂.用具体实例讲解的方式让你用最短的时间掌握游戏编程基础知识.本程序使用中文开发平台搭建之星,搭建之星采用可视化构件,不需有英文基础,开发速度极快,操作非常简单.不论你使用何种编程语言开发,本课程里的例子都是一个很好的学习例子,参考其编程思路,对快速掌握开发技术非常有益.部分内容如下:生成我方战机编程生成敌方战机编程炮弹发射编程为游戏配音游戏空间的时光控制看完就会,自动动手制作游戏.游戏编程教程资料 原文地址:http://blog.51cto.com/131720