我需要在JavaScript中进行HitTest的帮助

Question

I have a project due for my JavaScript class, and I'm stumped on how to make a hit test! I have been searching for about 3 weeks with no luck on what I'm looking for... I have come up with a couple different ideas though, but neither of them work.

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");
          }
      }
    }
  }
}

Here is what I'm trying to make acknowledge each others existence:

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();
   }
}

I want these falling circles to hit a cat I drew, its basically just a box that's 100, 100 with cat whiskers and eyes and ears, but I just want it to acknowledge the box here is what I use to move it around the canvas and store its x, y coordinates

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

Here's a snippet that tests if a circle (fruit) and a rectangle (cat) are colliding:

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

Example code and a Demo:

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

this is what worked for me