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>

<header><h1>Hand Cricket</h1></header>

</div>

<h2>Your Choice:</h2>

</div>

</div>

<h1>Score:</h1>

</div>

<h2>Computer Choice:</h2>

</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;}
}

#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();
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

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

Build a Classic Hand Cricket Multiplayer Game in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Get Started

Leave a Reply Cancel reply

Get Started

Related posts:

You Might Also Like

Build a Webcam Filter Picture App with Webrtc & Canvas

How to Extract Youtube Video Id From Youtube URL in Javascript

Node.js Project to Implement 2 Factor OTP Code Authentication For Verifying Emails in Browser Using Javascript

Leave a Reply Cancel reply