我需要帮助在 JavaScript 中进行 HitTest

Question

我的 JavaScript 课程有一个项目到期，但我不知道如何进行命中测试！我一直在寻找大约 3 周的时间，但没有找到我想要的东西......虽然我想出了几个不同的想法，但它们都不起作用。

function hitTest() {
  for (var i = 0; i < fruit.length; i++){
    for (var j = 0; j <  catLoc.length; j++){
      distance = Math.pow((catLoc[j][0] - fruit[i][0]), 2) + 
                 Math.pow((catLoc[j][1] - fruit[i][1]), 2);
      distance = Math.sqrt(distance);
         if (distance < r){
        alive = false;
        if (!alive) {
          alert("you loose");
        }
      }
    }
  }
}

function hitTest1(){
  for (var i = 0; i <  catLoc.length; i++) {
    for (var j = 0; j < fruit.length; j++) {
      if (fruit[j] == (catLoc[i][0] &&     catLoc[i][1])){
        alive = false;
          if (!alive) {
          alert("you loose");
          }
      }
    }
  }
}

这是我试图承认彼此存在的原因：

function FruitGenerator() {
    // select a random type for this new object
    var F;
    if (Math.random() < 0.50) {
        F = "blue";// blueberries
    } else {
        F = "purple";//grapes
    }
    // create the new object
    var object = {
        type: F,
        //amount off side of canvas
        x: Math.floor(Math.random() * (width - s)),
        //starting line
        y: spawnLineY,
    };
    fruit.push(object);
}

function spawnFruit() {
    // get the elapsed time
   var time = Date.now();
    // see if its time to spawn a new object
    if (time > (lastSpawn + spawnRate)) {
        lastSpawn = time;
        FruitGenerator();
    }
    requestAnimationFrame(spawnFruit);
    // draw the line where new objects spawn
    ctx.beginPath();
    ctx.moveTo(0, spawnLineY);
    ctx.lineTo(canvas.width, spawnLineY);
    ctx.stroke();
    // makes fruit fall
    fruitFall();
}

function fruitFall(){
//moves the fruit down the screen
  for (var i = 0; i < fruit.length; i++) {
    object = fruit[i];
    object.y += fruitFallSpeed;
    ctx.beginPath();
    ctx.arc(object.x, object.y, r, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = object.type;
    ctx.fill();
   }
}

我想让这些下落的圆圈撞到我画的一只猫，它基本上只是一个 100、100 的盒子，上面有猫的胡须、眼睛和耳朵，但我只是想让它承认这里的盒子是我用来移动它的东西画布并存储其 x、y 坐标

function moveThatCat(){
  if (x > 500) {
    x = x;
  } else if (rightKey) x += 5;
  if (x < 0) {
    x = x;
  } else if (leftKey) x -= 5;
  if (y < 40) {
  y = y;
  } else if (upKey) y -= 5;
    if (y > 440) {
    y=y;
  } else if (downKey) y += 5;
//clearing the array catLoc and adding the new  X, Y locations
  catLoc.splice(0, catLoc.length);
  catLoc.push(x, y);
} 
x=250 y=400 and the canvas = width="600" height="540". 

Answer 1

这是一个测试圆形（水果）和矩形（猫）是否碰撞的 sn-p：

function RectCircleColliding(circle,rect){
    var distX = Math.abs(circle.x - rect.x-rect.w/2);
    var distY = Math.abs(circle.y - rect.y-rect.h/2);
    if (distX > (rect.w/2 + circle.r)) { return false; }
    if (distY > (rect.h/2 + circle.r)) { return false; }
    if (distX <= (rect.w/2)) { return true; } 
    if (distY <= (rect.h/2)) { return true; }
    var dx=distX-rect.w/2;
    var dy=distY-rect.h/2;
    return (dx*dx+dy*dy<=(circle.r*circle.r));
}

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var rect={x:125,y:150,w:50,h:50};
var circle={x:0,y:0,r:25,fill:'black'};

draw();

$("#canvas").mousemove(function(e){handleMouseMove(e);});

function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillRect(rect.x,rect.y,rect.w,rect.h);
  ctx.beginPath();
  ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
  ctx.fillStyle=circle.fill;
  ctx.fill();
}

function RectCircleColliding(circle,rect){
  var distX = Math.abs(circle.x - rect.x-rect.w/2);
  var distY = Math.abs(circle.y - rect.y-rect.h/2);
  if (distX > (rect.w/2 + circle.r)) { return false; }
  if (distY > (rect.h/2 + circle.r)) { return false; }
  if (distX <= (rect.w/2)) { return true; } 
  if (distY <= (rect.h/2)) { return true; }
  var dx=distX-rect.w/2;
  var dy=distY-rect.h/2;
  return (dx*dx+dy*dy<=(circle.r*circle.r));
}

function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  circle.x=parseInt(e.clientX-offsetX);
  circle.y=parseInt(e.clientY-offsetY);

  if(RectCircleColliding(circle,rect)){
    circle.fill='red';
  }else{
    circle.fill='blue';
  }
  draw();

}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move circle with mouse to hit-test vs the rect.</h4>
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

function hitTest2() {
  for (var i = 0; i < fruit.length; i++){
    object = fruit[i];
     var space = Math.pow(catLoc[1] - object.y, 2) +
                 Math.pow(catLoc[0] - object.x, 2);
      space = Math.sqrt(space);
      if (space < r) {
        alive = false;
      }
  }
}

这对我有用