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>

Join the conversation! Your thoughts help the community grow.