Question

你好第一次问一个问题，我很感激任何帮助，因为我编码只是为了好玩。我在画布上做了一个简单的游戏，需要帮助来调整两个物体上的命中箱。我读了几篇涉及这个主题的其他主题，但却找不到能回答我问题的主题。

从图像中可以看出，笑脸的命中框超出了绘制的实际图像。游戏中的实际图像将比笑脸更复杂。但是，使用边界框方法并不能解释用户在屏幕上看不到的内容，因为图像看起来不像是碰撞但实际上它们是碰撞的。我想过尝试通过在hitbox中绘制一个三角形来剪切图像，然后根据该区域进行一些计算。这是我到目前为止所提出的。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var player = {
x: 0,
y: 0,
width: 100,
height: 100
}

var obstacle = {
    x: 150,
    y: 100,
    width: 100,
    height: 100
};

document.addEventListener("keydown", keyDownHandler);

function keyDownHandler(e) {
  ctx.clearRect(0,0,canvas.width,canvas.height);

  if(e.keyCode === 37) {
    player.x -= 10; 
  }
  else if(e.keyCode === 38) {
    player.y -= 10;
  }
    else if(e.keyCode === 39) {
    player.x += 10;
  }
    else if(e.keyCode === 40) {
    player.y += 10;
  }

  function drawTriangle(){
    ctx.beginPath();
    ctx.moveTo(player.x+player.width,player.y+player.height-40);
    ctx.lineTo(player.x+player.width-40,player.y+player.height);
    ctx.lineTo(player.x+player.width,player.y+player.height);
    ctx.closePath();
    ctx.fillStyle="orange";
    ctx.fill();
  }

  function drawObstacle(){
    ctx.beginPath();
    ctx.fillRect(obstacle.x,obstacle.y,obstacle.width,obstacle.height);
    ctx.closePath();
  }

  function colorChange(){
    var color = "black";
    var triArea = (player.y+player.height-40)*(player.x+player.width-40)/2;

    if(player.x+player.width >= obstacle.x && 
      player.x <= obstacle.x+obstacle.width && 
      player.y <= obstacle.y+obstacle.height && 
      player.y+player.height >= obstacle.y){

      if(triArea <= 5500 && triArea != 5250){
        color = "red";
      }
      else {
        color = "green";
      }
      document.getElementById("playerArea").innerHTML = ((player.x+player.width)*(player.y+player.height));
      document.getElementById("triangleArea").innerHTML = triArea;

      }
    else{
      color = "black";
    }
    ctx.fillStyle = color;
 }

  ctx.strokeRect(player.x,player.y,player.width,player.height);
  colorChange();
  drawObstacle();
  ctx.closePath();
  drawTriangle();
}

https://codepen.io/brucelin82/pen/aqQLxW?editors=1010

如果碰撞发生但未超过三角形，障碍物将变为红色。一旦碰撞超出三角形，障碍物将变为绿色。代码仍在进行中，但我只是想知道我是否在正确的轨道上，或者是否有更简单的方法来解释图像中的空白区域。提前感谢你给我的任何方向。

HTML画布碰撞调整hitbox

0 个答案: