0

I'm trying to create a collision detection system for an HTML 5 game that I'm building for my school project.

I have a moving square sprite (character) set up with a function that adds another stationary square sprite (obstacle) in the path of the character sprite.

I want to make a system where the character sprite stops when it touches the obstacle sprite.

Check out a live example - JsFiddle

My Code:

<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>
Seth
  • 10,198
  • 10
  • 45
  • 68
Mit
  • 33
  • 6
  • 4
    Please review [ask]. Your question as written is far too broad and doesn't actually ask a specific question. – zzzzBov Feb 26 '16 at 20:49
  • 1
    Possible duplicate of [Fast rectangle to rectangle intersection](http://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection) – Hatchet Feb 26 '16 at 20:53
  • I think this MDN game tutorial will help you: [Collision detection](https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection) – Yogi Feb 26 '16 at 20:55
  • @zzzzBov Thanks! This is my first post so I'll start looking into some of these resources. – Mit Feb 29 '16 at 20:05
  • @Hatchet Thanks, I will look into it. – Mit Feb 29 '16 at 20:07
  • @Roberto It's helped, thanks! – Mit Feb 29 '16 at 20:17

1 Answers1

1

Since this is your homework I will only half help you:

Try this, its not perfect but I think you get the gist:

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;
}
EDD
  • 2,070
  • 1
  • 10
  • 23