Reconocimiento de Imágenes de juegos usando JavaScript

En este tutorial, vamos a desarrollar un juego de reconocimiento de imágenes utilizando JavaScript .

Hoy vamos a desarrollar un juego de reconocimiento de imágenes funcional usando JavaScript . JavaScript es la mejor opción ajuste, ya que es un juego basado en la web. El juego se basa totalmente en la manejo de eventos y objetos de eventos .

archivos de código

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;

Descargar archivo (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>

Descargar archivo (game.html)

Descargar proyecto (Game_using_JavaScript)

al ejecutar el código anterior, verá dos imágenes borrosas. Al hacer clic sobre ellos la versión no borrosa de la misma imagen en la pantalla. Así que, primero el usuario tiene que hacer una suposición acerca de la imagen y entonces él / ella puede hacer clic en la imagen para revelar la respuesta es decir, para ver la versión no borrosa de la imagen.

La lógica detrás de la magia:

En primer lugar, en el número de la línea 9 todo el HTML etiquetas de imagen se accede por document.getElementbyTagName que devuelve una matriz de objetos DOM. Cada elemento de esta matriz representa una etiqueta de imagen única. Onclick caso de cada objeto DOM en la matriz se ha asignado el controlador de eventos showanswer .

Ahora después de eso, se puede ver que showanswer no es más que una simple función en la que se pasa un objeto de evento. El objeto de evento contiene información habitual sobre el evento. Como aquí su propiedad de destino es un objeto DOM que representa el elemento HTML en que haya ocurrido evento.

atención Pay:

El objeto de la imagen tiene un número de propiedades a través del cual muchos atributos del elemento HTML correspondiente se puede acceder directamente. Como aquí hemos utilizado Identificación y luego src propiedades para cambiar la imagen para la versión no borrosa en la ocurrencia del evento de clic.

Usted debe haber notado que las estancias de imagen no borrosa no class un momento y luego otra vez se muestra la imagen borrosa. Esto es debido a la función setTimeout . Es una función incorporada en JS.

número Línea 20 efectivamente significa que después de 2000 ms de la invocación de la función showanswer , otra función reblur serán tratados y la imagen se pasa como argumento a la función reblur .

En reblur función, de una manera similar como en función showanswer la imagen se cambia de nuevo a borrosidad de la imagen a través del objeto imagen que fue pasado en ella.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *