JQuery

Web Based Game Using JavaScript

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.

  1. Santa Mania is as simple as it gets. All you need to do is tap on boxes that contain the 'Santa hat'.
  2. There are a total of 9 boxes in the 3x3 grid.
  3. Santa hats will appear and disappear randomly in those boxes.
  4. 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.
  5. Santa Mania runs for 30 seconds, so try to tap on as many Santa hats as possible and ramp up the points earned.
  6. While playing Santa Mania, you will notice a 3x3 grid of boxes. ‘Santa’s hat’ will pop up randomly in these boxes.
  7. 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).
  8. Each time you are able to tap on Santa’s hat before it disappears, you will gain points.
  9. Every successful tap on Santa's hat gets you 10 points.
  10. 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>
Markup

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

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

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found