SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: I need help with my DHTML game
-
Feb 18, 2002, 05:24 #1
- Join Date
- Feb 2002
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I need help with my DHTML game
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>Last edited by joekarbakuitz; Feb 18, 2002 at 05:40.
-
Mar 6, 2002, 22:14 #2
- Join Date
- Sep 2001
- Location
- FL, USA
- Posts
- 87
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Last edited by JohnInFl; Mar 6, 2002 at 22:18.
-
Mar 7, 2002, 16:39 #3
- Join Date
- Feb 2002
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks