Earth Defender Story Line

The vastness of space was considered the last frontier of exploration for mankind. Shortly after we landed on the moon, the curiosity to explore beyond our solar system became evident. Movies, books and stories were made describing the possibility of human kind coming into contact with an alien civilization. However, even after human colonization of space began 2 centuries after a space elevator was developed in the year of 2137. No advanced alien civilization was found. We began colonizing habitable planets near our solar system. One of the first and biggest colonies was Chromos. It is located 25 light years away from planet Earth, and holds the largest human population after Earth. After Chromos was colonized, we expanded our radius of exploration to 45 light years from Earth. We colonized 5 other habitable planets in different solar systems. These 5 planets had small but growing human populations. We were able to reach these planets thanks to limited wormhole technology developed by scientists in the 2500s. These wormholes were considered limited because the energy necessary to maintain the wormhole open and allow ships through was proportional to the distance. Each colony needed to harvest enough energy from the nearby star for a full two weeks to open a wormhole connecting to Earth. Chromos only needed a week of harvesting but for the outer colonies it was little over a week. For this reason, all colonies agreed to open their portals every two weeks to exchange supplies, communication and ships with Earth.

By the end of the 2700s political leaders back in Earth gave the order to develop a new far more advanced exploration program. This program was meant to expand our radius of exploration to over 1,000 light years from Earth and colonize any possible habitable planet. When the new far more powerful wormhole portal was created in the outer colonies, leaders were quick to send a large exploration crew consisting of 4 mother ships and over 25 fuel stations. The portal was also ordered to remain open for three full days. By the third day, one of the mother ships spotted strange objects in one of the planets closest to the star. This planet had what appeared to be a base consisting of different facilities and triangle-like contractions scattered all around and they appeared to be manufacturing some sort of mechanical creatures. This was quickly reported back to Earth and the ship was order to decent on the planet to further explore. It didn’t take more than 30 minutes until 5 strange looking ships appeared and began attacking our mother ship. The mothership was able to scan the ships and generate a report back to Earth before being destroyed. Leaders back in Earth gave the order to close the portal and abandon all exploration crew behind. Chaos erupted all across the colonies and pushed leaders to enforce martial law. At last, human kind came in contact with an advanced civilization but it didn’t go down as friendly as we thought. The report generated by the mothership only included general technological specifications but it was enough to indicate that whoever attacked our ship was far more advanced technologically than us. The government of Earth and all of its colonies gave the order to invest heavily in a defense program. New ships capable of launching nuclear missiles and equipped with protective shields were developed. A secretive program with the aim to develop new weapons of mass destruction was launched as well. Every colony and Earth anxiously waited for the day this violent secretive alien civilization would appear to attack us.

Nevertheless, 54 years passed and still no signs of any aliens. Martial law was lifted and things appeared to be going back to normal in Earth and all the colonies. On the second week of May, 2849, two of our most far away colonies, Cygnus and Quasis failed to open their portals. A defense fleet was dispatched and sent to Cygnus. Nothing but destruction was found, the space station off the planet was completely destroyed and all that was left standing was a small fleet of our ships. We were informed by Cygnus that the aliens that attacked our exploration fleet had returned but were defeated. They were given the name of Equitans. On the following day a new fleet of Equitan ships appeared and began attacking once again. The defense fleet that was sent to rescue Cygnus fled and reported back to Earth. Once they arrived back in Earth, they were informed that all of the outer colonies were attacked and were under Equitans control. The only remaining human colonies are Chromos and Sirius. It is up to you to defend planet Earth and the remaining colonies!

Alright so this is kind of a nerdy thing but when I was working on improving my site's speed performance. I went on Google.com to check out their HTML page source to learn from their web practices. To my surprise, I noticed the <center> html tag was being used to center the Google Logo and search tools. This HTML tag is not supported in HTML5 and is a deprecated HTML tag. Every web developer discourages its use and scream "use CSS instead!" I hold Google to the highest standards and it was shocking to see that. I am in no way criticizing Google at all, I just kind of find it funny. I am sure there is a strong reason why the Google engineers decided to use that tag. People say duct tape is an engineers best tool so I guess HTML tags used for semantic value is the duct tape for web developers.

