Javascript和Canvas「引擎」，即需要碰撞檢測

Question

因此，我有一點「移動和東西」引擎，這是非常主要的此刻。

每隔一段時間（基於計時器），另一個像素（5x5）將出現在屏幕上 - 如果您與該像素相交，我想發起一個事件。 （公平地說，那個像素（5x5）需要變得更大：/）。

所以，這裏是我的jsfiddle（你小提琴手）： http://jsfiddle.net/neuroflux/q9APG/

這裏是我的畫布的JavaScript：

var canvas, ctx; 
var pixX = 0; //positions 
var pixY = 0; 
var endX = 0; 
var endY = 0; 
var youX = 5; //sizes 
var youY = 5; 
var dis = 1; //timings 
var p = 0; 

window.onload = function() { 
    init(); 
} 

function init() { 
    canvas = document.getElementById('main'); 
    ctx = canvas.getContext('2d'); 
    setInterval(loop,40); 
    var pixTimer = Math.floor((Math.random() * 1000) * 10) + 1; 
    setInterval(addPixel, pixTimer); 
    document.addEventListener('keydown',function(e) { 
     runMove(e); 
    }); 
} 

function addPixel() { 
    pX = Math.floor(Math.random() * 800) + 1; 
    pY = Math.floor(Math.random() * 600) + 1; 
    p++; 
} 

function loop() { 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.fillRect(pixX,pixY,youX,youY); 
    ctx.fillText(pixX + ':' + pixY, 5, 500); 
    if (p > 0) { 
     for (var a = 0; a <= p; a++) { 
      ctx.fillRect(pX,pY,5,5); 
     } 
    } 
} 

function runMove(e) { 
    var canvas = document.getElementById('main'); 
    ky = e.keyCode; 
    switch(ky) { 
     case 37: 
      endX = endX - dis; 
      if (pixX == endX) { 

      } else { 
       if (pixX >= 0 && pixX < canvas.width) { 
        moveleft = setInterval(ml,10); 
        function ml() { pixX--; } 
       } else { 
        pixX = 0; 
       } 
      } 
      return false; 
     case 38: 
      endY = endY - dis; 
      if (pixY == endY) { 

      } else { 
       if (pixY >= 0 && pixY < canvas.height) { 
        moveup = setInterval(mu,10); 
        function mu() { pixY--; } 
       } 
      } 
      return false; 
     case 39: 
      endX = endX + dis; 
      if (pixX == endX) { 

      } else { 
       if (pixX >= 0 && pixX < canvas.width) { 
        moveright = setInterval(mr,10); 
        function mr() { pixX++; } 
       } 
      } 
      return false; 
     case 40: 
      endY = endY + dis; 
      if (pixY == endY) { 

      } else { 
       if (pixY >= 0 && pixY < canvas.height) { 
        movedown = setInterval(md,10); 
        function md() { pixY++; } 
       } 
      } 
      return false; 
     case 80: 
      growing = setInterval(grow,100); 
      clearInterval(shrinking); 
      function grow() { 
       youX = youX + dis; 
       youY = youY + dis; 
      } 
      return false; 
     case 73: 
      clearInterval(shrinking); 
      clearInterval(growing); 
      return false; 
     case 79: 
      shrinking = setInterval(shrink,100); 
      clearInterval(growing); 
      function shrink() { 
       youX = youX - dis; 
       youY = youY - dis; 
      } 
      return false; 
     default: 
      return false; 
    } 
} 

