html5 games source code free download

HTML GAME CODES COPY AND PASTE

IS JAVASCRIPT GOOD FOR GAMES ?

If you want to build a WEB GAMES than javascript is at its best.But if you want to build a mobile gaming app then other programming languages are recommended like python.Python is platform independent(cross-platform).

Building a web games with HTML5 is a great choice because it can be runned in all modern browsers.

Requirements For This Html5 dodging Game

  • basic knowledge of HTML5.
  • basic knowledge of CSS
  • basic knowledge of Javascript
  • Any source code editor like (notepad++,sublime,atom).

BELOW IS THE SNAPSHOT OF THE GAME.

dodge the ball game

In this step-by-step html5 dodging ball game tutorial we undergo a simple source code of dodging ball game written entirely in pure HTML, CSS, JavaScript.

We will starting with only what is necessary to complete each step.

You will learn how to draw a container(game layout), the balls and collision detection.

In this game the user needs to dodge the provided ball with the other ball.

If he/she fails to do so then he losses the game.

Take it as a source of coding inspiration.

LET'S START THE GAME DEVELOPMENT.

Create a page called "index.html"


   <html>

      <body>
          <div class="container">
            <div class="row">
                  <div class="col-md-12 col-sm-12">
                     <div class="mt-5 mb-5"> DODGE THE BALL</div>
                  </div>
                <div class="col-md-12 col-sm-12">
                     <div  id='board' class="container-game">
                        <div id='dude'class="ball-1"></div>
                        <div id='ball' class="ball-2" ></div>
                    </div>
              </div>
           </div>
        </div>
      </body>
 </html>
      
  • A heading is given with "DODGE THE BALLL".
  • A game container is created with the class selector called "container-game".
  • A defender ball is created with the class selector called "ball-1".
  • An opponent ball is created with the class selector called "ball-2".

Below is the snapshot for how the layout looks after dumping the above code in the index.html.

dodge the ball game

The output is nothing but just a sentence called "DODGE THE BALL". The output is quite boring because still we haven't added any CSS and Javascript stuff.

LET'S PUT CSS CODE INSIDE STYLE TAG



  <style>
  .container-game{
    position:relative;
     width:500;
     height:500;
     z-index:1;
     box-shadow:6px 6px 50px #000;
     background:#aaffa9;
  }
  .ball-1
  {
    position:absolute;
    border-radius:50%;
    width:50;
    height:50;
     box-shadow:6px 6px 30px green;
    top:0;
     left:0;
    z-index:3;
  }
  .ball-2
  {
    position:absolute;
    top:200;
    left:0;
    border-radius:50%;
    width:50;
    height:50;
    box-shadow:6px 6px 30px red;
    z-index:2;
  }
  </style>


     

Below is the output after adding CSS code into the page.

dodge the ball game

LET'S PUT JAVASCRIPT CODE INSIDE SCRIPT TAG



 <script>

 var dudeObj = document.getElementById('dude').style;
 var xDude = 0;
 var yDude = 0;

 var ballObj = document.getElementById('ball').style;
 var xBall = 0;
 var yBall = 200;

 var xSpeed = 10;
 var ySpeed = 10;

 var timerA;
 moveTimer();

 var score = 0;
 var speedInc = 0;

 document.onkeydown = KeyDownMoveIt;

 function KeyDownMoveIt(e)
 {
    if (e.keyCode == 37)
    xDude = xDude - 10 - speedInc*10;

    if (e.keyCode == 39)
    xDude = xDude + 10 + speedInc*10;

    if (e.keyCode == 38)
    yDude = yDude - 10 - speedInc*10;

    if (e.keyCode == 40)
    yDude = yDude + 10 + speedInc*10;

    if (xDude > 500 - 50)
    xDude = 1 - 50;

    if (yDude > 500 - 50)
    yDude = 500 - 50;

    if (xDude < 0)
    xDude = 0;

    if (yDude < 0)
    yDude = 0;

    dudeObj.left = xDude;
    dudeObj.top = yDude;
 }

 function moveTimer()
 {
    if (xBall + xSpeed > 500 - 50)
    xSpeed = -5 * Math.random() - 5 - speedInc;

    if (xBall + xSpeed < 0)
    xSpeed = 5 * Math.random() + 5 + speedInc;

    if (yBall + ySpeed > 500 - 50)
    ySpeed = -5 * Math.random() - 5 - speedInc;

    if (yBall + ySpeed < 0)
    ySpeed = 5 * Math.random() + 5 + speedInc;

    xBall = xBall + xSpeed;
    yBall = yBall + ySpeed;

    ballObj.left = xBall;
    ballObj.top = yBall;

    timerA = setTimeout('moveTimer()',40);

    if ((xDude < xBall+50) && (xDude+50 > xBall) && (yDude < yBall+50) && (yDude+50 > yBall))
    {
       clearTimeout(timerA);
       document.getElementById("board").style.backgroundColor="#e74c3c";
       document.getElementById("scoreId").innerHTML = "Score: " + score;
    }

    score++;

    speedInc = score * 0.01;
 }

 </script>


    

JAVASCRIPT CHAR CODES

"LEFT ARROW" => has code of "37"

"UP ARROW" => has code of "38"

"RIGHT ARROW" => has code of "39"

"DOWN ARROW" => has code of "40"

MATH.RANDOM IN JAVASCRIPT

In javascript , math.random() is used to get random numbers between 0 and 1.

To get random number between 1 and 10 multiply it with 10 (math.random() * 10).

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.