Now, half way done writing this post, I think I am probably the only one making a big deal out of this. Nevertheless, I just thought I would share it with you guys. Feel free to post any thoughts below

In this tutorial, you will learn to apply gravity, friction, and elasticity to a moving object which in this case will be a ball. In an additional tutorial, we will learn to add a couple of mouse events to our canvas so we can interact with the ball by dragging and tossing it around. I am assuming you have some experience with JavaScript and HTML5 Canvas. At the very minimum, you should be able to create the basic HTML layout and reference the canvas tag inside the scripting tags or an external JS file and be able to create simple animations using the Drawing API and the document.setInterval() function. I will also be using Modernizr.js to check if our end user is able to run the canvas tag. I have hosted the Modernzr.js version I am using in my Github account, here is the link

https://cdn.rawgit.com/moczka/One-Ball-Physics/master/modernizr.js

You will learn to create this simulation in this tutorial, it is small because I wanted readers on mobile devices to be able to see the simulation. Press the Start button to begin the simulation.

In order to make it easier for you guys to dive right into the core aspects of this tutorial, I will provide you with the starting HTML tag layout and JavaScript code. All you need to do is copy this code and paste it onto any text editor (I use Brackets) and save it with a (.html) file extension. Here it is:

<!DOCTYPE html>
<html>
<head>
<title>Experimenting Canvas</title>
<script src="https://cdn.rawgit.com/moczka/One-Ball-Physics/master/modernizr.js"></script>
<script>
//adds the event listeners to be triggered when everything has loaded
window.addEventListener("load", onWindowLoad, false);
 
function onWindowLoad(){
 //calls the main function after the window event has triggerd
 canvasApp();
}
  
//function part of the modernizr to check if canvas is supported.
 
function canvasSupport () {
    return Modernizr.canvas;
}
 
function canvasApp(){

//creates the canvas objet and gets its context.
var theCanvas = document.getElementById("theCanvas");
var context = theCanvas.getContext("2d");

//Where we will have all the code to control the canvas.

function drawScreen(){
//function in charge of doing all the drawing on the canvas.
}

function gameLoop(){

 drawScreen();
 window.setInterval(gameLoop, 20);
 }
}

</script>
</head>
<body>
<canvas id="theCanvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
<br>
</body>
</html>

Understanding Velocity

Before we get into applying gravity or even friction, we need to understand velocity. If you understand velocity and how to apply it, you can skip this part. Velocity is a vector property, meaning it has a magnitude and a direction. The magnitude of the velocity is the speed and the direction is the angle that the object is traveling at. For example, if we start our ball at the bottom left corner of our canvas and instruct it to travel at 45 degrees (PI/4) angle north and at a speed of 5 pixels per frame, we will need to calculate the X and Y components independently add the result to the ball's x and y properties on every frame to make it move along that vector. We will use the cosine and sine functions to calculate each component of the velocity vector. Remember, any trig functions of the Math class in JavaScript only accepts radians as parameters, so you will need to convert from degrees to radians. The Cosine function will give us the value for our X component by having the angle in (PI/4) as its parameter and multiplying it by the magnitude which is our speed (5 pixels). The same will be done for the Sine function which will give us the Y component value by performing the same operation.

speed = 5; 
angle = 45;
//Convert angle from degrees to radians
angle = 45 * Math.PI/180;
velX = Math.cos(angle)*speed;
velY = Math.sin(angle)*speed;

This will send the ball flying upwards at a 45 degree angle at a speed of 5 pixels per frame and will continue on forever unless any other force acts on the ball. Hopefully this refreshes your memory on applying velocity, this section was not meant to be an in depth look at velocity, just a refresher.

Creating Our Ball Object

For this example, we will begin by creating a variable called "ball" which will be our ball object with the following properties: x, y, radius, color, angle, speed, velX, velY.

