Question

I have a ball bouncing around the screen and I need to write code that essentially ends the game when it collides with the player… This is my current code, but it isn’t working. Let me know if you need more information.

if(playerLoc == ballLoc){
       gameOver();
       }

Where playerLoc/ballLoc are measured based of X and Y axis measurements.

<script language="JavaScript">
    //get info, process data, update screen objects
        //instance vars
        var player;
        var ball;
        var score;
        var axis;
        var ballaxis;
        //initial speeds
        var dx = 6;
        var dy = 6;
        var currentScore = 0;
        var timer;
        //set initial conditions for ball and paddle

        var playerTop = 400;
        var playerLeft = 200;
        var ballLeft = 228;
        var ballTop = 4;
        var playerLoc = playerLeft + playerTop;
        var ballLoc = ballLeft + ballTop;

        function init(){
            //instantiate HTML object instance vars
            player = document.getElementById('player');
            ball = document.getElementById('ball');
            score = document.getElementById('score');
            axis = document.getElementById('axis');
            ballaxis = document.getElementById('ballaxis');
            //register key listener with document object
            document.onkeydown = keyListener;
            //start the game loop
            start();

        }

        function keyListener(e){
            if(!e){
                //for IE
                e = window.event;
            }
            if(e.keyCode==37 && playerLeft > 0){
                //keyCode 37 is left arrow
                playerLeft -= 10;
                player.style.left = playerLeft + 'px';
            }
            if(e.keyCode==39 && playerLeft < 450){
                //keyCode 39 is right arrow
                playerLeft += 10;
                player.style.left = playerLeft + 'px';
            }
            if(e.keyCode==38 && playerTop > 0){
                //keyCode 38 is up arrow
                playerTop -= 10;
                player.style.top = playerTop + 'px';
            }
            if(e.keyCode==40 && playerTop < 450){
                //keyCode 40 is down arrow
                playerTop += 10;
                player.style.top = playerTop + 'px';
            }
        }

        function start(){
            //game loop
            render();
            detectCollisions();
            difficulty();
            axisMeasure();

            //end conditions

            if(playerLoc == ballLoc){
                gameOver();
                }
            else{
                //still in play - keep the loop going
                timer = setTimeout('start()',50);   
            }

        }



        function detectCollisions(){
            //just reflect the ball on a collision
            //a more robust engine could change trajectory of ball based
            //on where the ball hits the paddle
            if(collisionX())
                dx = dx * -1;
            if(collisionY())
                dy = dy * -1;
        }

        function collisionX(){
            //check left and right boundaries
            if(ballLeft < 2 || ballLeft > 480)
                return true;

            else {
                return false;   
            }

        }

        function collisionY(){
            //check if at top of playing area
            if(ballTop < 2  || ballTop > 480)
                return true;

            else {
                return false;
            }    

        }

        function render(){
            moveBall();
            updateScore();
        }

        function moveBall(){
            ballLeft += dx;
            ballTop += dy;
            ball.style.left = ballLeft;
            ball.style.top = ballTop;
        }

        function axisMeasure(){
            axis.innerHTML = 'P X-Axis: ' + playerLeft + ' P Y-Axis:   ' + playerTop
            ballaxis.innerHTML = 'B X-Axis: ' + ballLeft + ' B Y-Axis:   ' + ballTop        
        }

        function updateScore(){
            currentScore += 5;
            score.innerHTML = 'Score: ' + currentScore;
        }

        function difficulty(){
            //as the game progresses, increase magnitude of the vertical speed
            if(currentScore % 1000 == 0){
                if(dy > 0)
                    dy += 1;
                else
                    dy -= 1;
            }
        }

        function gameOver(){
            //end the game by clearing the timer, modifying the score label
            clearTimeout(timer);
            score.innerHTML += "   Game Over";
            score.style.backgroundColor = 'rgb(128,0,0)';

Answer 1

Lol.. well you have like no code shown. So this is a complete shot in the dark.

if(playerLoc.x == ballLoc.x && playerLoc.y == ballLoc.y){
       gameOver();
}

OR, even try the distance method.

var distance = Math.sqrt((ballLoc.x- playerLoc.x) *(ballLoc.x-playerLoc.x) + (ballLoc.y - playerLoc.y) * (ballLoc.y-playerLoc.y));

if(distance < *some amount*)}
       gameOver();
}

Also heres a live demo of the distance check in action.

Edit

Ok well now that the code is posted, my answer is somewhat irrelevant, but Ill keep it here regardless since the distance check is a valid method that would even work in the OP’s case.

var ballX = ballLeft + (ballWidth/2),
    ballY = ballTop + (ballHeight/2),
    playerX = playerLeft + (playerWidth/2),
    playerY = playerTop + (playerHeight/2);

var distance = Math.sqrt((ballX - playerX) *(ballX - playerX) + (ballY - playerTop) * (ballY - playerTop )); 
if(distance < 25){ gameOver(); }