html5 games source code free download

HTML5 GAMES SOURCE CODE FREE DOWNLOAD

What is Javascript?

JavaScript is the Programmimg Language for the Web. JavaScript can calculate, manipulate and validate data. The browser has inbuilt interpreter which reads and runs javascript code.

Web Languages are a very powerful languages, you can create simple html5 css3 games as well as complicated javascript games.

Requirements For This Html5 Maze Game

  • basic knowledge of HTML
  • basic knowledge of CSS
  • basic knowledge of Javascript
  • Any source code editor.

In this step-by-step tutorial we undergo a simple html5 2d maze game development written entirely in pure HTML5, CSS, JavaScript.

The source code of this html5 2d game development is available for you in free.Its very easy to download and easy to modify the source code.

Developing html5 game has never been easier than it is now. You will be learning basic fundamental of game mechanics like moving an object, collision detection and control mechanisms.

You will learn how to draw a gaming layout, how to move a charcter by onclick functions and lastly how to detect whether two objects are colliding.

You will work step by step css3 games design processes,starting with only what is necessary to complete each step.

The object will be moved with providing control mechanism and user need to take the object to the provided destination without colliding with the obstacles. As user reaches to the destination gate without colliding, he wins the game.

To understand this series you should have basic knowledge of HTML5, CSS3, JavaScript.

After reading this article, I am sure that you will be creating somewhere this kind of even more interesting html5 game.

Take it as a source of coding inspiration.

WANT TO LEARN HOW TO BUILD THE DODGING BALL.

dodge the ball game

WANT TO LEARN HOW TO BUILD THE NUMBER GUESSING GAME.

dodge the ball game

HTML5 2D GAME DEVELOPMENT

The below GIF shows what kind of html5 2d maze game will be developed in this session.

html5 games source code free download

In the above gif, you can see that the vehicle is navigating downward and getting collide to the obstacle.

On collide, an alert popup is being called saying "you lost".

"LEFT BUTTON" : vehicle moves to left side.

"RIGHT BUTTON" : vehicle moves to right side.

"TOP BUTTON" : vehicle moves to upward direction.

"DOWN BUTTON" : vehicle moves to downward direction.

"STOP BUTTON" : vehicle stops moving.

As the user navigates the vehicle to the end point,he will be declared as winner.

LET'S START HTML5 GAME DEVELOPMENT

Create the html page called as game.html

                
<html>
    <head>
        <style>
        ... all styling code here
        </style>
    </head>
    <body>
    <div id="container1">
      <div id="obj"></div>       //navigating vehicle
      <div id="divider1"></div>  //obstacle 1
      <div id="divider2"></div>  //obstacle 2
      <div id="divider3"></div>  //obstacle 3
      <div id="divider4"></div>  //obstacle 4
      <div id="divider5"></div>  //obstacle 5
      <div id="divider6"></div>  //obstacle 6
      <div id="divider7"></div>  //obstacle 7
      <div id="divider8"></div>  //obstacle 8
      <div id="divider9"></div>  //obstacle 9
      <div id="divider10"></div> //obstacle 10
      <div id="gate"></div>
    </div>
    <div id="container2">
      <button id="b1" onclick="leftAnimation()">LEFT</button>
      <button id="b5" onclick="rightAnimation()">RIGHT</button>
      <button id ="b2" onclick="stopAnimation()">STOP</button>
      <button id="b3" onclick="downAnimation()">DOWN</button>
      <button  id ="b4" onclick ="upAnimation()">UP</button>
    </div>
    <script>
... all javasscript code here
    </script>
  </body>
</html>
                
                

There are three ways to link CSS to HTML

  • Inline CSS
  • Internal CSS
  • External CSS

So in this article we will be dealing with Internal CSS.

