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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!-- 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
#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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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