SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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.

  2. #2
    SitePoint Enthusiast JohnInFl's Avatar
    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.

  3. #3
    SitePoint Enthusiast
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •