Solved

bouncing ball

Posted on 2003-11-23
5
1,606 Views
Last Modified: 2006-11-17
i made a program for bouncing ball but i couldn't make it better. it is run correct but i need clew to how control the numbers of movement of the ball

this is my code;

<HTML>
<HEAD>
<TITLE>Bouncing Ball</TITLE>

<STYLE>

#table
 {
  position:absolute;
  top:100px;
  left:100px;
  width:300px;
  height:300px;
  border-style:ridge;
  background-color:white;
 }

#ball
 {
  position:absolute;
  top:100px;
  left:300px;
 }

</STYLE>

<!---- START java script----->

<script language="javascript">
<!--

  var xPos=100 + (Math.random()*100);  //Ball in x position
  var xvel=1 + (Math.random()*3);   //Ball in x velosity
  var yPos=100 +(Math.random()*100);
  var yvel=1 + (Math.random()*3);

var isNetscape = navigator.appName=="Netscape";

function move(elementId)

{

    xPos = xPos + xvel ;
    yPos = yPos + yvel;

    ball.style.left = xPos;
    ball.style.top = yPos;
    if (xPos>370) {xvel= -4}
    if (xPos<110) {xvel= 40}
    if (yPos>370) {yvel=-4}
    if (yPos<110) {yvel=40}

    if (isNetscape)
    {

        document.ball.left = xPos;
        document.ball.top = yPos;

    }
    else
    {

        ball.style.left=xPos;
        ball.style.top=yPos;
    }
}


//-->
</SCRIPT>

<!----- END java script------>
</HEAD>

<BODY onclick=clearInterval(intervalId)
onload="intervalId = setInterval('move(ball)',30)" class="all">

<link  rel="stylesheet" type="text/css" href="mystyle2.css">

<H1><p class="heading">Bouncing Ball</p></H1>


<p id="table"></p>

<div id="ball">
<img border="0" src="ball3.gif" width="40" height="40">
</div>
</BODY>
</HTML>

thanky very much
0
Comment
Question by:alqaoud
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 4

Expert Comment

by:apprenti
ID: 9806750
>> i made a program for bouncing ball

Just wondering...did you write it?
0
 
LVL 10

Expert Comment

by:NeoTeq
ID: 9809454
I doubt that too, but anyway try this:
(I will add some random numbers if you like)

<HTML>
<HEAD>
<TITLE>Bouncing Ball</TITLE>

<STYLE>

#table
 {
  position:absolute;
  top:100px;
  left:100px;
  width:300px;
  height:300px;
  border-style:ridge;
  background-color:white;
 }

#ball
 {
  position:absolute;
  top:100px;
  left:300px;
 }

</STYLE>

<!---- START java script----->

<script language="javascript">
<!--

  var xPos=100 + (Math.random()*100);  //Ball in x position
  var xvel=1 + (Math.random()*3);   //Ball in x velosity
  var yPos=100 +(Math.random()*100);
  var yvel=1 + (Math.random()*3);

var isNetscape = navigator.appName=="Netscape";

function move(elementId)

{

    xPos = xPos + xvel ;
    yPos = yPos + yvel;

    ball.style.left = xPos;
    ball.style.top = yPos;
    if (xPos>370) {xvel= -xvel}
    if (xPos<110) {xvel= -xvel}
    if (yPos>370) {yvel= -yvel}
    if (yPos<110) {yvel= -yvel}

    if (isNetscape)
    {

        document.ball.left = xPos;
        document.ball.top = yPos;

    }
    else
    {

        ball.style.left=xPos;
        ball.style.top=yPos;
    }
}


//-->
</SCRIPT>

<!----- END java script------>
</HEAD>

<BODY onclick=clearInterval(intervalId)
onload="intervalId = setInterval('move(ball)',30)" class="all">

<link  rel="stylesheet" type="text/css" href="mystyle2.css">

<H1><p class="heading">Bouncing Ball</p></H1>


<p id="table"></p>

<div id="ball">
<img border="0" src="ball3.gif" width="40" height="40">
</div>
</BODY>
</HTML>
0
 
LVL 10

Accepted Solution

by:
NeoTeq earned 50 total points
ID: 9809474
Better yet (with random, no crossing boundaries):

<HTML>
<HEAD>
<TITLE>Bouncing Ball</TITLE>

<STYLE>

#table
 {
  position:absolute;
  top:100px;
  left:100px;
  width:300px;
  height:300px;
  border-style:ridge;
  background-color:white;
 }

#ball
 {
  position:absolute;
  top:100px;
  left:300px;
 }

</STYLE>

<!---- START java script----->

<script language="javascript">
<!--

  var xPos=100 + (Math.random()*100);  //Ball in x position
  var xvel=1 + (Math.random()*3);   //Ball in x velosity
  var yPos=100 +(Math.random()*100);
  var yvel=1 + (Math.random()*3);

var isNetscape = navigator.appName=="Netscape";

function move(elementId)

{

    xPos = xPos + xvel ;
    yPos = yPos + yvel;

    ball.style.left = xPos;
    ball.style.top = yPos;
    if (xPos>370) {xvel= -xvel + (Math.random()*3) - 1.5; xPos = 370}
    if (xPos<110) {xvel= -xvel + (Math.random()*3) - 1.5; xPos = 110}
    if (yPos>370) {yvel=-yvel + (Math.random()*3) - 1.5; yPos = 370}
    if (yPos<110) {yvel=-yvel + (Math.random()*3) - 1.5; yPos = 110}

    if (isNetscape)
    {

        document.ball.left = xPos;
        document.ball.top = yPos;

    }
    else
    {

        ball.style.left=xPos;
        ball.style.top=yPos;
    }
}


//-->
</SCRIPT>

<!----- END java script------>
</HEAD>

<BODY onclick=clearInterval(intervalId)
onload="intervalId = setInterval('move(ball)',30)" class="all">

<link  rel="stylesheet" type="text/css" href="mystyle2.css">

<H1><p class="heading">Bouncing Ball</p></H1>


<p id="table"></p>

<div id="ball">
<img border="0" src="ball3.gif" width="40" height="40">
</div>
</BODY>
</HTML>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10383624
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: NeoTeq {http:#9809474}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question