Below is the complete CSS code for game area(green color layout),vehicle ,obstacles and the end point.

                
<style>
  html, body {
              padding: 0px;
              margin: 0px;
             }
  #container1 {                    //game layout
              position:absolute;
              width:300px;
              height:350px;
              top:50px;
              left:100px;
              background: green;
            }
  #container2                      //layout for buttons
             {
              position:absolute;
              width:300px;
              height:100px;
              top:400px;
              left:100px;
              background: blue;
             }
  #obj                             //navigating object (vehicle)
             {
              position:absolute;
              width:27px;
              height:18px;
              top:5px;
              left:5px;
              background:#A64D2C;
              border:1px solid black;
              z-index:2;
              }
  #divider1{                          //obstacle -1
              position:absolute;
              top:0px;
              left:50px;
              height:80px;
              width:2px;
              background:maroon;
              }
  #divider2{                         //obstacle -2
              position:absolute;
              top:80px;              left:50px;
              height:2px;
              width:80px;
              background:grey;
              }
  #divider3{                         //obstacle -3
               position:absolute;
               top:150px;
               left:30px;
               height:2px;
               width:90px;
               background:orange;
               }
  #divider4{                         //obstacle -4
               position:absolute;
               top:170px;
               left:170px;
               height:120px;
               width:2px;
               background:black;
               }
  #divider5{                         //obstacle -5
                position:absolute;
                top:170px;
                left:250px;
                height:120px;
                width:2px;
                background:yellow;
                }
  #divider6{                         //obstacle -6
                 position:absolute;
                 top:80px;
                 left:180px;
                 height:2px;
                 width:70px;
                 background:orange;
                 }
  #divider7{                          //obstacle -7
                  position:absolute;
                  width:2px;
                  height:350px;
                  top:0px;
                  left:0px;
                  background:black;
                  }
   #divider8{                           //obstacle -8
                   position:absolute;
                   width:300px;
                   height:2px;
                   top:0px;
                   left:0px;
                   background:black;
                  }
  #divider9{                          //obstacle -9
                   position:absolute;
                   width:2px;
                   height:350px;
                   top:0px;
                   left:300px;
                   background:black;
                  }
  #divider10{                         //obstacle -10
                     position:absolute;
                     width:300px;
                     height:2px;
                     top:349px;
                     left:0px;
                     background:black;
                    }
  #b1
                    {
                    position:absolute;
                    top:30px;
                    left:0px;
                    width:55px;
                    height:55px;
                    background:rgba(055,190,156,1);
                    color:blue;
                    font-weight:bold;
                    border:1px solid black;
                    }
  #b5
                    {
                     position:absolute;
                     top:30px;
                     left:60px;
                     width:55px;
                     height:55px;
                     background:rgba(011,123,140,1);
                     font-weight:bold;
                     border:1px solid black;
                    }
  #b3
                    {
                     position:absolute;
                     top:30px;
                     left:120px;
                     width:55px;
                     height:55px;
                     background:rgba(022,140,190,1);
                     font-weight:bold;
                     border:1px solid black;
                    }
  #b4
                   {
                     position:absolute;
                     top:30px;
                     left:180px;
                     width:55px;
                     height:55px;
                     background:rgba(100,290,140,1);
                     font-weight:bold;
                     border:1px solid black;
                  }
  #b2
                  {
                     position:relative;
                     top:30px;
                     left:240px;
                     width:55px;
                     height:55px;
                     background:rgba(100,290,140,1);
                     font-weight:bold;
                     border:1px solid black;
                  }
  #gate
                  {
                     position:absolute;
                     left:2px;
                     top:320px;
                     width:50px;
                     height:30px;
                     background:white;
                     color:black;
                  }

  </style>
                
                
Now I will be explaining CSS styling mentioned in the above style tag.

In CSS,to select an element with a specific id,we write a hash(#) character,followed by the end of the element

Dumping only the #container1 in the style tag of index.html provides the below result.

#container1
{
position:absolute;
width:300px;
height:350px;
top:50px;
left:100px;
background: green;
}
html5 games source code free download

Dump #container2 along with the #container1 in your style tag of index.html that provides the below result.

#container1
{
...
}

#container2
{
position:absolute;
width:300px;
height:100px;
top:400px;
left:100px;
background: blue;
}
html5 2d game development

Now I assume that you know the purpose of using #container1 and #container2 in our project. Let's take into consideration of #obj (navigating vehicle) which is our navigating object.So after dumping #obj inside the style tag along with the #container1 and #container2 we get the below result.

#container1
{
...
}

#container2
{
...
}

#obj
{
position:absolute;
width:27px;
height:18px;
top:5px;
left:5px;
background:#A64D2C;
border:1px solid black;
z-index:2;
}
html5 2d game development

After creating the containers and navigating object, now its time to create obstacles.

Obstacles: - are the boundaries of the path where the navigating object should not collide.

#divider1 is one of the first obstacle that we are going to create it now.

If you are going according to the order, then after placing #divider1 along with the other id attributes such as #container1,#container2 and #obj in the style tag we can expect the below result.

#container1
{
...
}

#container2
{
...
}

#obj
{
...
}

#divider1{
position:absolute;
top:0px;
left:50px;
height:80px;
width:2px;
background:maroon;
}
html5 games source code free download

