Need help with a Javascript collision badly

51mickey · April 3, 2012, 2:13am

Hello,
I’m making a simple javascript game. There is a square stage with a bouncing ball in it. The user can move a paddle along the bottom of the square using the arrow keys to hit the ball, and make it continue bouncing. If the user’s paddle doesn’t reach the ball in time, it falls to ground, game over.
However, my collision isn’t working. The ball falls right through my paddle. What am I doing wrong?

Code is here:

<!DOCTYPE HTML PUBLIC>

<html>
<head>
<title>Bask-A-Bounce!</title>
<style>
#stage{
position: absolute;
top: 100;
left: 100;
border: 3px solid black;
width: 500;
height: 500;
background-color: #E0FFFF;
}
#paddle{
position: absolute;
top: 470;
left: 228;
width: 64;
height: 16;

}
#ball{
position: absolute;
top: 4;
left: 200;
width: 16;
height: 16;
}
#score{
position: absolute;
top: 486;
left: 0;
width: 500;
height: 14;
background-color: rgb(32,128,64);
}
</style>
<script language=“JavaScript”>
//get info, process data, update screen objects
//instance vars
var ball;
var paddle;
var score;
//initial speeds
var dx = 5;
var dy = 5;
var currentScore = 0;
var timer;
//set initial conditions for ball and paddle
var paddleLeft = 228;
var ballLeft = 300;
var ballTop = 4;

function init(){
//instantiate HTML object instance vars
ball = document.getElementById(‘ball’);
paddle = document.getElementById(‘paddle’);
score = document.getElementById(‘score’);
//register key listener with document object
document.onkeydown = keyListener;
//start the game loop
start();
}

}

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

//end conditions
if(ballTop < 470){
//still in play - keep the loop going
timer = setTimeout(‘start()’,50);
}
else{
gameOver();
}
}

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 < 4 || ballLeft > 462)
return true;
return false;
}

function collisionY(){
//check if at top of playing area
if(ballTop < 4)
return true;
//check to see if ball collided with paddle
if(ballTop > 470){
if(ballLeft > paddleLeft && ballLeft < paddleLeft + 64)
return true;
}
return false;
}

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

function moveBall(){
ballLeft += dx;
ballTop += dy;
ball.style.left = ballLeft;
ball.style.top = 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)’;
}

</script>
</head>
<body onLoad=“init()”>
<h1>Bask-A-Bounce</h1>
<div id=“stage”>
<div id=“paddle”>
<img src=“paddle1.gif”>
</div>
<div id=“ball”>
<img src=“ball.gif”>
</div>
<div id=“score”>
Score: 0
</div>
</div>

</body>
</html>