var ball = {radius:20, x:theCanvas.width/2, y:theCanvas.height, color:"#00FF00", angle:-45, speed:5, velX:0, velY:0};

You should have this object inside the canvasApp() function scope, right below the canvas and its context declaration. We also set the X and Y property values of our ball object to half the width and half the height of our canvas so that the ball is positioned at the center of the canvas. We also have velX and velY which are the velocity components of the ball as well as speed and a string value for color. We are creating these properties now because we will use them later on when we add velocity and draw the ball.

//creates the canvas object and gets its context.
var theCanvas = document.getElementById("theCanvas");
var context = theCanvas.getContext("2d");
//Creates our ball object.
var ball = {radius:20, x:theCanvas.width/2, y:theCanvas.height/2, color:"#00FF00", angle:-45, speed:5, velX:0, velY:0};

Later we will position our ball on the canvas by drawing it.

Positioning Our Ball

Now that we have all the variables necessary, it is time to create our ball and draw it on the canvas. All the code to draw the ball will be inside the drawScreen() function in charged of doing all the drawing. Given the nature of Canvas, the first two lines inside this drawScreen() function, will be to clear the canvas on every frame. If you have done simple canvas animations in the past, this should not come as a surprise.

//Clears the canvas on every call. make use of alpha to create trailing effect.
context.fillStyle = "rgba(255,255,255, 0.4)";
context.fillRect(0,0, theCanvas.width, theCanvas.height);

Again, for this tutorial, I am assuming you have done at least very simple animations before. Or at the very least understand the intermediate nature of canvas and how it differs from a display list system like Flash. We set our context fillStyle to a string RGB value of 255, 255, 255 which is the color white, but we also include an alpha value of 0.4 to create a trailing effect. The following lines make use of the Canvas drawing API arc() function which takes in 6 values as its parameters.

1. X position value for the arc.
2. Y position value for the arc.
3. Radius value for the arc.
4. The starting angle of your arc in (RADIANS).
5. The ending angle of your arc in (RADIANS).
6. A Boolean value, true for clockwise and false for counterclockwise. Drawing direction of your arc.

For our ball, we will use its properties as the parameters for this arc function. Before making use of the arc function, we have to specify a context fillStyle which we will set to be the color of our ball. We then have to begin a path, close that path and then fill the path with the color of our ball, as so:

//draws the ball
context.fillStyle = ball.color;
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
context.closePath();
context.fill();

So far all you will see when you run the program will be a static green ball right at the center of the canvas. Our next section will add velocity and gravity.

Adding Velocity and Gravity to The Ball

A static ball is too boring, let's add some motion by adding velocity and gravity to our ball. In order to add velocity, we need to calculate the x and y component of our velocity vector before we run the drawScreen() function. So right after the declaration of the ball object, let's give our ball a launch angle of -45 degrees and right after that line, convert the angle into radians by multiplying it by (Math.PI/180) which is the conversion factor. The next two lines will calculate the X component by using the Math.cos() function and having the launch angle as its parameter and multiplying it by the speed. The same is done to calculate the Y velocity component but using the Math.sin() function instead.

//Give our ball a launch angle in degrees.
ball.angle = -45;
//converts our starting angle to radians.
ball.angle = ball.angle * Math.PI / 180;
//calculates our starting velocity given our angle.
ball.velX = Math.cos(ball.angle)*ball.speed;
ball.velY = Math.sin(ball.angle)*ball.speed;

We set the angle to a negative value given the nature of the canvas coordinate plane. We also save every result into its own property of the ball object as shown by the code above. Now that we have these values, in our drawScreen() function, we will use them to dynamically change the ball's x and y position values so to create motion.

Now we need to create a variable that will hold our gravity value. This variable will not be a property of the ball object as it is a property of the "outside world." Create a variable named "gravity" and set it equal to (0.2) right below our ball object declaration.

//Give our ball a launch angle in degrees.
ball.angle = -45;
//converts our starting angle to radians.
ball.angle = ball.angle * Math.PI / 180;
//calculates our starting velocity given our angle.
ball.velX = Math.cos(ball.angle)*ball.speed;
ball.velY = Math.sin(ball.angle)*ball.speed;
//Sets our starting gravity value.
var gravity = 0.2;