In the same way dumping all the obstacles ( #divider1, #divider2, #divider3, #divider4, #divider5, #divider6, #divider7, #divider8, #divider9, #divider10 ) inside the style tag which provides the below result.

javascript game tutorial

Now we are in the final stage of our game design. Let's create a destination gate and navigation buttons. (One thing I would love to make a point that the obstacles that I have created in this project are simply for your understanding purpose. Once you have understood the logic you can create your own imaginary obstacles.)

I have used #b1, #b2, #b3, #b4, #b5 for making navigating buttons and #gate for destination gate.

  • #b1 is used to naviagte an object to the right side
  • #b5 is used to naviagte an object to the left side
  • #b2 is used to stop the navigation of an object
  • #b3 is used to naviagte an object to the down
  • #b4 is used to naviagte an object to the up

javascript game tutorial

Guys, we have completed with CSS coding and created a quite comprehensive layout.

LET'S JUMP INTO JAVASCRIPT

We have created the body, now it's time to add soul. That means javascript has come into the picture.

From here onwards we are going to add functionalities for navigating an object and detecting the collision of an object with the obstacles.

CONTROL MECHANISMS

The object(vehicle) is able to move left, right, up, down because of javascript.

Whenever a user hits a respective button then respective function will be called.

Here we have used Five Functions which gets trigger on onclick.

  • leftAnimation()
  • RightAnimation()
  • upAnimation()
  • downAnimation()
  • stopAnimation()

Dump all these Functions inside the script tags.

Let's start with left direction.As soon as the user hits the "left" button, leftAnimation() gets triggered and the following function will be called.

                      
  function leftAnimation()
  {
    obj.style.left=(obj.offsetLeft=obj.offsetLeft - 1) +'px';
    //moves the object to the left side
    regID=window.requestAnimationFrame(leftAnimation);
    // calls the "leftAnimation()" again and again.
  }
                      
                    

RightAnimation() gets triggered as the user hits "right" button

                      
  function RightAnimation()
    {
      obj.style.left = ( obj.offsetLeft = obj.offsetLeft + 1) + 'px';
      regID=window.requestAnimationFrame(rightAnimation);
    }
                      
                    

upAnimation() gets triggered as the user hits "up" button

                      
  function upAnimation()
    {
      obj.style.top=(obj.offsetTop=obj.offsetTop - 1) +'px';
      regID=requestAnimationFrame(upAnimation);
    }
                      
                    

downAnimation() gets triggered as the user hits "down" button

                      
  function downAnimation()
    {
      obj.style.top=(obj.offsetTop=obj.offsetTop + 1) +'px';
      regID=requestAnimationFrame(downAnimation);
    }
                      
                    

Now at last when user presses the "stop" button an object stops moving with the help of following code.

                      
  function stopAnimation()
    {
      window.cancelAnimationFrame(regID);
      //regID stores the returned value of requestAnimationFrame()
    }
                      
                    
COLLISION DETECTION

Now we have finished with the navigation part. Without wasting any time, let's jump into collision detection.

Here we have used offsetLeft, offsetTop, offsetWidth, offsetHeight.

what is offsetLeft ?

The offsetLeft property returns the left position (in pixels) relative to the left side the offsetParent element or It gives the current left position of an object(vehicle) with respect to parent div.

what is offsetTop ?

The offsetLeft property returns the Top position (in pixels) relative to the left side the offsetParent element or It gives the current top position of an object(vehicle) with respect to parent div.

what is offsetWidth ?

The offsetWidth property returns the viewable width of an element in pixels, including padding, border and scrollbar, but not the margin.

what is offsetHeight ?

The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.

detectioncollision() contains the data, such as positions, height and width of an object(vehicle) and obstacle 1 (#divider1).

                        
  function detectioncollision()
    {

        elx=obj.offsetLeft;      // contains the x-axis position of an object(vehicle)
        ely=obj.offsetTop;       //contains the y-axis position of an object
        elw=obj.offsetWidth;     //contains the height of an object
        elh=obj.offsetHeight;    //contains the height of an object
        l1x=divider1.offsetLeft; // contains the x-axis position of an obstacle 1
        l1y=divider1.offsetTop;  //contains the y-axis position of an obstacle 1
        l1w=divider1.offsetWidth;//contains the height of an obstacle 1
        l1h=divider1.offsetHeight;//contains the height of an obstacle 1
    }
                        
                      

The above code gives all kinds of information of an object and obstacle 1(#divider1) such as its x-axis ,y-axis position and height and width. So using this information we are going to detect collisions..

Below is the logic code for collisioin detection.

                        
  if((( elx + elw )> l1x ) && (elx <( l1x + l1w )) && (( ely + elh )>l1y) && ( ely<( l1y + l1h )))
        {
            el.parentNode.removeChild(el);
            //when an object(vehicle) hits the obstacle 1(#divider1) the above code runs and disappears an object

        }


                        
                      

"elx + elw )> l1x and elx <( l1x + l1w )"

This condition checks whether the object(vehicle) is colliding to the obstacle in x-axis.

"( ely + elh )>l1y) and ( ely<( l1y + l1h )"

,This condition checks whether the object(vehicle) is colliding to the obstacle in y-axis

Similarly with reference to the above code we can obtain x-axis, y-axis, height and width of all the remaining obstacles.

CONCLUSION

In this article you have learnt how to make 2D HTML GAME.

This article has covered navigation of the vehicle and collision detection of the vehicle.

I hope you have learnt and understood the concept on making simple game. Please let me know through email regarding the article. THANK YOU.

Please let me know how was the experience through E-mail.

The complete source code:
About author
Supreet Patil
I am a web developer.I have started the journey of web development two years ago. I have shared a bit of one of mini project.I hope you have loved it.
E-mail:psupreet12@gmail.com
Leave a reply

LEARN MORE

Below I have given some links to enhance your knowledge.