Home » JavaScript Examples

Image Recognition Game using JavaScript

In this tutorial, we are going to develop a image recognition game using JavaScript.
Submitted by Mansha Lamba, on October 14, 2018

Image Recognition Game using JavaScript

Today we are going to develop a fully functional image recognition game using JavaScript. JavaScript is the best fit choice since it is a web-based game. The game is totally based on event handling and event objects.

Code files

1) battleship.js

var view = {
    displayMessage: function(msg) {
        var messageArea = document.getElementById("messageArea");
        messageArea.innerHTML = msg;
    },
    displayHit: function(location) {
        var cell = document.getElementById(location);
        cell.setAttribute("class", "hit");
    },
    displayMiss: function(location) {
        var cell = document.getElementById(location);
        cell.setAttribute("class", "miss");
    }
}

var model = {
    boardSize: 7,
    numShips: 3,
    shipsSunk: 0,
    shipLength: 3,
    generateShipLocations: function() {
        var locations;
        for (var i = 0; i < this.numShips; i++) {
            do {
                locations = this.generateShip();
            } while (this.collision(locations));
            this.ships[i].locations = locations;
        }
    },
    generateShip: function() {
        var direction = Math.floor(Math.random() * 2);
        var row, col;
        if (direction === 1) {
            row = Math.floor(Math.random() * this.boardSize);
            col = Math.floor(Math.random() * (this.boardSize - this.shipLength));
        } else {
            row = Math.floor(Math.random() * (this.boardSize - this.shipLength));
            col = Math.floor(Math.random() * this.boardSize);
        }
        var newShipLocations = [];
        for (var i = 0; i < this.shipLength; i++) {
            if (direction === 1) {
                newShipLocations.push(row + "" + (col + i));
            } else {
                newShipLocations.push((row + i) + "" + col);
            }
        }
        return newShipLocations;
    },
    collision: function(locations) {
        for (var i = 0; i < this.numShips; i++) {
            var ship = model.ships[i];
            for (var j = 0; j < locations.length; j++) {
                if (ship.locations.indexOf(locations[j]) >= 0) {
                    return true;
                }
            }
        }
        return false;
    },
    ships: [{
        locations: [0, 0, 0],
        hits: ["", "", ""]
    }, {
        locations: [0, 0, 0],
        hits: ["", "", ""]
    }, {
        locations: [0, 0, 0],
        hits: ["", "", ""]
    }],
    fire: function(guess) {
        for (var i = 0; i < this.numShips; i++) {
            var ship = this.ships[i];
            var index = ship.locations.indexOf(guess);
            if (index >= 0) {
                ship.hits[index] = "hit";
                view.displayHit(guess);
                view.displayMessage("HIT!");
                if (this.isSunk(ship)) {
                    view.displayMessage("You sank my battleship!");
                    this.shipsSunk++;
                }
                return true;
            }
        }
        view.displayMiss(guess);
        view.displayMessage("You missed.");
        return false;
    },
    isSunk: function(ship) {
        for (var i = 0; i < this.shipLength; i++) {
            if (ship.hits[i] !== "hit") {
                return false;
            }
        }
        return true;
    }
};

// model.fire("53");
// model.fire("06");
function parseGuess(guess) {
    var alphabet = ["A", "B", "C", "D", "E", "F", "G"];
    if (guess === null || guess.length !== 2) {
        alert("Oops, please enter a letter and a number on the board.");
    } else {
        firstChar = guess.charAt(0);
        var row = alphabet.indexOf(firstChar);
        var column = guess.charAt(1);
        if (isNaN(row) || isNaN(column)) {
            alert("Oops, that isn't on the board.");
        } else if (row < 0 || row >= model.boardSize ||
            column < 0 || column >= model.boardSize) {
            alert("Oops, that's off the board!");
        } else {
            return row + column;
        }
    }
    return null;
}
// console.log(parseGuess("C0"));
//  console.log(parseGuess("H0"));

var controller = {
    guesses: 0,
    processGuess: function(guess) {
        var location = parseGuess(guess);
        if (location) {
            this.guesses++;
            var hit = model.fire(location);
            if (hit && model.shipsSunk === model.numShips) {
                view.displayMessage("You sank all my battleships, in " +
                    this.guesses + " guesses");
            }
        }
    }
};

function init() {
    var fireButton = document.getElementById("fireButton");
    fireButton.onclick = handleFireButton;
    model.generateShipLocations();
}

