INTRODUCTION
Here, I will discuss how can we 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 designs and 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.
- There will be Santa hats appearing and disappearing randomly in those boxes.
- You will have to tap on the box (or click on the box having 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 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, place the below code into this HTML file.
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: .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()) == true) {
- $("#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.