This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Latest commit
Files
Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Bouncing Balls
Simple bouncing balls simulation using plain JavaScript. Drawing in HTML Canvas, also plain CSS is used. [without third-part frameworks/code]
The tag primarily allows you to render 2D shapes and images dynamically using math functions.
Practical uses for this are things such as dynamic charts that are populated by data from a relational database like MySQL or web games that rely solely on open technologies [JavaScript/HTML]. While in HTML merely allows you to define a region in terms of width and height, everything else related to the actual drawing of the shapes is done through JavaScript via a full set of drawing functions and methods [collectively known as the Canvas 2D API]. So that we may explore the element through a hands-on approach, we will create a ball that will be bouncing around using HTML5 specifications and JavaScript.
Note that we will skip CSS because this guide is about HTML5 and JavaScript. CSS doesn’t play a part in the appearance and functionality of the bouncing ball, so we don’t need to discuss it.
HTML
To start, you will need to create a basic HTML document. It’s best if you follow along with me as we go — so go ahead and create your HTML document now.
Let’s add our element inside the
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
1 tag. Though we only have one element in our HTML for this example, I have still assigned an ID to it [
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
- just to make it easier/quicker to select it later on via JavaScript. I also defined the element’s dimensions [width/height], however, you could just as well do that via CSS by targeting the
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
4 ID.
JavaScript
Now let us start with the actual work of creating our shapes in JavaScript.
Draw the Circle
We are going to draw a circle using the arc[] and fill[] methods.
The syntax is self-explanatory, especially if you’re familiar with JavaScript. Basically, we define the context, initiate the drawing, then we use color and style methods to fill in the color and dictate the shape [using a Math object for a circle]. Then when the HTML document is loaded [body’s
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
5], we just call the
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
6 function.
Note that it’s better to write unobtrusive JavaScript but I would like to keep this exploration brief, simple and as self-explanatory in code as possible.
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
Save the HTML file and open it in a browser that supports and HTML5 [latest Safari, Opera, Chrome, and Firefox versions] so that you can preview the code. If everything is fine, you should be seeing a blue circle that has a radius of 20px [or in other words, 40px in diameter].
Move the Circle
Now that we have the circle, let’s try to move it.
We’ll replace the hardcoded values of the coordinates in the
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
8 method [100, 100 — the first two arguments] with variables
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
9 and
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
0, which we will then increment by an amount of
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
1 and
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
2. Also since we need to redraw the circle at the new positions, we’ll move the code into a function called
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
3 and call it every 10ms using JavaScript’s
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
4 function.
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
Save the file and test your work in your web browser. Uh oh — Houston, we have a problem.
The circle is actually forming a line [see the image below].
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
3 function is called, it draws a circle at the new coordinates without removing the old ones. That’s how the
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
6 object works so it’s not a bug; it doesn’t really move the circle and, instead, it draws a circle at the new coordinates each time the function is called.
To erase the old circles, we’ll need to call the
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
7 method right at the start of our
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
3 function so that it clears out the previous circle before it draws the new one.
var context; var x=100; var y=100; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.clearRect[0,0, 300,300]; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
Save the file and refresh your browser and see the ball move out of the screen nicely.
Limit the Area with an Imaginary Wall
Now it’s time to bounce the ball off the corners of the element. Well, that’s easy: All you need to do is check if the values of
var context; function init[] { context= myCanvas.getContext['2d']; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[100,100,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; }
9 and
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
0 are beyond the canvas dimensions, and if so, we need to reverse the direction by setting values of
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
1 and
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; x+=dx; y+=dy; }
2 to the negative values.
var context; var x=100; var y=200; var dx=5; var dy=5; function init[] { context= myCanvas.getContext['2d']; setInterval[draw,10]; } function draw[] { context.clearRect[0,0, 300,300]; context.beginPath[]; context.fillStyle="
0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc[x,y,20,0,Math.PI*2,true]; context.closePath[]; context.fill[]; // Boundary Logic if[ x300] dx=-dx; if[ y300] dy=-dy; x+=dx; y+=dy; }
If all goes well, you should see a ball bouncing around the four corners of the canvas element [like in the demo]. Awesome, right?
Conclusion
This bouncing ball is a fundamental concept to many of the game development logic and it can be easily extended to build a ping-pong game or a breaker-type of game.
But more than the actual demonstration itself, what I hope to have imparted here is the motivation to explore the Canvas API to see if you can push your limits and be on the cutting edge. So in order to help you continue your journey into HTML5, I would like to share with you some resources to check out:
How to build a bounce ball with HTML and JavaScript?
How to Build a Bounce Ball with HTML and JavaScript?.
Create an HTML file with a canvas element on which the ball will be drawn..
Use JavaScript to create the ball as a shape [e.g. a circle] on the canvas..
Use JavaScript to move the ball across the canvas, bouncing it off the edges when it reaches them..
How to move ball using JavaScript?
First we need to choose a method of positioning the ball. We can't use position:fixed for it, because scrolling the page would move the ball from the field. So we should use position:absolute and, to make the positioning really solid, make field itself positioned. Next we need to assign the correct ball.
What is bouncing in JavaScript?
The bounce property indicates if the component will bounce back when gravity makes it fall down to the ground. The bounce property value must be a number. 0 is no bounce at all, and 1 will make the component bounce all the way backto where it start falling.