In our drawScreen() function, we add gravity to our ball.velY property and then add that property to the ball.y property. The reason why we add it to our ball Y velocity component is because gravity pulls downwards towards the bottom "wall" of the canvas so we add values to the Y velocity component. This means that on every frame, gravity will be added to the y velocity component which will then be added to the ball y position causing it to gradually increase simulating a falling object. As for the x component of the velocity vector, we just add that to the ball.x property. Since no external force (as of now) is acting on the x component of the velocity vector, we leave it as is.

//Clears the canvas on every call. make use of alpha to create trailing effect.
context.fillStyle = "rgba(255,255,255, 0.4)";
context.fillRect(0,0, theCanvas.width, theCanvas.height);

//Gravity is added to the Y component of the ball velocity vector
ball.velY += gravity;
//X and Y components of the velocity vector are added to the ball x and y values.
ball.x += ball.velX;
ball.y += ball.velY;

If you run the program now, you will see your ball be launched at a 45 degree angle up and then begin to fall down even going beyond the canvas boundaries. In the next section, we will make the ball bounce back when it hits the boundaries.

Making The Ball Bounce Back

Before we get into the code to make the ball bounce back. There is an important concept I want you to understand. Velocity is a vector property, meaning it has a magnitude and a DIRECTION. We break down this velocity vector into its X and Y components. We use those components to change the ball's position by adding them to the ball x and y position values. If we want to make our ball bounce back, that means that we want the ball to travel in the OPPOSITE direction, meaning we have to reverse the DIRECTION of the velocity vector. In math, the way we reverse a vector is by multiplying it by -1, basically making the vector negative. The following figure shows the direction in which the ball would travel if its X and Y velocity components were either positive or negative.

So when our ball hits the right or left "wall" or canvas boundary, we need to reverse the ball velocity X component. And when the ball hits either the top or bottom "wall" we reverse the ball Y velocity component. To handle this operation, we will create an external function inside of the canvasApp() scope that we will name checkBoundary(). This function will receive the ball object as its parameter, we will have a couple of if statements comparing the ball x and y location to the total width and height of the canvas. Keep in mind that the x and y position values of the ball are right at the center, so we will need to keep in mind the radius length of the ball to accurately determine when to make the ball bounce back.

function checkBoundary(object){
//if ball has hit any of the right or left sides, reverse its X component velocity vector
if(object.x>=theCanvas.width-object.radius){
 object.x = theCanvas.width - object.radius;
 object.velX = -object.velX;
}else if(object.x<=object.radius){
 object.x = object.radius;
 object.velX = -object.velX;
//if ball has hit any of the top or bottom sides, reverse its Y component velocity vector  
}else if(object.y>=theCanvas.height-object.radius){
 object.y = theCanvas.height-object.radius;
 object.velY = -object.velY;
}else if(object.y<=0+object.radius){
 object.y = object.radius;
 object.velY = -object.velY;
 }
}

Notice how we are not directly referencing the ball object properties but instead we are using the object that the function receives as its parameter. I have decided to write the function this way so that we can use it in other programs or if we want to have multiple balls bouncing around. In our drawScreen() function right before drawing the ball, we will call the checkBoundary() function and have the ball object as its parameter.

ball.x += ball.velX;
ball.y += ball.velY;
//checks if it has hit any of the wall boundaries
checkBoundary(ball);
   
//draws the ball
context.fillStyle = ball.color;
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
context.closePath();
context.fill();

If you run the program, you will see the ball bounce back whenever it hits any of the boundaries and keep bouncing. However, in the real world, whenever a ball bounces it loses some of its kinetic energy on every bounce. This is called "elasticity", in the next section we will be adding some elasticity.

Adding Elasticity To The Ball

Elasticity is a property of our ball, different materials have different degrees of elasticity, so we will add an elasticity property to our ball object declaration and set it equal to a decimal value of (0.80).