我已經嘗試過這一點，但有問題:(（沒有什麼會火）： 的jsfiddle：http://jsfiddle.net/neuroflux/uF5kj/

帆布代碼：

var canvas, ctx; 
     var pixX = 0; //positions 
     var pixY = 0; 
     var endX = 0; 
     var endY = 0; 
     var youX = 5; //sizes 
     var youY = 5; 
     var dis = 1; //timings 
     var p = 0; 
     var pixel = new Array(); 

     window.onload = function() { 
      init(); 
     } 

     function init() { 
      canvas = document.getElementById('main'); 
      ctx = canvas.getContext('2d'); 
      setInterval(loop,40); 
      var pixTimer = Math.floor((Math.random() * 1000) * 10) + 1; 
      setInterval(addPixel, pixTimer); 
      document.addEventListener('keydown',function(e) { 
       runMove(e); 
      }); 
     } 

     function addPixel() { 
      pX = Math.floor(Math.random() * 800) + 1; 
      pY = Math.floor(Math.random() * 600) + 1; 
      p++; 
     } 

     function loop() { 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
      var bgImg = new Image(); 
      bgImg.src = 'bg.png'; 
       ctx.drawImage(bgImg,0,0,800,600); 
      ctx.fillRect(pixX,pixY,youX,youY); 
      ctx.fillText(pixX + ':' + pixY, 5, 500); 
      if (p > 0) { 
       for (var a = 0; a <= p; a++) { 
        pixel[a] = ctx.fillRect(pX,pY,5,5); 
       } 
      } 
     } 

     function checkIntersections() { 
      for (var x = 0; x < pixel.length; x++) { 
        if (pixX == pixel[x].x) { alert(0) } 
      } 
     } 

     function runMove(e) { 
      var canvas = document.getElementById('main'); 
      ky = e.keyCode; 
      switch(ky) { 
       case 37: 
        endX = endX - dis; 
        if (pixX == endX) { 

        } else { 
         if (pixX >= 0 && pixX < canvas.width) { 
          moveleft = setInterval(ml,10); 
          function ml() { pixX--; } 
         } else { 
          pixX = 0; 
         } 
        } 
        return false; 
       case 38: 
        endY = endY - dis; 
        if (pixY == endY) { 

        } else { 
         if (pixY >= 0 && pixY < canvas.height) { 
          moveup = setInterval(mu,10); 
          function mu() { pixY--; } 
         } 
        } 
        checkIntersections(); 
        return false; 
       case 39: 
        endX = endX + dis; 
        if (pixX == endX) { 

        } else { 
         if (pixX >= 0 && pixX < canvas.width) { 
          moveright = setInterval(mr,10); 
          function mr() { pixX++; } 
         } 
        } 
        checkIntersections(); 
        return false; 
       case 40: 
        endY = endY + dis; 
        if (pixY == endY) { 

        } else { 
         if (pixY >= 0 && pixY < canvas.height) { 
          movedown = setInterval(md,10); 
          function md() { pixY++; } 
         } 
        } 
        checkIntersections(); 
        return false; 
       case 80: 
        growing = setInterval(grow,100); 
        clearInterval(shrinking); 
        function grow() { 
         youX = youX + dis; 
         youY = youY + dis; 
        } 
        checkIntersections(); 
        return false; 
       case 73: 
        clearInterval(shrinking); 
        clearInterval(growing); 
        return false; 
       case 79: 
        shrinking = setInterval(shrink,100); 
        clearInterval(growing); 
        function shrink() { 
         youX = youX - dis; 
         youY = youY - dis; 
        } 
        return false; 
       default: 
        return false; 
      } 
     } 

Answer 1

由於可以更容易計算距離（固定半徑），因此用圓圈表示會更好。假設你設置半徑爲10，那麼如果distance < 20它們在彼此內部，即存在碰撞。

// Pythagoras theorem to calculate distance between 2 points 
function does_collide(x1, y1, x2, y2) { 
    return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)) < 20; 
} 

每一次，計算用戶/對象之間的距離：

if(does_collide(pixX, pixY, pX, pY)) { 
    ctx.fillText('collison!@', 0, 10); 
    collison = true; 
} else { 
    collison = false; 
} 

在任何時候，該collison變量可以用於檢查是否存在科裏森。

您可以用畫一個圓：

ctx.beginPath(); 
ctx.arc(x, y, r, 0, 2 * Math.PI); 
ctx.fill(); 

http://jsfiddle.net/q9APG/4/

Answer 2

等待，因此，所有你想要的是一個函數來查看兩個矩形的交集？

這裏有防彈功能，爲您提供：

// returns true if there is any overlap 
// params: x,y,w,h of two rectangles 
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) { 
    if (w2 !== Infinity && w1 !== Infinity) { 
    w2 += x2; 
    w1 += x1; 
    if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2) return false; 
    } 
    if (y2 !== Infinity && h1 !== Infinity) { 
    h2 += y2; 
    h1 += y1; 
    if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2) return false; 
    } 
    return true; 
}