Dropping Ball using javascript

Submitted by: 
Language: 
Visitors have accessed this post 1598 times.

In this tutorial we are going to learn how to make an image or a ball drop and bounce using javascript. To start dropping the ball click anywhere in the screen. Here's the code.

Head Section

  1. <script>
  2. function BrowserCheck() {
  3. var b = navigator.appName;
  4. if (b == "Netscape") this.b = "NS";
  5. else if (b == "Microsoft Internet Explorer") this.b = "IE";
  6. else this.b = b;
  7. this.v = parseInt(navigator.appVersion);
  8. this.NS = (this.b == "NS" && this.v>=4);
  9. this.NS4 = (this.b == "NS" && this.v == 4);
  10. this.NS5 = (this.b == "NS" && this.v == 5);
  11. this.IE = (this.b == "IE" && this.v>=4);
  12. this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
  13. this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
  14. if (this.IE5 || this.NS5) this.VER5 = true;
  15. if (this.IE4 || this.NS4) this.VER4 = true;
  16. this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
  17. this.min = (this.NS||this.IE);
  18. }
  19. is = new BrowserCheck();
  20. // End -->
  21. </script>

Body Section

  1. <center>
  2. <h3>Click anywhere to make the ball drop and bounce</h3> <br>
  3. <div id="staticBall" style="position:relative;visibility:visible">
  4. <img src="ball.jpg" height=30 width=30 alt="Static ball">
  5. </div>
  6. </center>
  7. <div id="ball" style="visibility:hidden; position:absolute; left:100; top:10; height:34; width:34">
  8. <img src="ball.jpg" height=30 width=30 alt="Bouncing ball">
  9. </div>
  10. <script>
  11. <!-- Begin
  12. iter = 0;
  13. setId = 0;
  14. down = true;
  15. up = false;
  16. bouncingBall = (is.VER5) ? document.getElementById("ball").style
  17. : (is.NS) ? document.layers["ball"]
  18. : document.all["ball"].style;
  19. stillBall = (is.VER5) ? document.getElementById("staticBall").style
  20. : (is.NS) ? document.layers["staticBall"] : document.all["staticBall"].style;
  21. winH = (is.NS) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
  22. document.onmouseup = buttonUp;
  23. if (is.NS4)
  24. document.captureEvents(Event.MOUSEUP);
  25. function buttonUp(e) {
  26. if ( ((is.NS) ? e.which : event.button) != 1) return true;
  27. if (setId != 0) clearInterval(setId);
  28. bouncingBall.visibility="visible";
  29. stillBall.visibility="hidden";
  30. bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
  31. bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
  32. iter = 0;
  33. setId = setInterval("generateGravity()", 20);
  34. return true;
  35. }
  36. function generateGravity() {
  37. if ((parseInt(bouncingBall.top)+iter < winH) && down) {
  38. bouncingBall.top = parseInt(bouncingBall.top) + iter;
  39. iter++;
  40. return;
  41. }
  42. else {
  43. if ((parseInt(bouncingBall.top)< winH) && down) {
  44. bouncingBall.top = winH + 5;
  45. return;
  46. }
  47. down = false;
  48. up = true;
  49. if (iter < 0 && parseInt(bouncingBall.top) > winH) {
  50. clearInterval(setId);
  51. bouncingBall.visibility = "hidden";
  52. stillBall.visibility="visible";
  53. setId = 0;
  54. }
  55. if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
  56. bouncingBall.top = parseInt(bouncingBall.top) - iter;
  57. iter--;
  58. if (iter%3 == 0) iter--;
  59. return;
  60. }
  61. down = true;
  62. up = false;
  63. }
  64. }
  65. // End -->
  66. </script>


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.