var ball = {radius:20, x:0, y:0, color:"#00FF00", angle:-45, speed:5, velX:0, velY:0, elasticity:0.80};

The decimal represents the percentage of kinetic energy or "velocity" that the ball gets to "keep" on every bounce. For example, the ball is traveling at 5 pixels per frame then after the first bounce it is now traveling at (5 x 0.80 = 4) 4 pixels per frame. Second bounce it is now traveling at 3.2 pixels per frame and so on. To apply this, you simply have to multiply the X or Y component of the velocity vector by the ball elasticity, depending on which "wall" the ball has hit. If the ball hits either the right or left side wall, you multiply the X velocity component by the ball elasticity. For the top or bottom wall, we deal with the Y velocity component. These calculations go in the checkBoundary() function as it is the function that checks for the ball collisions against the canvas walls.

function checkBoundary(object){
//if ball has hit any of the right or left sides, reverse its X component velocity vector
if(object.x>=theCanvas.width-object.radius){
 object.x = theCanvas.width - object.radius;
 object.velX = -object.velX;
 object.velX *= object.elasticity;
}else if(object.x<=object.radius){
 object.x = object.radius;
 object.velX = -object.velX;
 object.velX *= object.elasticity;
//if ball has hit any of the top or bottom sides, reverse its Y component velocity vector  
}else if(object.y>=theCanvas.height-object.radius){
 object.y = theCanvas.height-object.radius;
 object.velY = -object.velY;
 object.velY *= object.elasticity;
}else if(object.y<=0+object.radius){
 object.y = object.radius;
 object.velY = -object.velY;
 object.velY *= object.elasticity;
 }
}

These changes will make the ball "act" more according to real world physics. However, once the ball has lost most of its kinetic energy in the Y direction, it might continue moving along the X coordinate because no external force is acting along the X. In the real world, friction from the floor or even the air goes against a ball and acts on the X velocity component which is why a ball eventually stops moving. In the next section, we will be adding friction to our simulation.

Adding Friction To Our Ball

This is by no means a physics class, but it helps to understand core definitions of some of these physical properties to paint a clearer picture as to how they relate to our simulation. Friction is the "resistance" that a surface or object encounters when moving along another object or surface. In simple terms, how difficult it is to move an object along another. If friction is greater than the force being applied along the object, the object will not move. Friction is usually very small but it all depends on the surface or object. For our example, we will have friction equal to a very small amount of (0.1). In our example, friction will be affecting our ball velocity vector. However, there is a very important key point to keep in mind when applying friction. The amount of friction we take away from our velocity vector has to be proportional to the velocity. In other words, we have to multiply friction by the current velocity value and then use that product to subtract away from the velocity. If we just take away our friction value (0.1) from velocity, it will reach a point where the numbers will start going into negative values causing the ball to travel in the opposite direction. For that reason, the amount subtracted from the velocity has to be proportional.

Now that that key concept is clear, it is time to create a variable that will hold our friction value. Remember, this variable is not a property of the ball so it will go below our gravity value. We then use this variable in the drawScreen() function to alter our ball X velocity component.

//Gravity is added to the Y component of the ball velocity vector
ball.velY += gravity;
//Friction is proportionally substracted from the X component of the velocity vector.
ball.velX = ball.velX - (ball.velX*friction);
//X and Y components of the velocity vector are added to the ball x and y values.
ball.x += ball.velX;
ball.y += ball.velY;

This will cause our ball to eventually stop moving along the X axis. Notice how we are not applying this friction value to the Y velocity component and that is because gravity will eventually cause the ball to stop moving in the Y direction.

Optional: Adding an ON/OFF Switch To The Animation

For debugging purposes or added functionality, I like to have a "pause" button below the canvas so I can stop the simulation at any time and either take screen shots for my tutorials or to check the console outputs to fix any bug. The first thing is to create a variable called gameOn that will hold a Boolean value of true. We then enclose the window.setTimeout() and drawScreen function inside an if statement and have the gameOn variable as its parameter so that it is only called when the variable is set to true.