function handleFireButton() {
    var guessInput = document.getElementById("guessInput");
    var guess = guessInput.value;
    controller.processGuess(guess);
    guessInput.value = "";

}
window.onload = init;

Download file (battleship.js)

2) game.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Battleship</title>
    <style>
        body {
            background-color: black;
        }
        
        div#board {
            position: relative;
            width: 1024px;
            height: 863px;
            margin: auto;
            background: url("board.png") no-repeat;
            background-color: black;
        }
        
        .hit {
            background: url("ship.png") no-repeat center center;
        }
        
        .miss {
            background: url("miss.png") no-repeat center center;
        }
        
        div#messageArea {
            position: absolute;
            height: 20px;
            width: 180px;
            font-size: 30px;
            top: 150px;
            left: 500px;
            color: rgb(83, 175, 19);
        }
        
        table {
            position: absolute;
            left: 8px;
            top: 10px;
            border-spacing: 0px;
        }
        
        td {
            width: 46px;
            height: 45px;
        }
        
        form {
            position: absolute;
            bottom: 200px;
            right: 0px;
            padding: 15px;
            background-color: rgb(83, 175, 19);
        }
        
        form input {
            background-color: rgb(152, 207, 113);
            border-color: rgb(83, 175, 19);
            font-size: 1em;
        }
    </style>
</head>

<body>
    <div id="board">
        <div id="messageArea"></div>
        <table>
            <tr>
                <td id="00"></td>
                <td id="01"></td>
                <td id="02"></td>
                <td id="03">
                </td>
                <td id="04"></td>
                <td id="05"></td>
                <td id="06"></td>
            </tr>
            <tr>
                <td id="10"></td>
                <td id="11"></td>
                <td id="12"></td>
                <td id="13"></td>
                <td id="14"></td>
                <td id="15"></td>
                <td id="16"></td>
            </tr>
            <tr>
                <td id="20"></td>
                <td id="21"></td>
                <td id="22"></td>
                <td id="23"></td>
                <td id="24"></td>
                <td id="25"></td>
                <td id="26"></td>
            </tr>
            <tr>
                <td id="30"></td>
                <td id="31"></td>
                <td id="32"></td>
                <td id="33"></td>
                <td id="34"></td>
                <td id="35"></td>
                <td id="36"></td>
            </tr>
            <tr>
                <td id="40"></td>
                <td id="41"></td>
                <td id="42"></td>
                <td id="43"></td>
                <td id="44"></td>
                <td id="45"></td>
                <td id="46"></td>
            </tr>
            <tr>
                <td id="50"></td>
                <td id="51"></td>
                <td id="52"></td>
                <td id="53"></td>
                <td id="54"></td>
                <td id="55"></td>
                <td id="56"></td>
            </tr>

            <tr>
                <td id="60"></td>
                <td id="61"></td>
                <td id="62"></td>
                <td id="63"></td>
                <td id="64"></td>
                <td id="65"></td>
                <td id="66"></td>
            </tr>
        </table>
        <form>
            <input type="text" id="guessInput" placeholder="A0">
            <input type="button" id="fireButton" value="Fire!">
        </form>
    </div>
    <script src="battleship.js"></script>
</body>

</html>

Download file (game.html)

Download project (Game_using_JavaScript)

On running the above code you will see two blurred images. On clicking on them the unblurred version of the same image is displayed. So first the user has to make a guess about the image and then he/she can click on the image to reveal answer i.e. to see the unblurred version of the image.

The logic behind the magic:

First, in line number 9 all the HTML image tags are accessed by document.getElementbyTagName which returns an array of DOM objects. Each element of this array represents a unique image tag. Onclick event of each DOM object in the array has been assigned the showanswer event handler.

Now after that, you can see that showanswer is nothing but a simple function in which an event object is being passed. The event object contains usual information about the event. Like here its target property is a DOM object representing the HTML element on which event has occurred.

Pay attention:

The image object has a number of properties through which many attributes of the corresponding HTML element can be accessed directly. Like here we have used id and then src properties to change the image to the unblurred version on the occurrence of the click event.

You must have noticed that unblurred image stays there for just a moment and then again the blurred image is displayed. This is because of the setTimeout function. It is an inbuilt function in JS.

Line number 20 effectively means that after 2000ms of invoking of showanswer function , another function reblur will be called and the image will be passed as an argument to reblur function.

In reblur function, in a similar manner as in showanswer function the image is changed back to blur image via image object that was passed in it.

JavaScript Examples »

---