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

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

 

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

 

See also  Deno.js Tutorial to Save JSON Objects inside LocalStorage Store Database Using TypeScript Full Project For Beginners

 

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

 

See also  Build a Compound Interest Calculator Using Chart.js in HTML5 CSS3 and Javascript Full Project For Beginners

 

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

 

Leave a Reply