Welcome folks today in this blog post we will be building a classic hand cricket multiplayer game in browser using html5 css3 and javascript.All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="header">
                <header><h1>Hand Cricket</h1></header>
        <h1 id="achievement"></h1>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="userchoice">
                <!--user choice is shown in here-->
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="usercol">
                        <h2>Your Choice:</h2>
                        <h1 id="userchoiceshow"></h1>
                    </div>
                </div>
                <!--choices shown here-->
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="choice">
                        <button id="one" onclick="play1()">1</button>
                        <button id="two" onclick="play2()">2</button>
                        <button id="three" onclick="play3()">3</button>
                        <button id="four" onclick="play4()">4</button>
                        <button id="five" onclick="play5()">5</button>
                        <button id="six" onclick="play6()">6</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="scoreboard">
                <h1>Score:</h1>
                <h2 id="score"></h2>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="computerchoice">
                <h2>Computer Choice:</h2>
                <h1 id="computerchoiceshow"></h1>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="commentary">
                <h3 id="comments"></h3>
            </div>
        </div>
    </div>

Now make a style.css file and copy paste the below code

style.css

#header{
    background-color: black;
    color: lightgreen;
}

/* user side css*/
#userchoice{
    border: 5px solid black;
    height: 400px;
}
#usercol{
    border: 1px solid black;
    height: 300px;
}
#choice{
    border: 1px solid black;
    height: 100px;
}

#choice > button {
    display: inline-flex;
    flex-wrap: wrap;
    border-radius: 50%;
    background-color: red;
    color: white;
    height: 50px;
    width: 50px;
    text-align: center;
}

/* scoreboard css*/

#scoreboard{
    border: 5px solid black;
    height: 400px;
}

/* computer side css*/

#computerchoice{
    border: 5px solid black;
    height: 400px;
}

/* commentary section */
#commentary{
    border:5px solid black;
    height: 90px;
  text-align:center;
}

/* achievement */

#achievement{
    color: lightgreen;
    animation: change 1s linear infinite;
    text-align: center;
    position: absolute;
    top: 5px;
    left: 40%;
}

@keyframes change{
    0%{color: lightgreen;}
    100%{color: orangered;}
}

Now make a script.js file and copy paste the below code

script.js

var tot = 0;
function score(){
    var s = uchoice;
    tot += s;
    var h = "Half Century";
    var c = "Century";
    document.getElementById('score').innerHTML = tot;
    if(tot >= 50 && tot <= 55){
        document.getElementById('achievement').innerHTML = h;
    }
    else if(tot >= 100 && tot <= 105){
        document.getElementById('achievement').innerHTML = c;
    }
    else{
        document.getElementById('achievement').innerHTML = "";
    }
}
function play1(){
    uchoice = 1;
    var cchoice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("userchoiceshow").innerHTML = uchoice;
    document.getElementById("computerchoiceshow").innerHTML = cchoice;
    if(cchoice === 1){
        var o = "Out!"
        document.getElementById("comments").innerHTML = o;
        tot = 0;
    }
    else{
        var c = "A single taken";
        document.getElementById("comments").innerHTML = c;
        score();
    }
}

function play2(){
    uchoice = 2;
    var cchoice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("userchoiceshow").innerHTML = uchoice;
    document.getElementById("computerchoiceshow").innerHTML = cchoice;
    if(cchoice === 2){
        var o = "Out!"
        document.getElementById("comments").innerHTML = o;
        tot = 0;
    }
    else{
        var c = "batsman looking for two runs...";
        document.getElementById("comments").innerHTML = c;
        score();
    }
}

function play3(){
    uchoice = 3;
    var cchoice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("userchoiceshow").innerHTML = uchoice;
    document.getElementById("computerchoiceshow").innerHTML = cchoice;
    if(cchoice === 3){
        var o = "Out!"
        document.getElementById("comments").innerHTML = o;
        tot = 0;
    }
    else{
        var c = "batsmen are quick between the wickets....3 runs taken...";
        document.getElementById("comments").innerHTML = c;
        score();
    }
}

function play4(){
    uchoice = 4;
    var cchoice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("userchoiceshow").innerHTML = uchoice;
    document.getElementById("computerchoiceshow").innerHTML = cchoice;
    if(cchoice === 4){
        var o = "Out!"
        document.getElementById("comments").innerHTML = o;
        tot = 0;
    }
    else{
        var c = "ball races to the boundary line..... 4 it is....";
        document.getElementById("comments").innerHTML = c;
        score();
    }
}

function play5(){
    uchoice = 5;
    var cchoice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("userchoiceshow").innerHTML = uchoice;
    document.getElementById("computerchoiceshow").innerHTML = cchoice;
    if(cchoice === 5){
        var o = "Out!"
        document.getElementById("comments").innerHTML = o;
        tot = 0;
    }
    else{
        var c = "No ball and a boundary...";
        document.getElementById("comments").innerHTML = c;
        score();
    }
}

function play6(){
    uchoice = 6;
    var cchoice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("userchoiceshow").innerHTML = uchoice;
    document.getElementById("computerchoiceshow").innerHTML = cchoice;
    if(cchoice === 6){
        var o = "Out!"
        document.getElementById("comments").innerHTML = o;
        tot = 0;
    }
    else{
        var c = "Over the boundary line.... 6 it is";
        document.getElementById("comments").innerHTML = c;
        score();
    }
}

Now if you open the index.html file inside the browser you will see the below output