Introduction
Here, I will discuss how we can create a simple web-based game using web technologies like HTML, CSS, JavaScript, and jQuery.
Requirement and specification
There is a game called “Catch My Santa”. I will develop the game as per the below design rules and steps for the game.
- Santa Mania is as simple as it gets. All you need to do is tap on boxes that contain the 'Santa hat'.
- There are a total of 9 boxes in the 3x3 grid.
- Santa hats will appear and disappear randomly in those boxes.
- You will have to tap on the box (or click on the box with the Santa hat if you're on a desktop or a laptop) containing the Santa hat. Every correct tap will get you 10 points.
- Santa Mania runs for 30 seconds, so try to tap on as many Santa hats as possible and ramp up the points earned.
- While playing Santa Mania, you will notice a 3x3 grid of boxes. ‘Santa’s hat’ will pop up randomly in these boxes.
- In order to gain points, you will have to tap on the box with the ‘Santa hat’ or click on the boxes with the ‘Santa hats’ (if you’re on a desktop or laptop).
- Each time you are able to tap on Santa’s hat before it disappears, you will gain points.
- Every successful tap on Santa's hat gets you 10 points.
- You will have a total duration of 30 seconds to try and tap on as many Santa hats as possible.
Coding
Open your Notepad++ to create an HTML file, name it index.html, and place the below code into this HTML file.
<html>
<head>
<title>Catch My Santa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="CMSCss.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="CMSJs.js"></script>
</head>
<body>
<div class="container">
<div class="row m_t_2">
<div class="col-sm-3">
I am
<strong><span id="userName"></span></strong>
</div>
<div class="col-sm-3">
My score is:
<strong><span id="score_board"></span></strong>
</div>
<div class="col-sm-3">
Times remaining
<strong><span id="time_counter"></span></strong>
</div>
</div>
<div class="row" style="padding-top: 2%;">
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
</div>
<div class="row m_t_cards">
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
</div>
<div class="row m_t_cards">
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
<div class="col-sm-4" onclick="AddScore(this)">
<div class="card">
<div class="card-body m_m_h">
</div>
</div>
</div>
</div>
<!-- result modal starts here -->
<div class="modal" id="modalCatchMySanta" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Catch My Santa</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
Your score is <span id="span_Score"></span>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="TryAgain()" data-dismiss="modal">Try Again</button>
<button type="button" class="btn btn-danger" onclick="GameClose()" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- result modal ends here -->
<!-- login modal starts here -->
<div class="modal" id="modalLogin" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body" id="modalBodyLogin">
<div class="form-group">
<label for="Name">Name:</label>
<input type="text" placeholder="Enter your first name" class="form-control user_field" id="txtName" autocomplete="off">
</div>
<div class="form-group">
<label for="sel1">Level:</label>
<select class="form-control user_field" id="ddlLevel">
<option>Beginner</option>
<option>Intermediate</option>
<option>Pro</option>
</select>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="pull-left">
<span class="pull-left" id="spanError"></span>
</div>
<div class="pull-right">
<button type="button" class="btn btn-danger" id="btnPlay" data-dismiss="modal">Play</button>
</div>
</div>
</div>
</div>
</div>
<!-- login modal ends here -->
</div>
</body>
</html>
Create a CSS file named CMSCss.css, place the below code into the css file.
.form-control:focus {
border-color: #cccccc;
-webkit-box-shadow: none;
box-shadow: none;
}
.append_Image {
background-image: url("santa.ico");
background-repeat: no-repeat;
background-position: center;
}
.m_t_2 {
margin-top: 2%;
}
.m_m_h {
min-height: 206px;
max-height: 206px;
}
.m_t_cards {
margin-top: 1%;
}
#modalBodyLogin {
background-image: url("santa.ico");
background-repeat: no-repeat;
background-position: center;
}
.user_field {
border: none;
border-bottom: 1px solid red;
border-radius: 10px;
opacity: 0.4;
filter: drop-shadow(10px 10px 12px red);
}
Create a JavaScript file, name it CMSJs.js and place the below code into the JS file.
var score = 0;
window.onload = function () {
$("#modalLogin").modal('show');
$("#txtName").focusout(function () {
ValidateUser($("#txtName").val());
});
$("#txtName").focusin(function () {
$("#txtName").val('');
$("#spanError").text('');
});
document.getElementById("score_board").innerHTML = score;
$("#btnPlay").click(function () {
if (ValidateUser($("#txtName").val())) {
$("#userName").text($("#txtName").val().toUpperCase());
$("#modalLogin").modal('hide');
var timeLeft = 30;
var elem = document.getElementById("time_counter");
var timerId = setInterval(countdown, 1000);
function countdown() {
if (Number(timeLeft) < 31 && Number(timeLeft) > 0) {
elem.innerHTML = timeLeft;
randomNumberGenerate();
timeLeft--;
}
if (Number(timeLeft) === 0) {
GetResult();
} else {
return false;
}
}
function randomNumberGenerate() {
var min = 0;
var max = 8;
var random = Math.floor(Math.random() * (max - min)) + min;
$(".card-body").eq(random).addClass("append_Image");
$(".col-sm-4").eq(random).addClass("score");
setTimeout(function () {
$(".card-body").eq(random).removeClass('append_Image');
$(".col-sm-4").eq(random).removeClass("score");
}, 1000);
}
} else {
return false;
}
});
};
function AddScore(elem) {
if ($(elem).hasClass("score")) {
score += 10;
document.getElementById("score_board").innerHTML = score;
}
}
function GetResult() {
$("#span_Score").text(score);
setTimeout(function () {
$("#modalCatchMySanta").modal('show');
}, 1300);
}
function GameClose() {
window.close();
}
function TryAgain() {
location.reload();
}
function ValidateUser(name) {
var returnVal = false;
$("#spanError").text("");
var name_regex = /^[a-zA-Z]+$/;
if (!name.match(name_regex)) {
$("#spanError").text("Enter a valid first name");
} else {
returnVal = true;
}
return returnVal;
}
After completing the above things, download a Santa hat icon and name it Santa.ico.
Summary
Using the above code, we can create a simple web-based game application. I hope it will help the beginners.