CODEWITHSUNDEEP
javascripthtmlcanvas
Hello-World
Hello-World

Reputation: 9555

HTML 5 canvas shape collision Test

Can you please help me with my collision test .

In flash I would use a Hittest and it would take 2 minutes to do but as I see HTML5 is a little different.

Below is my code. I can make the ball bounce inside the red block easily but I want a grey block in the middle that the ball bounces off also and the if statement is getting messy and not working. Is there an easier way todo this, can you please help me. Thanks

<html>
<head>
</head>

<script>
    var context;
    var x=50;
    var y=100;
    var speedX=-2;
    var speedY=-2;
    var counter=0;
    var ballCoordinates ='';

    function init()
    {
      var c = document.getElementById('myCanvas');
      context= c.getContext('2d');
      setInterval(draw,10);
    }

    function draw()
    {
          context.clearRect(0,0, 300,400);

          //draw number
          context.fillStyle = '#fff';
          context.font="160px Arial";
          context.fillText(counter,10,150);

          context.fillStyle = '#fff';
          context.font="20px Arial";
          context.fillText(ballCoordinates,10,400);

          //draw ball
          context.beginPath();
          context.fillStyle="#0000ff";
          context.arc(x,y,20,0,Math.PI*2,true);
          context.closePath();
          context.fill();

          //draw block
          context.fillStyle = '#333';
          context.fillRect(100,200,100,100);



          // Boundary Logic
            //if( x<0 || x>300) dx=-dx;
            //if( y<0 || y>300) dy=-dy;


            if(x>280){
            speedX=speedX * -1;
            }else if(y<20){
            speedY=speedY * -1;
            }else if(x<20){
            speedX=speedX * -1;
            }else if(y>380){
            speedY=speedY * -1;
            }else if( x>80 && y >180 && y <320) {
                speedY=speedY * -1;
            }else if( x<220 && y >180 && y <320) {
                speedY=speedY * -1;
            }else if( y>180 &&  x>80 && x<220) {
                speedX=speedX * -1;
            }else if( y<180 &&  x>80 && x<220) {
                speedX=speedX * -1;
            }

            x+=speedX;
            y+=speedY;

            ballCoordinates = x + 'x   ' + y + 'y ' + speedX + 'speedx    ' + speedY + 'speedy';
    }

</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="400" style="background:red" >
  </canvas>
</body>

</html>

Upvotes: 0

Views: 1497

Answers (3)

Chad
Chad

Reputation: 19609

In my grapefruit game engine I use a bounded-box system to detect collisions. I found a good question on gamedev.stackexchange.com that helped me out and this is what I came up with:

intersects: function(entity) {
    return (Math.abs(this._hitboxMesh.position.x - entity._hitboxMesh.position.x) * 2 < (this.hitSize.x + entity.hitSize.x)) &&
            (Math.abs(this._hitboxMesh.position.y - entity._hitboxMesh.position.y) * 2 < (this.hitSize.y + entity.hitSize.y));
}

Basically the game loop will run this check on entities to see if they intersect, or collide. This is a method on an Entity object, so this refers to an Entity and so does the argument.

Upvotes: 1

Hello-World
Hello-World

Reputation: 9555

http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-introduction

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

Upvotes: 0

David
David

Reputation: 3763

a technique I have used in the past is to create a background buffer and give each object an id. Then when that object is drawn also draw it in on the background buffer making each pixels colour that id. While drawing on the background buffer check if any pixel is being drawn on a pixel that is not black (0) then it is a collision and the object you collided with is the colour of that pixel on the buffer.

Upvotes: 0

Related Questions