Search code examples
javascripthtmlcollision-detectiongame-development

Ball-Box Collision Detection

var canvas,cxt,h,w,mousePos;
var player= {
    x: 10,
    y: 10,
    height: 20,
    width: 20,
    color: 'black'
};

function init(){
    canvas= document.querySelector('#style');
    cxt= canvas.getContext('2d');
    h= canvas.height;
    w= canvas.width;
    createBalls(10);
    main();
}

function createBalls(c){
    ball= [];
    var i;
    for(i=0;i<c;i++){
        var k= {
            x: h/2,
            y: w/2,
            color: colorGenerate(),
            radius: 5+Math.round(30*Math.random()), 
            a: -5+Math.round(10*Math.random()),
            b: -5+Math.round(10*Math.random())
        }
        ball.push(k);
    }
}

function main(){
    cxt.clearRect(0,0,h,w);
    canvas.addEventListener('mousemove',function(evt){
        mousePos= getMousePos(canvas,evt);
    });
    createPlayer();
    draw(ball.length);
    ballAlive();
    move(ball.length);
    movePlayer();
    requestAnimationFrame(main);
}

function ballAlive(){
    cxt.save();
    cxt.font="30px Arial";
    if(ball.length==0) cxt.fillText("You Win",20,20);
    else cxt.fillText(ball.length,20,40);
    cxt.restore();
}

function getMousePos(canvas,evt){
    var rect= canvas.getBoundingClientRect();
    return{
        x: evt.clientX-rect.left,
        y: evt.clientY-rect.top
    }
}

function createPlayer(){
    cxt.save();
    cxt.translate(0,0);
    cxt.fillStyle= player.color;
    cxt.fillRect(player.x,player.y,player.height,player.width);
    cxt.restore();
}

function movePlayer(){
    if(mousePos !== undefined){
        player.x= mousePos.x;
        player.y= mousePos.y;
    }
}

function draw(d){
    var i;
    for(i=0;i<d;i++){
        cxt.save();
        cxt.translate(0,0);
        cxt.beginPath();
        cxt.fillStyle= ball[i].color;
        cxt.arc(ball[i].x,ball[i].y,ball[i].radius,0,2*Math.PI)
        cxt.fill();
        cxt.restore();
    }
}

function move(m){
    var i;
    for(i=0;i<m;i++){
        ball[i].x+= ball[i].a;
        ball[i].y+= ball[i].b;
        checkCollision(ball[i]);
        checkCollisionPlayer(ball[i],i);
    }
}

function checkCollision(n){
    if(n.x+n.radius>w){
        n.a= -n.a;
        n.x= w-n.radius;
    }
    else if(n.x-n.radius<0){
        n.a= -n.a;
        n.x= n.radius;
    }
    if(n.y+n.radius>h){
        n.b= -n.b;
        n.y= h-n.radius;
    }
    else if(n.y-n.radius<0){
        n.b= -n.b;
        n.y= n.radius;
    }
}

function checkCollisionPlayer(n,j){
    if(overlap(n.x,n.y,n.radius,player.x,player.y,player.height,player.width)){
        ball.splice(j,1);
    }
}

function overlap(cx,cy,r,px,py,ph,pw){
    var testX= cx;
    var testY= cy;
// THESE LINES ARE FOR MOVING THE BALLS TOWARDS THE PLAYER
    if(testX<px) testX=px;
    if(testX>(px+pw)) testX=px+pw;
    if(testY<py) testy=py;
    if(testY>(py+ph)) testY=py+ph;

    //DISTANCE FORMULA FOR CHECKING THE OVERLAPING BETWEEN THE BOX AND CIRCLE
    return((cx-px)*(cx-px)+(cy-py)*(cy-py)<r*r);
}

function colorGenerate(){
    var col= ['green','blue','pink','red','brown','yellow','black','orange','grey','golden'];
    var i= Math.round((col.length-1)*Math.random());  //RETURN VALUES FROM 0 TO 9
    return col[i];
}
 #style{
    border: 4px dotted green;
 }
<!DOCTYPE html>
<html lang= 'en-us'>
    <head>
        <title>Feed The Monster</title>
 
    </head>
    <body onload= 'init();'>
        <canvas id= 'style' height= '400' width= '400'>
            Your browser does not support canvas...
        </canvas>
    </body>
</html>

I am getting error in my code as soon as the first collision takes place between the player(box) and the balls. The only part which is giving error is the splice() function. If I comment the splice() function then code is not showing any error. But if I use splice() function part in my code then it is showing error in the move function and I don't know why this is happening. Please help me…