function gameLoop(){
 if(gameOn){
  window.setTimeout(gameLoop, 20);
  drawScreen();
 }
}

We now have to create an HTML button below our canvas. Create this button using the <input> tag and set its type attribute to "button" and id to "pauseButton"

<canvas id="theCanvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
<br>
<input type="button" id="pauseButton" value="Pause"/>

Inside the canvasApp() function scope, after declaring the canvas object and its context, create a variable named "menuForm" that will hold our HTML input tag so that we can add an event listener. We will also create an event handler function named onPause.

//creates the canvas objet and gets its context.
var theCanvas = document.getElementById("theCanvas");
var context = theCanvas.getContext("2d");
     //more code here...
menuForm = document.getElementById("pauseButton");
menuForm.addEventListener("click", onPause, false);

Inside our onPause event handler function, we will create set our gameOn variable equal to its opposite value. So if the variable is to true, then handler will change it to false. We will make use of the !variable operator. We then call our gameLoop() function.

//pause button handler, switching the game on and off.
  function onPause(e){
//sets it to its opposite value.
 gameOn = !gameOn;
 gameLoop();
}

And that's it! Now you have an on and off button to stop the simulation at any time. I will also have a tutorial on added functionality such as being able to drag and toss the ball and increase the gravity using the new HTML5 "range" attribute.

Here is the complete source code for anyone having problems. Leave feedback in the comments or if you need any help.

<!DOCTYPE html>
<html>
<head>
<title>Experimenting Canvas</title>
<script src="https://cdn.rawgit.com/moczka/One-Ball-Physics/master/modernizr.js"></script>
<script>
//adds the event listeners to be triggered when everything has loaded
window.addEventListener("load", onWindowLoad, false);
 
function onWindowLoad(){
 //calls the main function after the window event has triggerd
 canvasApp();
}
//function part of the modernizr to check if canvas is supported.
function canvasSupport () {
    return Modernizr.canvas;
}
 function canvasApp(){
 //if the opposite of canvas support is true, means there is no support and exits the program.
 if(!canvasSupport()){
 return;
 }
 //creates the canvas objet and gets its context.
 var theCanvas = document.getElementById("theCanvas");
 var context = theCanvas.getContext("2d");
 //Creates our ball object.
 var ball = {radius:20, x:theCanvas.width/2, y:theCanvas.height/2, color:"#00FF00", angle:0, speed:10, velX:0, velY:0, elasticity:0.80};
       ball.angle = -45;
        //converts our starting angle to radians.
 ball.angle = ball.angle * Math.PI / 180;
        //calculates our starting velocity given our angle.
 ball.velX = Math.cos(ball.angle)*ball.speed;
        ball.velY = Math.sin(ball.angle)*ball.speed;
 //Sets our starting gravity and friction value.
 var gravity = 0.2;
 var friction = 0.01;
      //set our gameOn variable to true so the game can start.
 var gameOn = true;
 //adds event listener for our pause and gravity range.
 menuForm = document.getElementById("pauseButton");
 menuForm.addEventListener("click", onPause, false);
 //begins the game loop.
 gameLoop();
 
 //function in charge of doing all the drawing.
 function drawScreen(){ 
 //Clears the canvas on every call. make use of alpha to create trailing effect.
 context.fillStyle = "rgba(255,255,255, 0.4)";
 context.fillRect(0,0, theCanvas.width, theCanvas.height);
 //Gravity is added to the Y component of the ball velocity vector
 ball.velY += gravity;
       //Friction is proportionally substracted from the X component of the velocity vector.
 ball.velX = ball.velX - (ball.velX*friction);
        //X and Y components of the velocity vector are added to the ball x and y values.
 ball.x += ball.velX;
 ball.y += ball.velY; 
 //checks if it has hit any of the wall boundaries
 checkBoundary(ball);
   
 //draws the ball
 context.fillStyle = ball.color;
 context.beginPath();
 context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
 context.closePath();
 context.fill();
   }  
//function in charge of checking the ball against walls.
 function checkBoundary(object){          
  //if ball has hit any of the right or left sides, reverse its X component velocity vector
  //Reduce its X velocity component by the ball's elasticity property
 if(object.x>=theCanvas.width-object.radius){
  object.x = theCanvas.width - object.radius;
  object.velX = -object.velX;
  object.velX *= object.elasticity;
 }else if(object.x<=object.radius){
 object.x = object.radius;
 object.velX = -object.velX;
 object.velX *= object.elasticity;
//if ball has hit any of the top or bottom sides, reverse its Y component velocity vector
//Reduce its Y velocity component by the ball's elasticity property   
}else if(object.y>=theCanvas.height-object.radius){
 object.y = theCanvas.height-object.radius;
 object.velY = -object.velY;
 object.velY *= object.elasticity;
    
}else if(object.y<=0+object.radius){
 object.y = object.radius;
 object.velY = -object.velY;
 object.velY *= object.elasticity;
 }   
}
 function gameLoop(){
 if(gameOn){
  window.setTimeout(gameLoop, 20);
  drawScreen();
 }
}
//pause button handler, switching the game on and off.
function onPause(e){           
//sets it to its opposite value.
 gameOn = !gameOn;
 gameLoop();
 }

}
</script>
</head>
<body>
<canvas id="theCanvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
<br>
<input type="button" id="pauseButton" value="Pause"/>
</body>
</html>

