使用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.

今天，我们将使用JavaScript开发功能全面的图像识别游戏 。 JavaScript是最适合的选择，因为它是基于Web的游戏。游戏完全基于事件处理和事件对象 。

Code files

代码文件

1) battleship.js

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)

下载文件(battleship.js)

2) game.html

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)

下载文件(game.html)

Download project (Game_using_JavaScript)

下载项目(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.

首先，在第9行中，所有HTML图像标签都由document.getElementbyTagName访问，该文档返回DOM对象的数组。该数组的每个元素代表一个唯一的图像标签。已为数组中每个DOM对象的Onclick事件分配了showanswer事件处理程序。

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.

现在，您可以看到showanswer只是一个简单的函数，其中传递了事件对象。事件对象包含有关事件的常规信息。像这里一样，它的目标属性是一个DOM对象，表示发生事件HTML元素。

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.

图像对象具有许多属性，通过它们可以直接访问相应HTML元素的许多属性。像这里一样，我们使用id和src属性在发生click事件时将图像更改为未模糊的版本。

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.

您必须已经注意到未模糊的图像在此处停留了片刻，然后再次显示了模糊的图像。这是因为有setTimeout函数。它是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.

第20行有效地表示在调用showanswer函数2000ms之后，将调用另一个函数reblur ，并且图像将作为参数传递给reblur函数。

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.

在reblur功能，以类似的方式，如showanswer功能的图像被改变回经由在它通过图像对象模糊图像。