Solution 

  • var canvas,cxt,h,w,mousePos;
var player= {
    x: 10,
    y: 10,
    height: 20,
    width: 20,
    color: 'black'
};

function init(){
    canvas= document.querySelector('#style');
    cxt= canvas.getContext('2d');
    h= canvas.height;
    w= canvas.width;
    createBalls(10);
    main();
}

function createBalls(c){
    ball= [];
    var i;
    for(i=0;i<c;i++){
        var k= {
            x: h/2,
            y: w/2,
            color: colorGenerate(),
            radius: 5+Math.round(30*Math.random()), 
            a: -5+Math.round(10*Math.random()),
            b: -5+Math.round(10*Math.random())
        }
        ball.push(k);
    }
}

function main(){
    cxt.clearRect(0,0,h,w);
    canvas.addEventListener('mousemove',function(evt){
        mousePos= getMousePos(canvas,evt);
    });
    createPlayer();
    draw(ball.length);
    ballAlive();
    move(ball);
    movePlayer();
    requestAnimationFrame(main);
}

function ballAlive(){
    cxt.save();
    cxt.font="30px Arial";
    if(ball.length==0) cxt.fillText("You Win",20,20);
    else cxt.fillText(ball.length,20,40);
    cxt.restore();
}

function getMousePos(canvas,evt){
    var rect= canvas.getBoundingClientRect();
    return{
        x: evt.clientX-rect.left,
        y: evt.clientY-rect.top
    }
}

function createPlayer(){
    cxt.save();
    cxt.translate(0,0);
    cxt.fillStyle= player.color;
    cxt.fillRect(player.x,player.y,player.height,player.width);
    cxt.restore();
}

function movePlayer(){
    if(mousePos !== undefined){
        player.x= mousePos.x;
        player.y= mousePos.y;
    }
}

function draw(d){
    var i;
    for(i=0;i<d;i++){
        cxt.save();
        cxt.translate(0,0);
        cxt.beginPath();
        cxt.fillStyle= ball[i].color;
        cxt.arc(ball[i].x,ball[i].y,ball[i].radius,0,2*Math.PI)
        cxt.fill();
        cxt.restore();
    }
}

function move(m){
    var i;
    for(i=0;i<m.length;i++){
        ball[i].x+= ball[i].a;
        ball[i].y+= ball[i].b;
        checkCollision(ball[i]);
        checkCollisionPlayer(ball[i],i);
    }
}

function checkCollision(n){
    if(n.x+n.radius>w){
        n.a= -n.a;
        n.x= w-n.radius;
    }
    else if(n.x-n.radius<0){
        n.a= -n.a;
        n.x= n.radius;
    }
    if(n.y+n.radius>h){
        n.b= -n.b;
        n.y= h-n.radius;
    }
    else if(n.y-n.radius<0){
        n.b= -n.b;
        n.y= n.radius;
    }
}

function checkCollisionPlayer(n,j){
    if(overlap(n.x,n.y,n.radius,player.x,player.y,player.height,player.width)){
        ball.splice(j,1);
    }
}

function overlap(cx,cy,r,px,py,ph,pw){
    var testX= cx;
    var testY= cy;
// THESE LINES ARE FOR MOVING THE BALLS TOWARDS THE PLAYER
    if(testX<px) testX=px;
    if(testX>(px+pw)) testX=px+pw;
    if(testY<py) testy=py;
    if(testY>(py+ph)) testY=py+ph;

    //DISTANCE FORMULA FOR CHECKING THE OVERLAPING BETWEEN THE BOX AND CIRCLE
    return((cx-px)*(cx-px)+(cy-py)*(cy-py)<r*r);
}

function colorGenerate(){
    var col= ['green','blue','pink','red','brown','yellow','black','orange','grey','golden'];
    var i= Math.round((col.length-1)*Math.random());  //RETURN VALUES FROM 0 TO 9
    return col[i];
}
    #style{
        border: 4px dotted green;
 }
    <!DOCTYPE html>
<html lang= 'en-us'>
    <head>
        <title>Feed The Monster</title>
 
    </head>
    <body onload= 'init();'>
        <canvas id= 'style' height= '400' width= '400'>
            Your browser does not support canvas...
        </canvas>
    </body>
    </html>

    If you pass the array as an argument in the move() function not the length of the array then your code will work perfectly.