javascript制作游戲開發(fā)碰撞檢測(cè)的封裝代碼

更新時(shí)間：2015年03月31日 10:15:10 投稿：hebedich

這篇文章主要介紹了javascript制作游戲開發(fā)碰撞檢測(cè)的封裝代碼,需要的朋友可以參考下

在JavaScript開發(fā)Web游戲時(shí)，需要使用到碰撞檢測(cè)時(shí)，為了方便開發(fā)，封裝了矩形和圓形的兩個(gè)碰撞檢測(cè)方式。

【附帶案例操作捕獲一枚】
【注意：代碼上未做優(yōu)化處理】

演示圖

角色攻擊區(qū)域碰撞檢測(cè).gif

塔防案例.gif

矩形區(qū)域碰撞檢測(cè)

/**
 * 矩形區(qū)域碰撞檢測(cè)
 * 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;
   
  //碰撞檢測(cè)(參數(shù)為此類)
  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;
  }
 
}

圓形區(qū)域碰撞檢測(cè)

/**
 * 圓形區(qū)域碰撞檢測(cè)
 * Created by Administrator on 14-4-7.
 * author: marker
 *
 */
function RadiusRectangle(x, y, radius){
  this.x = x;
  this.y = y;
  this.radius = radius;
 
  //碰撞檢測(cè)(參數(shù)為此類)
  this.intersects = function(rr){
    var maxRadius = rr.radius + this.radius;
    // 已知兩條直角邊的長(zhǎng)度 ，可按公式：c²=a²+b² 計(jì)算斜邊。
    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));// 計(jì)算圓心距離
    if(distance < maxRadius){
      return true;
    }
    return false;
  }
}

以上所述就是本文的全部?jī)?nèi)容了，希望能夠?qū)Υ蠹伊私鈐avascript有所幫助。

您可能感興趣的文章:

相關(guān)文章

匹配任意字符的正則表達(dá)式寫法
今天在寫一個(gè)小應(yīng)用的時(shí)候遇到個(gè)問題，原本是想捕捉到頁(yè)面中所有電驢地址，以便迅雷抓取。
2010-04-04
js實(shí)現(xiàn)驗(yàn)證碼干擾（靜態(tài)）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼干擾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
Makefile/cmake/node-gyp中區(qū)分判斷不同平臺(tái)的方法
今天小編就為大家分享一篇關(guān)于Makefile/cmake/node-gyp中區(qū)分判斷不同平臺(tái)的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2018-12-12
詳解js中的原型，原型對(duì)象，原型鏈
這篇文章主要介紹了js中的原型，原型對(duì)象，原型鏈的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
javascript事件監(jiān)聽與事件委托實(shí)例詳解
這篇文章主要介紹了javascript事件監(jiān)聽與事件委托,結(jié)合實(shí)例形式詳細(xì)分析了javascript事件監(jiān)聽與事件委托相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
2019-08-08
再談javascript常見錯(cuò)誤及解決方法
下面小編就為大家?guī)?lái)一篇再談javascript常見錯(cuò)誤及解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
postman+json+springmvc測(cè)試批量添加實(shí)例
下面小編就為大家分享一篇postman+json+springmvc測(cè)試批量添加實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
c#和Javascript操作同一json對(duì)象的實(shí)現(xiàn)代碼
剛開始學(xué)Javascript，接觸到j(luò)son對(duì)象，json可以看作是用于客戶端數(shù)據(jù)實(shí)體對(duì)象的載體。json對(duì)象一般都是通過(guò)ajax方式傳送給服務(wù)層
2012-01-01
Bootstrap 實(shí)現(xiàn)查詢的完美方法
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)查詢的完美方法,需要的朋友可以參考下
2016-10-10
JavaScript中的異步能省掉await嗎?
這篇文章主要介紹了JavaScript中的異步能省掉await嗎?一直以來(lái)，困擾我的一個(gè)問題是JavaScript中，能否實(shí)現(xiàn)不帶await的異步。今天我終于把這個(gè)問題想通了然后分享給大家，希望對(duì)大家的學(xué)習(xí)過(guò)程有所幫助
2021-12-12