javascript制作游戏开发碰撞检测的封装代码


Posted in Javascript onMarch 31, 2015

在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式。

【附带案例操作捕获一枚】
【注意:代码上未做优化处理】

演示图

javascript制作游戏开发碰撞检测的封装代码

角色攻击区域碰撞检测.gif

javascript制作游戏开发碰撞检测的封装代码

塔防案例.gif

矩形区域碰撞检测

/**
 * 矩形区域碰撞检测
 * Created by Administrator on 14-4-7.
 * author: marker
 */
function Rectangle(x, y, _width, _height){
  this.x = x;
  this.y = y; 
  this.width = _width;
  this.height = _height;
   
  //碰撞检测(参数为此类)
  this.intersects = function(obj){
    var a_x_w = Math.abs((this.x+this.width/2) - (obj.x+obj.width/2));
    var b_w_w = Math.abs((this.width+obj.width)/2);
    var a_y_h = Math.abs((this.y+this.height/2) - (obj.y+obj.height/2)); 
    var b_h_h = Math.abs((this.height+obj.height)/2);
    if( a_x_w < b_w_w && a_y_h < b_h_h ) return true;
    else return false;
  }
 
}

圆形区域碰撞检测

/**
 * 圆形区域碰撞检测
 * Created by Administrator on 14-4-7.
 * author: marker
 *
 */
function RadiusRectangle(x, y, radius){
  this.x = x;
  this.y = y;
  this.radius = radius;
 
  //碰撞检测(参数为此类)
  this.intersects = function(rr){
    var maxRadius = rr.radius + this.radius;
    // 已知两条直角边的长度 ,可按公式:c²=a²+b² 计算斜边。
    var a = Math.abs(rr.x - this.x);
    var b = Math.abs(rr.y - this.y);
    var distance = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));// 计算圆心距离
    if(distance < maxRadius){
      return true;
    }
    return false;
  }
}

以上所述就是本文的全部内容了,希望能够对大家了解javascript有所帮助。

Javascript 相关文章推荐
JavaScript 大数据相加的问题
Aug 03 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
JS跨域问题详解
Nov 25 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
jQuery选择器源码解读(二):select方法
Mar 31 #Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 #Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 #Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 #Javascript
JavaScript父子窗体间的调用方法
Mar 31 #Javascript
JavaScript操作cookie类实例
Mar 31 #Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 #Javascript
You might like
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python中元类用法实例
2014/10/10 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python try 异常处理(史上最全)
2019/03/07 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
智乐游戏测试笔试题
2014/05/21 面试题
教师岗位职责
2013/11/17 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
促销活动策划方案
2014/01/12 职场文书
投资建议书模板
2014/05/12 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
python中 Flask Web 表单的使用方法
2022/05/20 Python