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 Love Test Game

  • basic knowledge of HTML5.
  • basic knowledge of CSS
  • basic knowledge of Javascript
  • basic knowledge of bootstrap framework
  • 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 love test game tutorial we undergo a simple source code of love test 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) and the logic for calculating love meter.

In this game the user needs to add two names and it would develop their love percentage.

Take it as a source of coding inspiration.

LET'S START THE LOVE METER GAME DEVELOPMENT.

Create a page called "index.html"


<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet">
    </head>
   <body>
 
		<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
</html>
      
  • Add the above code inside the index.html page

             <body class=" bg-danger">
        <div class="container" >
            <div class="row">
                <div class="col-md-12">
                    <div style="text-align: center">
                        <h2>LOVE TEST GAME</h2>
                    </div>
                </div>
                <div class="col-md-12">
                    		<div id="game" style="background:#eeff41;-webkit-box-shadow: 5px 5px5px 0px rgba(0,0,0,0.75);
					-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
					box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);">
                                <div class="mt-5 p-5">
                                     <form  name=loveform>
                                         <div class="md-form">
                                            <input value="Christy" name="name1" type="text" style="font-size: 30px;" size="40" class="form-control">
                                             <p style="font-size: 60px; text-align:center"><span class="bg-danger pr-2 pl-2">+</span><p>
                                             </div>
                                         <div class="md-form">
                                            <input value="Bonny" name="name2" type="text" size="40" style="font-size: 30px;" class="form-control"> 
                                             <p style="font-size: 60px; text-align:center"><span class="bg-danger pr-2 pl-2">=</span><p>
                                              </div>
                                             <div class="md-form">
                                           <input value="" name="output" type="text" size="6" style="font-size: 30px;" class="form-control">
                                                  </div>
               <div class="" style="text-align:center;">
                          
                   <button type="button" class="btn btn-danger" onclick="calc()">Calculate</button>
                                         </div> 
     
       </form>
                                </div>
       
                    </div>
                </div>
            </div>
        </div>
      
    </body>
      
  • Add the above code inside the body tag(note: the code above is with body tag)

LET'S PUT JS CODE INSIDE SCRIPT TAG


 <Script LANGUAGE="JavaScript">


function calc() {

first = document.loveform.name1.value.toUpperCase();
firstlength = document.loveform.name1.value.length;
second = document.loveform.name2.value.toUpperCase();
secondlength = document.loveform.name2.value.length;
var LoveCount=0;

for (Count=0; Count < firstlength; Count++) {
letter1=first.substring(Count,Count+1);
if (letter1=='L') LoveCount+=2;
if (letter1=='O') LoveCount+=2;
if (letter1=='V') LoveCount+=2;
if (letter1=='E') LoveCount+=2;
if (letter1=='Y') LoveCount+=3;
if (letter1=='O') LoveCount+=1;
if (letter1=='U') LoveCount+=3;
}

for (Count=0; Count < secondlength; Count++) {
letter2=second.substring(Count,Count+1);
if (letter2=='L') LoveCount+=2;
if (letter2=='O') LoveCount+=2;
if (letter2=='V') LoveCount+=2;
if (letter2=='E') LoveCount+=2;
if (letter2=='Y') LoveCount+=3;
if (letter2=='O') LoveCount+=1;
if (letter2=='U') LoveCount+=3;
}

amount=0;
if (LoveCount> 0) amount=  5-((firstlength+secondlength)/2)
if (LoveCount> 2) amount= 10-((firstlength+secondlength)/2)
if (LoveCount> 4) amount= 20-((firstlength+secondlength)/2)
if (LoveCount> 6) amount= 30-((firstlength+secondlength)/2)
if (LoveCount> 8) amount= 40-((firstlength+secondlength)/2)
if (LoveCount>10) amount= 50-((firstlength+secondlength)/2)
if (LoveCount>12) amount= 60-((firstlength+secondlength)/2)
if (LoveCount>14) amount= 70-((firstlength+secondlength)/2)
if (LoveCount>16) amount= 80-((firstlength+secondlength)/2)
if (LoveCount>18) amount= 90-((firstlength+secondlength)/2)
if (LoveCount>20) amount=100-((firstlength+secondlength)/2)
if (LoveCount>22) amount=110-((firstlength+secondlength)/2)

if (firstlength==0 || secondlength==0) amount= "Err";
if (amount < 0) amount= 0;
if (amount >99) amount=99;

document.loveform.output.value=amount+"%";
}

</script>


     

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

love test javascript

LET'S HAVE LOOK ON IN-BUILT FUNCTION USED

UPPERCASE/LOWERCASE

toUpperCase() -> This function is used to conver lower case character to upper case.

toLowerCase() -> This function is used to convert upper case character to lower case character. (Note: this function is not used in above code.)

subString() -> This function is used to fetch characters from string(Note: String is the set of or group of characters.)

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.