Javascript和Canvas“引擎”，即需要碰撞检测

问题描述：

因此，我有一点“移动和东西”引擎，这是非常主要的此刻。Javascript和Canvas“引擎”，即需要碰撞检测

每隔一段时间（基于计时器），另一个像素（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; 
      } 
     }

请实现碰撞检测算法，与我的代码工作是不是一个问题。 “我试图实现碰撞检测，这是我的尝试，我被困在这个_specific_问题上”，但这是一个问题。 – Raynos 2011-05-21 15:29:42

好几分钟 - 会修改 – 2011-05-21 15:30:11

你有没有去^ _^ – 2011-05-21 15:35:46

答

由于可以更容易计算距离（固定半径），因此用圆圈表示会更好。假设你设置半径为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('[email protected]', 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/

答

等待，因此，所有你想要的是一个函数来查看两个矩形的交集？

这里有防弹功能，为您提供：

// 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; 
}

对不起西蒙，我已经承诺了点^ _^- 但你也得到+1，因为这是我将使用的代码！ – 2011-05-22 08:24:03

@Neurofluxation不公平。对于*不好，你必须勾选你使用的答案，而不是友好的 - 其他用户会认为是最好的答案。 – 2011-10-01 11:49:15

Javascript和Canvas“引擎”，即需要碰撞检测

相关推荐