SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  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 04:40.


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
  •