I need help with my DHTML game

**joekarbakuitz** · Feb 18, 2002, 04:24

I have a delimma in my DHTML game that I am creating. I am making a ping pong type game and I have gotten as far as having the ball bouncing around and the paddles that you move, but how do have the ball bounce off the paddle? I cannot get the ball to bounce off it.

I know my code sucks, I was just coding a rough draft before I condensed it down and made it cross-browser.

Here it is:

<html>
<head>
<script language="javascript">
var option1 = Math.floor(Math.random()*10);
var option2 = Math.floor(Math.random()*10);
var top_border = 20;
var left_border = 10;
var bottom_border = 360;
var right_border = 600;
var x_motion;
var y_motion;
var padtop = 200;
var padbtm = 250;

if (option1 >= 5) { x_motion = "plus"; }
else { y_motion = "minus"; }
if (option2 >= 5) { y_motion = "plus"; }
else { y_motion = "minus"; }

//============================================

function keyHandler(e) {
var keypress
var key
var table = document.getElementById("table");
var pddle1 = document.getElementById("paddle1");
var pdle1 = pddle1.style;

if (e.keyCode) keypress = e.keyCode;
else keypress = e.which;

key = String.fromCharCode(keypress);

if (key=="w") {
pdle1.top = parseInt(pdle1.top) - 20;
padtop = padtop - 20;
padbtm = padbtm - 20;
} else if (key=="s") {
pdle1.top = parseInt(pdle1.top) + 20;
padtop = padtop + 20;
padbtm = padbtm + 20;
}

}

//=============================================

function moveBall() {
var pddle1 = document.getElementById("paddle1");
var pdle1 = pddle1.style;
var pad1 = 57;

var the_smile;

var smile = document.getElementById("ball");
the_smile = smile.style;

if (x_motion == "plus")
{
the_smile.left = parseInt(the_smile.left) + 5;
} else {
the_smile.left = parseInt(the_smile.left) - 5;
}

if (y_motion == "plus")
{
the_smile.top = parseInt(the_smile.top) + 5;
} else {
the_smile.top = parseInt(the_smile.top) - 5;
}

if ((parseInt(the_smile.left) > right_border))
{
x_motion = "minus";
} else if (parseInt(the_smile.left)<left_border) {
x_motion = "plus";
}

if (parseInt(the_smile.top) > bottom_border)
{
y_motion = "minus";
} else if (parseInt(the_smile.top) < top_border) {
y_motion = "plus";
}

theTimeOut = setTimeout('moveBall()', 30);
}

//==============================================

</script
</head>
<body onkeypress="keyHandler(event);" onload="moveBall();">

<div id="paddle1" style="position:absolute; height:50; width:7; top:150; left:50; background-color:red; z-index:1;">
</div>

<div id="table" style="position:absolute; left:10; top:20; width:600; height:350; background-color:green; z-index:0;">
</div>

<img name="ball" id="ball" src="E:/html/images/pongball.jpg" style="position:absolute; top:170; left: 295; z-index:2;">

<div id="begin" style="position:absolute; top:80; left:160; width:300; visibility:hidden;">
<h2><span id="bgntxt" style="color:white;">Welcome to paddle ball</span></h2>
</div>

</body>
</html>

**JohnInFl** · Mar 6, 2002, 21:14

Hi,

Without looking at your code

Think in terms of the Pythagorean theorem

a2 + b2 = c2

You also need horizontal and vertical velocity as well as acceleration. The velocity is incremented once each pass by the amount of acceleration.

Then if the distance between the paddle and the ball is
very minimal value you would negate the velocities and negate the acccelerations but that you would get into more complicatec math cosine and sine based on the angle the ball hit the paddle.

Thus

An example to calculate distancce of the ball from the paddle:
float dx = paddle->x - ball->x;
float dy = paddle->y - ball->y;

float dst = sqrt(dx*dx+dy*dy);

float dst = sqrt(dx*dx+dy*dy); where dx and dy are the horizontal and vertical velocities respectively.

**joekarbakuitz** · Mar 7, 2002, 15:39

Thanks for your help on that. I posted this question a while ago and I have since found out how to fix the problem. There is a function:

elementFromPoint(X, Y);

That does the trick. Thanks for your help anyways.

The SitePoint Forums have moved.

User Tag List

Thread: I need help with my DHTML game

Thread Tools

Display

I need help with my DHTML game

Bookmarks

Bookmarks

Posting Permissions