Interactive games can be made with simple javascript

had just started learning javascript few days ago.I found it very interactive and simple to understand. Very complex things can be made with less code. All modern day websites are made with javascript as it has huge no of libraries and it is quite powerful. All the html and css the properties can be manipulated or changed with this. If you don't know what is html and css then let me tell you what it is. In a simple webpage whatever you see, is made with html. It has bunch tags and in between those tags the content and all the visible stuff of the webpage is written and how all that content will be styled is decided by css. Now you can imagine the power of this.

Abut the game

This is a simple game.On loading of the game you will found that there is two sections on has background color of blue and other is of yellow. If you click on start button then you on the left there will be six randomly placed smiles and in the right there is clone images except the one which you have to find and it is also the objective of the game. each time you hit the right image you will get five smiles more with an extra smiley in the left. If you hit the wrong image then the game will stop.

Here is the javascript code for making the game

var score =0;
var failure=0;
var level =0;
var failed_no =0;

function create5(){
    for(var i=1;i<=5;i++)
    {
        var img = document.createElement("IMG");
        img.setAttribute("src","smiley_face.gif");
        img.setAttribute("width", "60");
        img.setAttribute("height", "60");
        var left_div=document.getElementById("leftside");
        var left_div_height = left_div.offsetHeight;

        var top_position = Math.floor(Math.random()*(left_div_height-60)); 
        var left_position= Math.floor(Math.random()*(left_div_height-60));
        img.style.top=top_position +"px";
        img.style.left=left_position+ "px";
        left_div.appendChild(img);

        img.addEventListener("click",display_right);
        function display_right(){
            alert("you found the wrong image");
            failure=1;
            show_score1();
            failed();
        }

        var cln_img = img.cloneNode(true);
        var right_div=document.getElementById("rightside");
        right_div.appendChild(cln_img);
    } 
    if(failure<1){clone_image();}
}

function clone_image(){
    var extra_img = document.createElement("IMG");
    extra_img.setAttribute("src","smiley_face.gif");
    extra_img.setAttribute("width", "60");
    extra_img.setAttribute("height", "60");
    var left_div=document.getElementById("leftside");
    var left_div_height = left_div.offsetHeight;

    var top_position = Math.floor(Math.random()*(left_div_height-60)); 
    var left_position= Math.floor(Math.random()*(left_div_height-60));
    extra_img.style.top=top_position +"px";
    extra_img.style.left=left_position+ "px";
    left_div.appendChild(extra_img);

    extra_img.addEventListener("click",display_right);
    function display_right(){
        if(failure<1)
            {
                alert("you found the extra image");
                left_div.removeChild(extra_img);
                create5();
                show_score(); 
            }
        else{
            alert("This is the extra image but you already hit the wrong image,Sorry!!");
        }
    }
}

Here two function is defined. One is create5() and another is clone_image().The first one used to create 5 image on the both side and the second one is used to create the extra image on the left side.

function show_score(){
    level=level+1;
    var your_level="";
    var mult =0;
    if(level<6)
    {mult=4;
    your_level="beginer";}
    else {
        if(level<12)
            {mult=6;
            your_level="intermediate";}
        else
            {mult=7;
            your_level="pro"}
         }
    score = score+mult;
    alert("Your score is "+score+" xp\nYou are in "+your_level+" level");

}

function failed(){

    failed_no=failed_no+1;
    if(failed_no==1){
        var fail = document.getElementById("info");
        var text = document.createTextNode("You have failed");
        fail.appendChild(text);
    } 
}
function show_score1()
{
   alert("Your final score is "+score+" xp"); 
}

This show_score function shows the current score and level of the user on every time when he hits the extra image. The failed function is called when he hit the wrong image. It shows that you have failed and the last function shows the final score.

function removeAll(){
    score =0;
    failure=0;
    level =0;
    failed_no =0;

    var left_div=document.getElementById("leftside");
    while (left_div.hasChildNodes()) 
    {   
        left_div.removeChild(left_div.firstChild);
    }

    var right_div=document.getElementById("rightside");
    while (right_div.hasChildNodes()) 
    {   
        right_div.removeChild(right_div.firstChild);
    }

}

Function removeAll is used to remove all the images.

Blog

Interactive games can be made with simple javascript

Abhishek1009

Abut the game

Here is the javascript code for making the game

You can play the game here : Detect the extra smiley

Join Our Newsletter. No Spam, Only the good stuff.

Related