相思资源网 Design By www.200059.com

在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,游戏开发,碰撞检测

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无javascript制作游戏开发碰撞检测的封装代码的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?