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

Question

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

我设置了一个移动的方形精灵（角色

），其功能可以在角色精灵的路径中添加另一个固定的方形精灵（障碍物）。

我想制作一个系统，让角色精灵在接触障碍物精灵时停止。

查看一个实时示例 - 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;
}