Javascript - 如何设置碰撞检测系统？

Question

我正在尝试为我为学校项目构建的 HTML 5 游戏创建碰撞检测系统。

我有一个移动的方形 Sprite ( Angular 色)，它设置了一个函数，可以在 Angular 色 Sprite 的路径中添加另一个静止的方形 Sprite (障碍物)。

我想制作一个系统，当 Angular 色 Sprite 接触到障碍 Sprite 时会停止。

Check out a live example - JsFiddle

我的代码:

<p><canvas id="canvas" width="500" height="500"></p>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var positionX = 100.0;
  var positionY = 350.0;
  var velocityX = 4.0;
  var velocityY = 0.0;
  var gravity = 0.5;
  var onGround = false;

  window.addEventListener("mousedown", StartJump, false);
  window.addEventListener("mouseup", EndJump, false);

  Loop();

  function StartJump() {
    if (onGround) {
      velocityY = -12.0;
      onGround = false;
    }
  }

  function EndJump() {
    if (velocityY < -6.0)
      velocityY = -6.0;
  }

  function Loop() {
    Update();
    Render();
    window.setTimeout(Loop, 33);
  }

  function Update() {
    velocityY += gravity;
    positionY += velocityY;
    positionX += velocityX;

    if (positionY > 300.0) {
      positionY = 300.0;
      velocityY = 0.0;
      onGround = true;
    }

    if (positionX < 10 || positionX > 500)
      velocityX *= -1;
  }

  function drawSquare() {
    ctx.beginPath();
    ctx.rect(300, 270, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }

  function Render() {
    ctx.clearRect(0, 0, 500, 500);
    drawSquare();
    ctx.beginPath();
    ctx.moveTo(0, 300);
    ctx.lineTo(500, 300);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(positionX - 10, positionY - 20);
    ctx.lineTo(positionX + 10, positionY - 20);
    ctx.lineTo(positionX + 10, positionY);
    ctx.lineTo(positionX - 10, positionY);
    ctx.closePath();
    ctx.stroke();
  }

< /script>

Answer 1

由于这是你的作业，我只会帮助你一半:

试试这个，它并不完美，但我认为你明白了要点:

function Update()
{
    velocityY += gravity;
    positionY += velocityY;
    positionX += velocityX;

    // Collision Detection //
    if (positionX > 300 && positionX < 330 && positionY > 270)
    {
        velocityX = 0.0;
    }

    if(positionY > 300.0)
    {
        positionY = 300.0;
        velocityY = 0.0;
        onGround = true;
    }

    if(positionX < 10 || positionX > 500)
        velocityX *= -1;
}