Collision detection in Javascript Falling Rocks game

Question

So I'm supposed to do a Javascript version of the falling rocks game for a university project. The player controls a rectangle that is supposed to move from left to right without getting hit by the falling objects. Reaching each side increases the score, while getting hit decreases it. Game over is at 0 points.

I seem to be stuck at the collision detection part. I'm trying to use the coordinates of each objects as criteria for the collision, but what I have so far does nothing. If someone can check to see what I'm doing wrong, I would really appreciate it.

Image size for the player block is x=30px, y=15px, while the falling objects are 15 by 15 pixels.

Full code so far:

//canvas setup
var canvas = document.createElement("canvas");
canvas.style.background = "white";
canvas.style.height = "95%";
canvas.style.width = "99%";
document.body.appendChild(canvas);
canvas.style.border="1px solid black";
var ctx = canvas.getContext("2d");

// block image
var blockImg = new Image();
var t;
var block= 
    {
        blockSpeed : 0  
    }
block.x=0;
blockImg.style.height=15;
blockImg.style.width=30;
blockImg.src = "squareche.jpg";
//draw block
blockImg.onload = function()
    {
     ctx.drawImage(blockImg, block.x,canvas.height-15);
    }
function drawBlockProgress(pos)
{
    ctx.drawImage(blockImg, block.x, canvas.height-15);
}   
//Background image
var bckg = new Image();
bckg.src = "background.png";
function drawBackground()
{  
        ctx.drawImage(bckg, 0, 0);
}
//score
function drawScore()
{
    ctx.font = "14px Times New Roman";
    ctx.fillText("Score: " + score, 230, 25);
}

//score, position, and a bool flag for getting points on reaching either end
var score=50;
var pos = 0;
var flag = true;

//left and right keypush event handlers
document.onkeydown = function(event){
    if(event.keyCode==39)
    {
        pos+=10;
        block.x=block.blockSpeed+pos;
        if(pos>=270)
        {
            if(flag)
            {
                flag=!flag;
                score+=10;
            }
        pos=270;
        block.x=270;

        drawBlockProgress(pos);

        }
        else
        {
            drawBlockProgress(pos);     
        }
    }
    else if(event.keyCode == 37)
    {
        pos-=10;
        block.x=block.blockSpeed+pos;
        if(pos<=0)
        {
            if(!flag)
            {
                flag=!flag;
                score+=10;
            }
            pos=0;
            block.x=0;
            drawBlockProgress(pos);
        }
        else{
            drawBlockProgress(pos);
        }
    }
}
//set up the falling rocks
var imgRocks;
var x=0;
var y= 0;
var totalRocks = 10;
var rocks=[];
var speed = 0.2;

//generate the falling objects
function draw()
{
for(var i=0;i<totalRocks;i++)
    {
        drawBackground();
        drawBlockProgress(pos);
        drawScore();
        ctx.drawImage(rocks[i].image, rocks[i].x, rocks[i].y);
        rocks[i].y+=rocks[i].speed;
        if(rocks[i].y > canvas.height-15)
        {
            rocks[i].y=-17;
            rocks[i].x=Math.floor(Math.random()*300 + 1);
        }
    //collision check
        if(block.x <= (rocks[i].x + 15)
        && rocks[i].x <= (block.x + 30)
        && block.y <= (rocks[i].y + 15)
        && rocks[i].y <= (block.y + 15))
        {
            // rocks[i].y=-15;
            // rocks[i].x=Math.floor(Math.random()*300 + 1);
            score -=10;
            // if(score == 0)
            // {
                // break;
                // clearInterval(t);
                // alert("Game Over Dude !");
                // window.close();
            // }
        }
    }
}   
function start()
{   
    for (var i = 0; i < totalRocks; i++) {
        var fallingRock = new Object();
        fallingRock["image"] =  new Image();
        rocksImg = new Image();
        rocksImg.src = "rocks.jpg";
        fallingRock.image.src = rocksImg.src;
        fallingRock["x"] = Math.floor(Math.random() * 200 + 1);
        fallingRock["y"] = Math.floor(Math.random() * 100 + 1);
        fallingRock["speed"] = speed;
        rocks.push(fallingRock);
        t = setInterval(draw,10);   
    }
}
start();

Your collision detection code is good if you send in the right info. You have quite a few problems in the rest of your code though (sorry). — markE

markE markE · Accepted Answer · 2014-03-12T22:33:42

Here's a starting spot for you...

Make some rocks:

// rock variables
var rockWidth=15;
var rockHeight=15;
var totalRocks = 10;
var rocks=[];
for(var i=0;i<totalRocks;i++){
    addRock();
}

function addRock(){
    var rock={
        width:rockWidth,
        height:rockHeight
    }
    resetRock(rock);
    rocks.push(rock);
}

// move the rock to a random position near the top-of-canvas
// assign the rock a random speed
function resetRock(rock){
    rock.x=Math.random()*(canvas.width-rockWidth);
    rock.y=15+Math.random()*30;
    rock.speed=0.2+Math.random()*0.5;
}

Make a block:

// block variables
var blockWidth=30;
var blockHeight=15;
var blockSpeed=10;
var block={
    x:0,
    y:canvas.height-blockHeight,
    width:blockWidth,
    height:blockHeight,
    blockSpeed:blockSpeed  
}

Make an animation loop:

function animate(){

    // request another animation frame

    if(continueAnimating){
        requestAnimationFrame(animate);
    }

    // for each rock
    // (1) check for collisions
    // (2) advance the rock
    // (3) if the rock falls below the canvas, reset that rock

    // redraw everything

}

Here's a Demo: http://jsfiddle.net/m1erickson/76dx7/

enter image description here

Collision detection in Javascript Falling Rocks game

1 Answers