HTML5畫布：碰撞檢測問題

Question

我有這個腳本，我正在使用oCanvas JS Library（http://ocanvas.org/）創建一個HTML5畫布並在畫布中顯示多個對象。目前，我已經從外部XML文檔中讀取腳本，並遍歷每個項目節點並在畫布上創建一個圓形對象。

我在嘗試將這些對象放在與中間圓圈（以下代碼中的徽標變量）均勻間隔的畫布上存在問題。

// GLOBALS 
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project></projects></root>' 

    var xmlObj = [] 
    // var angle = (360 * Math.PI)/180 
    var padding = 15 
    var canvas = oCanvas.create({ 
     canvas: '#myCanvas' 
    }) 
    var c_width = canvas.width 
    var c_height = canvas.height 

    var logo = canvas.display.ellipse({ 
     x: c_width/2, 
     y: c_height/3, 
     radius: 80, 
     fill: '#d15851' 
    }) 

    canvas.addChild(logo) 

    // var getXML = function(file){ 
    // $.ajax({ 
    //  url: file, 
    //  type: 'GET', 
    //  dataType: 'xml', 
    //  async: false, 
    //  success: parseXML 
    // }) 
    // } 

    var parseXML = function() { 
     var xmlDoc = $.parseXML(xmlData) 
     var xml = $(xmlDoc) 

     xml.find('project').each(function(i){ 
      xmlObj[i] = canvas.display.ellipse({ 
       fill: '#'+'abcdef'.split('').map(function(v,i,a){ 
        return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(''), 
       radius: 40, 
       opacity: 1 
      }) 
     }); 

     var angleSingleton = { 
      "currentAngle": 0, 
      "currentOffset": 0, 
      "incrementAngle": function() { 
       this.currentAngle = this.currentAngle + this.currentOffset 
      } 
     } 

     angleSingleton.currentOffset = Math.floor((360 * Math.PI)/xmlObj.length); 

     for(h = 0; h < xmlObj.length; h++) { 
      xmlObj[h].x = (logo.x + logo.radius * Math.cos(angleSingleton.currentAngle)) + xmlObj[h].radius + padding; 
      xmlObj[h].y = (logo.y + logo.radius * Math.sin(angleSingleton.currentAngle)) + xmlObj[h].radius + padding; 

      canvas.addChild(xmlObj[h]) 
      angleSingleton.incrementAngle() 
     } 
    } 

// 

$(document).ready(function(){ 
    parseXML() 
}) 

Answer 1

要看看是圓的參數方程是什麼。基本上它以特定的角度定義沿着圓周的點。這answer覆蓋更詳細。

爲了讓您的x和y的值，你用下面的公式新的循環：

x = logo.x + logo.radius * Math.cos(angle) 
y = logo.y + logo.radius * Math.sin(angle) 

但是你需要考慮房間的新圈是要佔用再加上如果任何空間填充你想要它。

x = (logo.x + logo.radius * Math.cos(angle)) + newCircle.radius + circlePadding 
y = (logo.y + logo.radius * Math.sin(angle)) + newCircle.radius + circlePadding 

對於角度的功能嘗試是這樣的：

var angleSingleton = { 
    "currentAngle": 0, 
    "currentOffset": 0, 
    "incrementAngle": function() { 
     this.currentAngle = this.currentAngle + this.currentOffset 
    } 
} 

angleSingleton.currentOffset = (360 * Math.PI)/xmlObj.length; 

然後你可以用它來跟蹤你需要的公式的角度。要獲得當前角度，請使用angleSingleton.currentAngle並用替換angle++

Answer 2

我最終弄明白了！

// EXTENDING OBJECTS 
    Array.prototype.min = function(array) { 
     return Math.min.apply(Math, array); 
    } 

    Array.prototype.max = function(array) { 
     return Math.max.apply(Math, array) 
    } 
// 

// GLOBALS 
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project><project name="Project3"></project></projects></root>' 

    var xmlObj = [] 
     var xmlDoc, xml; 
    var padding = 15 
    var canvas = oCanvas.create({ 
     canvas: '#myCanvas' 
    }) 
    var c_width = canvas.width 
    var c_height = canvas.height 

    var logo = canvas.display.ellipse({ 
     x: c_width/2, 
     y: c_height/3, 
     radius: 80, 
     fill: '#d15851' 
    }) 

     var rectObj = function(){ 
      this.x = 0; 
      this.y = 0; 
      this.width = 100; 
      this.height = 100; 
      this.size = this.width + this.height; //this would equate to a circles radius if dealing with circles 
      this.fillerText = null; 
      this.fillRect = function(hexVal){ 
       if(!hexVal) 
        return '#'+'abcdef'.split('').map(function(v,i,a){ 
       return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('') 
       else 
        return hexVal 

      }; 
      this.drawRect = function(){ 
       return canvas.display.rectangle({ 
        width: this.width, 
        height: this.height, 
        fill: this.fillRect(), 
        x: this.x, 
        y: this.y 
       }) 
      }; 
      this.checkCollisions = function(objToCheck) { 
       var centerA = { x: this.x+(this.size/2), y: this.y+(this.size/2) }; 
       var centerB = { x:objToCheck.x+(objToCheck.size/2), y: objToCheck.y+(objToCheck.size/2) }; 
       var distance = Math.sqrt(((centerB.x-centerA.x)*(centerB.x-centerA.x) + (centerB.y-centerA.y)*(centerB.y-centerA.y))); 

       if(distance < (this.size+objToCheck.size)) { 
        objToCheck.x = this.x - (canvas.width/4) 
        objToCheck.fillRect = function(){ 
         return 'red' 
        } 
       } 
      } 
     } 

    canvas.addChild(logo) 

    var parseXML = function() { 
     xmlDoc = $.parseXML(xmlData) 
     xml = $(xmlDoc) 

     xml.find('project').each(function(i){ 
        xmlObj[i] = new rectObj() 
        xmlObj[i].fillerText = $(this).attr('name') 
        xmlObj[i].x = (logo.x + logo.radius * Math.cos((360*Math.PI)/(i + 1)) + padding) + ((xmlObj[i].width/2) + (i+1)); 
        xmlObj[i].y = (logo.y + logo.radius * Math.sin((360*Math.PI)/(i + 1)) + padding); 
     }); 

       for(i = 0; i < xmlObj.length; i++) { 
        for(a = i+1; a < xmlObj.length; a++) { 
         xmlObj[i].checkCollisions(xmlObj[a]) 
        } 
        canvas.addChild(xmlObj[i].drawRect()) 
       } 
    } 

// 

$(document).ready(function(){ 
    parseXML() 
}) 

屏幕截圖：

我顯然需要在Y COORDS爲矩形來寫，使他們不接觸主循環，但現在，他們都「浮動」，因爲他們應該:)

感謝您的幫助德文！

順便說一句，我是能夠通過學習這個JS文件寫我的碰撞算法：http://andersonferminiano.com/html5/studies/balls_collisions/collision.js