Post
Ask Question

Bouncing Ball a Particular Point Using HTML5

Introduction

 
This is a simple application for beginners that shows how to create a bouncing ball at a particular point using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a bouncing ball in a particular point application. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 application. I hope this article helps to make a bouncing ball at a particular point using HTML 5 and CSS tools.
 
Step 1 : First Open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Bounce".
notpad.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Ball".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "bounceDemo.aspx".
new.gif
 
webapplication.gif
 
Step 4 : Add a HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "bounce.html".
html.gif
 
Step 5: Now in this step we define a CSS file with the name P2.css. In CSS we define all properties of a holder, body and copy class; that is height, width, margin, position, font, color, etc.
 
Code
  1. body  
  2. {  
  3.     background: #fff;  
  4.     color: #FF99CC;  
  5.     font: 100.1% "Lucida Grande";  
  6. }  
  7. #holder  
  8. {  
  9.     height: 500px;  
  10.     left: 70%;  
  11.     margin: 0 0 0 -320px;  
  12.     position:fixed;  
  13.     top: 0;  
  14.     width: 640px;  
  15. }  
  16. #copy  
  17. {  
  18.     bottom: 1;  
  19.     font-size: .8em;  
  20.     position:fixed;  
  21.     right: 2em;  
  22.     text-align:center;  
  23. } 
Step 6 : Now we define a left side circle position that sets the alignment of a circle.
 
Code
  1. var ptx = ctx.set();  
  2.    targets.push(ctx.circle(400, 200, 20),  
  3.    ctx.circle(400, 250, 40),  
  4.    ctx.circle(400, 200, 20),  
  5.    ctx.circle(400, 250, 20),  
  6.    ctx.circle(400, 400, 20),  
  7.    ctx.circle(400, 450, 20),  
  8.    ctx.circle(400, 400, 20);  
  9.    ctx.circle(400, 450, 20)); 
Step 7 : Now we have define the inside text of a circle.
 
Code
  1. ptx.push(ctx.text(440, 200, "C"),  
  2.     ctx.text(440, 250, "C++"),  
  3.     ctx.text(440, 200, "JAVA"),  
  4.     ctx.text(440, 250, "C#"),  
  5.     ctx.text(440, 400, "ASP.NET"),  
  6.     ctx.text(440, 450, "WPF"),  
  7.     ctx.text(440, 400, "WCF"),  
  8.     ctx.text(440, 450, "Silverlight"));  
Step 8 : Now in this step we define a function; how to fill a color in a circle.
 
Code
  1.  rxt[0].click(function (  
  2.       thisthis.cx = this.cx || 400;  
  3.       this.animate({ cx: this.cx, "stroke-width": this.cx / 200, fill: this.cx - 200 ?  
  4.       "hsb(.1, .85, .85)" : "#FF99CC", "fill  
  5.       opacity": +!!(this.cx - 200) }, 2000);  
  6.       thisthis.cx = this.cx == 400 ? 200 : 400;  
  7.                 }  
  8. );  
  9.        rxt[2].click(function ()  
  10. {  
  11.       thisthis.cx = this.cx || 400;  
  12.       this.animate({ cx: this.cx, "stroke-width": this.cx / 200, fill: this.cx - 200 ?  
  13.      "hsb(.2, .85, .85)" : "#FF99CC", "fill  
  14.       opacity": +!!(this.cx - 200) }, 2000, "C++");  
  15.       thisthis.cx = this.cx == 400 ? 200 : 400;  
  16.               }  
  17. );  
  18. } 
Step 9: The complete code of a bouncing ball application is as follows:
 
Code   
  1. <html>  
  2.   <head>  
  3.   <title>Tom application</title>  
  4.   <link rel="stylesheet" href="P2.css" type="text/css" media="screen"/>  
  5.   <script src="Scripts/R2.js" type="text/javascript" charset="utf-8"></script>  
  6.   <script type="text/javascript">  
  7.    window.onload = function ()  
  8. {  
  9.    var ctx = Tom("holder", 800, 600);  
  10.    var ptr = ctx.set();  
  11.    var ptx = ctx.set();  
  12.    targets.push(ctx.circle(400, 200, 20),  
  13.    ctx.circle(400, 250, 40),  
  14.    ctx.circle(400, 200, 20),  
  15.    ctx.circle(400, 250, 20),  
  16.    ctx.circle(400, 400, 20),  
  17.    ctx.circle(400, 450, 20),  
  18.    ctx.circle(400, 400, 20);  
  19.    ctx.circle(400, 450, 20));  
  20.    ptx.attr({ font: "22px Fontin-Sans, Arial", fill: "#fff", "text-anchor": "start" });  
  21.    var rxt = ctx.set();  
  22.     ptx.push(ctx.text(440, 200, "C"),  
  23.    ctx.text(440, 250, "C++"),  
  24.    ctx.text(440, 200, "JAVA"),  
  25.    ctx.text(440, 250, "C#"),  
  26.    ctx.text(440, 400, "ASP.NET"),  
  27.    ctx.text(440, 450, "WPF"),  
  28.    ctx.text(440, 400, "WCF"),  
  29.    ctx.text(440, 450, "Silverlight"));   
  30.    rxt[0].click(function (  
  31.       thisthis.cx = this.cx || 400;  
  32.       this.animate({ cx: this.cx, "stroke-width": this.cx / 200, fill: this.cx - 200 ?  
  33.       "hsb(.1, .85, .85)" : "#FF99CC", "fill  
  34.       opacity": +!!(this.cx - 200) }, 2000);  
  35.       thisthis.cx = this.cx == 400 ? 200 : 400;  
  36.                 }  
  37.      );  
  38.        rxt[2].click(function ()  
  39.     {  
  40.       thisthis.cx = this.cx || 400;  
  41.       this.animate({ cx: this.cx, "stroke-width": this.cx / 200, fill: this.cx - 200 ?  
  42.      "hsb(.2, .85, .85)" : "#FF99CC", "fill  
  43.       opacity": +!!(this.cx - 200) }, 2000, "C++");  
  44.       thisthis.cx = this.cx == 400 ? 200 : 400;  
  45.               }  
  46.       );  
  47.  }  
  48.   </script>  
  49.    </head>  
  50.    <body bgcolor="#ff66cc">  
  51.    <div id="holder" style="background-color: #804040"></div>  
  52.   </body> 
Step 10: Press Ctrl + F5 to run the application in a browser.
 
  
out.jpg
 
 out1.jpg
 
out2.jpg
 
out3.gif
Resources Here are some useful resources :


Similar Articles