Canvas collision

Question

I am a new in javascript and trying to find out how to make a collision with ball and plank which will stop the game and alert player with something like "You lost". But I only want red balls to hit the plank and blue to pass on without touching. Here is code that I am working on. (I dont mind if you could help to do collision only with both balls)

var spawnRate = 100;

var spawnRateOfDescent = 2;

var lastSpawn = -10;

var objects = [];

var startTime = Date.now();

function spawnRandomObject() {


var t;

if (Math.random() < 0.50) {
    t = "red";
} else {
    t = "blue";
}


var object = {
    type: t,
    x: Math.random() * (canvas.width - 30) + 15,
    y: 0

}

objects.push(object);
}



function animate() {

var time = Date.now();

if (time > (lastSpawn + spawnRate)) {
    lastSpawn = time;
    spawnRandomObject();
}

for (var i = 0; i < objects.length; i++) {
    var object = objects[i];
    object.y += spawnRateOfDescent;
    ctx.beginPath();
    ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = object.type;
    ctx.fill();

    }

    }



var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var paddleHeight = 10;
var paddleWidth = 60;
var paddleY = 480
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
if(e.keyCode == 39) {
    rightPressed = true;
}
else if(e.keyCode == 37) {
    leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
    rightPressed = false;
}
else if(e.keyCode == 37) {
    leftPressed = false;
}
}



function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}




function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();    
animate();

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 3;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 3;
}

}

setInterval(draw, 10);

Thanks!

Answer 1

If you have an object like this:

let ball = { type: 'red', x: 10, y: 10, width: 10, height: 10 };

You might want to consider adding a method to this to check if it overlaps any other rectangle:

ball.overlapsBall = function( otherBall ){
    return !( 
        otherBall.x + otherBall.width < this.x 
        && otherBall.y + otherBall.height < this.y 
        && otherBall.y > this.y + this.height 
        && otherBall.x > this.x + this.height
    );
}

You do this by checking if it does not overlap, which is only true if one box is entirely outside of the other (have a read through the if statement and try to visualise it, its actually rather simple)

In your draw function you could now add a loop to see if any overlap occurs:

var overlap = objects.filter(function( ball ) { return paddle.overlapsBall( ball ) });

You could even place an if statement to check it's type! (The filter will take you entire array of balls and check the overlaps, and remove anything from the array that does not return true. Now you can use overlaps.forEach(function( ball ){ /* ... */}); to do something with all the balls that overlapped your paddle.)

One last thing, if you are planning on doing this with many objects you might want to consider using a simple class like this for every paddle or ball you make:

class Object2D {

    constructor(x = 0, y = 0;, width = 1, height = 1){
        this.x = x;
        this.y = x;
        this.width = width;
        this.height = height;
    }

    overlaps( otherObject ){
        !( otherObject.x + otherObject.width < this.x && otherObject.y + otherObject.height < this.y && otherObject.y > this.y + this.height && otherObject.x > this.x + this.height );
    }

}

This allows you to this simple expression to create a new object that automatically has a method to check for overlaps with similar objects:

var paddle = new Object2D(0,0,20,10);
var ball = new Object2D(5,5,10,10);
paddle.overlaps( ball ); // true!

On top of that, you are ensured that any Object2D contains the values you will need for your calculations. You can check if this object is if the right type using paddle instanceof Object2D (which is true).

Note Please note, as @Janje so continuously points out in the comments below, that we are doing a rectangle overlap here and it might create some 'false positives' for all the pieces of rectangle that aren't the circle. This is good enough for most cases, but you can find the math for other overlaps and collisions easily ith a quick google search.

Update: Simple Implementation

See below for a very simple example of how overlaps work in action:

var paddle = { x: 50,  y: 50,  width: 60,  height: 20 };
var box = { x: 5, y: 20, width: 20, height: 20 };

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

document.body.appendChild( canvas );

canvas.width = 300;
canvas.height = 300;

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

function animate(){
  ctx.clearRect( 0, 0, canvas.width, canvas.height );
  
  ctx.fillStyle = overlaps( paddle, box ) ? "red" : "black";
  ctx.fillRect( paddle.x, paddle.y, paddle.width, paddle.height );
  ctx.fillRect( box.x, box.y, box.width, box.height );
	
  window.requestAnimationFrame( animate );
}

canvas.addEventListener('mousemove', function(event){
  paddle.x = event.clientX - paddle.width / 2;
  paddle.y = event.clientY - paddle.height / 2;
})

animate();