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

这是一个测试圈子（水果）和矩形（猫）是否发生碰撞的片段：

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

示例代码和演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

这对我有用

我需要帮助在JavaScript中制作HitTest

2 个答案: