使用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功能的圖像被改變回經由在它通過圖像對象模糊圖像。