Hello guys, so I've been working on developing an HTML5 Canvas game using my own game framework. It's been a little over a week since I started and I wanted to give you guys some updates and show you what I have so far. I want this game to be somewhat based on the Atari game "Asteroid Blaster" but with a story line of my own. I am publishing what I have so far with hopes that you guys will share any ideas in the comment section. You move around using your keyboard arrow keys and shoot missiles using the space bar. If you want to protect your ship from an enemy missile, you can press the down arrow on your keyboard to activate the ship's shield. This game runs on HTML5 Canvas so it is cross-platform compatible, however, I'll be working on adding inputs on mobile devices. Thank you for checking it out and play below!

In order to drastically decrease the loading time of your website, you need to optimize the file size and resolution of your images. Images take up a major chunk of bandwidth relative to the HTML, CSS and JavaScript files needed to fully load your site. If you run a speed test on your site using Google's PageSpeed Insights, chances are it will prompt you to lossy and losslessly compress your images. So what in the world is lossy and losslessly compression? For some reason, I had trouble finding an article that explained this simply for new web developers. In short, lossy and lossless are two methods of compression. When you losslessly compress an image to reduce its file size, all original data prior to compression can be recovered after the image is uncompressed. This is contrary to lossy compression which strips away part of the original data (often redundant information) to reduce file size and cannot be recovered after the image is uncompressed. If this still sounds confusing, just remember these key points:

• Lossless compression preserves all original data of the image. Because of this, you can only reduce file size so much.
• Lossless compression is best applied for images that include text as all data is preserved
• Lossy compression permanently removes part of the original data (often redundant) information.
• With lossy compression you can drastically reduce file size, far more than lossless.
• Lossy compression is often applied to JPG images, audio, and video formats.
• Losslessly compression is often applied to GIF and PNG images

Compressor.IO - Online Image Compressor

Compressor.io is completely free and is perhaps the best image lossy and losslessly compressor tool on the web. The image formats currently supported are JPEG, PNG, SVG and GIF. All you have to do is upload your image to the site and it will be compressed within seconds. Once compression is complete, the site will display the percentage of reduction and a link to download your compressed image. Above the download link, the site displays your image with a slider to view the visual quality difference. This web tool does such a great job at optimizing your images that you often see no difference in visual quality. Just keep in mind that with lossy compression, since parts of data are deleted, the difference in visual quality is sometimes noticeable. I've managed to decrease the file size of my website logo by 59%! Go ahead and try it for yourself and start improving your website speed performance.

Please consider donating any amount to support Stephane Lyver, the developer behind Compressor.IO I am sure it took several months of work and endless hours of coding to develop such an useful and powerful tool. Follow the link below to donate