Share
En este tutorial de dos partes, aprenderá cómo usar JavaScript y HTML para crear un juego de juego de cartas basado en la API de Flickr. Echa un vistazo a la demostración, y sigue leyendo.!
Para poder utilizar la API de Flickr, debe ser un usuario registrado en flickr.com. Desde la página de inicio de Flickr, haga clic en el enlace Registrarse..
Una vez que haya iniciado sesión, deberá visitar App Garden para comenzar..
Querrá marcar esta página si está planeando hacer un gran desarrollo de Flickr, ya que contiene mucha información útil para los desarrolladores..
Haga clic en el enlace "Crear una aplicación" una vez que llegue a la App Garden.
En "Obtener su clave de API", haga clic en el enlace "Solicitar una clave de API".
Aquí deberá elegir si desea utilizar la aplicación con fines comerciales o no comerciales. Para este juego elegí no comercial..
A continuación, irá a la página de detalles de la aplicación. Ingrese el nombre de su aplicación y una descripción de lo que hace su aplicación, acepte los acuerdos y haga clic en el botón Enviar.
A continuación, se le presentará su clave y su secreto. No usaremos la clave secreta aquí ya que nuestra aplicación no requiere autenticación. Tome nota de su clave API, ya que la necesitaremos para el resto de este tutorial.
Flickr tiene una API REST para desarrolladores. Utilizaremos estos dos métodos de la API:
los flickr.photos.search método nos permitirá buscar fotos, mientras que el flickr.photos.getInfo Este método nos permitirá obtener información para una sola foto, como el nombre de usuario (propietario) de la foto, el título de la foto y la URL de la página de la foto en Flickr..
Si visita uno de los enlaces anteriores, en la parte inferior de la página hay un enlace al API Explorer donde puede ingresar algunos datos y obtener un ejemplo de respuesta..
La imagen de arriba es para el flickr.photos.search método. Adelante y haga clic en el enlace ahora.
Hay muchas opciones, y puede parecer abrumador, pero todo lo que nos interesa para este tutorial es la opción de "etiquetas"; Entré "perro" en el cuadro de búsqueda de etiquetas. Elija JSON como método de salida, ya que usaremos JSON en este tutorial.
Finalmente, presione el botón "Método de llamada" y se mostrará un ejemplo de la respuesta. Aquí hay una parte del tipo de datos que puede esperar recibir: las últimas líneas se han cortado:
"photos": "page": 1, "pages": "49825", "perpage": 100, "total": "4982408", "photo": ["id": "7338255166", "owner ":" 45596890 @ N00 "," secreto ":" 5f145a92b8 "," servidor ":" 7083 "," granja ": 8," título ":" Linda Rhea "," ispublic ": 1," isfriend ": 0 , "isfamily": 0, "id": "7338254718", "owner": "45596890 @ N00", "secret": "9e1da794a3", "server": "7223", "farm": 8, " título ":" Masticar Rhea "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338258850 "," owner ":" 8672236 @ N04 "," secret ": "d0a5c4124c", "server": "8027", "farm": 9, "title": "", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": " 7338271122 "," owner ":" 49270434 @ N08 "," secret ":" 30876cfdf6 "," server ":" 7236 "," farm ": 8," title ":" 286 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338235972 "," owner ":" 8640124 @ N02 "," secret ":" a583d6aa48 "," server ":" 7085 "," farm " : 8, "title": "Y: 4 Day 123: sweeps de viento", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7330075254", "owner": "32081016 @ N07", "secreto": "04cb99 e8a7 "," server ":" 7239 "," farm ": 8," title ":" Perros locos e ingleses ... "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338229968 "," owner ":" 67178219 @ N06 "," secret ":" 92b4be222a "," server ":" 7095 "," farm ": 8," title ":" Le petit chien dans la prairie "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338185610 "," owner ":" 7315798 @ N04 "," secret ":" 9a91bd1280 "," server ":" 7224 "," farm ": 8," title ":" snuggle "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338111264 "," owner ":" 80044484 @ N06 "," secret ":" f795c559e3 "," server ":" 7214 "," farm ": 8," title ":" DSC_0408 "," ispublic ": 1," isfriend ": 0, "isfamily": 0, "id": "7338135744", "owner": "80023312 @ N07", "secret": "d37c015be6", "server": "7234", "farm": 8, "title ":" 0007_Ridgeback "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338136008 "," owner ":" 80023312 @ N07 "," secret ":" 259e50ebaa "," server ":" 7219 "," farm ": 8," title ":" 0003_Pug "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 73 38133290 "," owner ":" 80044484 @ N06 "," secret ":" a2e954aab0 "," server ":" 7098 "," farm ": 8," title ":" _DSC0032 "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338142010 "," owner ":" 80023312 @ N07 "," secret ":" 34809c804f "," server ":" 7071 "," farm " : 8, "title": "0009_WireFox", "ispublic": 1, "isfriend": 0, "isfamily": 0, "id": "7338014824", "owner": "36700168 @ N04", " secret ":" 2625ab12a4 "," server ":" 8164 "," farm ": 9," title ":" Nosferatus 'dog "," ispublic ": 1," isfriend ": 0," isfamily ": 0, "id": "7338092614", "owner": "80023312 @ N07", "secret": "ee7210e0f1", "server": "8010", "farm": 9, "title": "0002_GreatDane", " ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338120200 "," owner ":" 80023312 @ N07 "," secret ":" 38b5c49f4f "," server ":" 7245 "," granja ": 8," título ":" 0006_Cavalier "," ispublic ": 1," isfriend ": 0," isfamily ": 0, " id ":" 7338159814 "," owner ":" 7315798 @ N04 "," secret ":" 327e97cb13 "," server ":" 7104 "," farm ": 8," title ":" puppy love "," ispublic ": 1," isfriend ": 0, "isfamily": 0,
Utilizaremos los datos de la respuesta para construir nuestra URL a las imágenes. Las URLs toman esta forma:
http: // farm farm-id .static.flickr.com / server-id / id _ secret _ [mstzb] .jpg
Para hacer una URL utilizable, simplemente reemplazamos lo que está dentro de con los datos que obtenemos de arriba. Por ejemplo, el primer elemento de la foto matriz dentro del JSON anterior es:
"id": "7338255166", "owner": "45596890 @ N00", "secret": "5f145a92b8", "server": "7083", "farm": 8, "title": "Cute Rhea", "ispublic": 1, "isfriend": 0, "isfamily": 0
... así que la URL que debemos construir es esta:
http://farm8.static.flickr.com/7083/7338255166_5f145a92b8_q.jpg
La "q" denota el tamaño de la imagen: 150x150px.
Ese enlace lleva a esta foto. Puede encontrar más información sobre las URL en la documentación de Flickr para URL de fuente de fotos..
En la descarga de origen hay un archivo ZIP llamado "StartHere.zip" que contiene los archivos que se han diseñado para usted, listos para agregar un código. Puede navegar a través de estos archivos para obtener una idea de la estructura del proyecto. También he incluido un "README.txt" que explica la estructura con más detalle.
Estamos utilizando las siguientes bibliotecas de JavaScript en este proyecto. Puedes descargarlos por separado si lo deseas..
Accentsconagua
document.ready () Dentro de la carpeta "js" encontrará un nombre de archivo JavaScript "flickrgame.js". Agregue el siguiente código a este archivo.
$ (document) .ready (function () alert ("Ready");); Si prueba la página "index.html" ahora, debería ver una alerta con la palabra "Listo".
Este código utiliza jQuery. .Listo() Método, que se activa cuando el DOM se ha cargado completamente. Es importante llamar a este método al codificar sus aplicaciones, ya que necesita asegurarse de que el DOM se haya cargado antes de intentar manipularlo. Por ejemplo, si intenta agregar un controlador de eventos de clic a un botón antes de que el DOM se haya cargado y listo, no tendría ningún efecto.
flickrGame Objeto LiteralEstaremos usando un objeto llamado flickrGame para mantener todas nuestras variables limpias y ordenadas y fuera del espacio de nombres global.
Ingrese el siguiente código dentro de $ (documento) .ready () Usted agregó en el paso anterior, reemplazando la alerta..
$ (document) .ready (function () var flickrGame = );
Dentro de flickrGame literal del objeto agregar el siguiente código. Reemplaza la "TU CLAVE DE LA API" con la clave de la API que recibiste al registrarte.
$ (document) .ready (function () var flickrGame = APIKEY: "YOUR KEY API KEY");
Búsqueda () los Búsqueda () Método llamará a la API de Flickr. Introduzca lo siguiente debajo de flickrGame definición literal del objeto (pero aún dentro de la $ document.ready () función):
function doSearch () var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags = dog" searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages);
Aquí construimos nuestra consulta paso a paso. Señalamos el búsquedaURL variable al método flickr.photos.search de la API de Flickr.
Como es una API REST, para llamarla solo necesitamos construir una URL con los parámetros requeridos. Entonces, aquí estamos usando el flickr.photos.search Método, y solicitando imágenes etiquetadas con "perro". Hemos establecido el formato en "json" y en "jsoncallback =?", Lo que hace que la función de devolución de llamada se ejecute tan pronto como se recuperan los datos..
Estableciendo el parámetro de licencia tp 5,7 Le pedimos a Flickr que solo nos brinde imágenes con una licencia de Atribución-Compartir Igual o sin licencia de derechos de autor conocida.
Luego usamos el método $ .getJSON () de jQuery, pasando nuestro búsquedaURL y una referencia a la función de devolución de llamada setImages () que codificaremos a continuación.
setImages () En este paso codificaremos la setImages () Funciona y visualiza los resultados que obtenemos de Flickr. Ingrese el siguiente código debajo de Búsqueda () Función que has añadido en el paso anterior..
function setImages (data) var tempString = ""; $ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; tempString + = imageURL + "
";); $ (" # urls "). html (tempString);
Aquí inicializamos una variable. tempString Eso contendrá las URLs que obtengamos de Flickr. Dentro de cada objeto, el parámetro. datos contiene el JSON que se devolvió de la llamada a la API de Flickr, como se describe en el Paso 3, para que podamos ver que los objetos de fotos individuales se encuentran en data.photos.photo.
Podemos usar el método $ .each () de jQuery para recorrer cada objeto fotográfico JSON que se devolvió. Dentro del bucle construimos el URL de la imagen, de nuevo según lo establecido en el Paso 3, luego adjúntelo a tempString, y finalmente la salida tempString al div llamado "urls" modificando directamente el HTML del div.
El punto aquí es ver qué URL estamos recibiendo de nuestra llamada a la API de Flickr. Si está siguiendo junto con el código fuente, agregué un div con id = "urls" Así podríamos ver esto en la página web. (Lo eliminaré en el siguiente paso).
Por último, para verlo realmente necesitamos llamar a nuestro Búsqueda () función. Agregue esto justo debajo de la setImages () función.
doSearch ();
Puedes probarlo aquí. Puede tardar uno o dos segundos antes de ver estos datos, dependiendo de la velocidad de su conexión. A continuación, se muestran las primeras URL que se devuelven, en caso de que no sigas el código fuente.
http://farm9.static.flickr.com/8025/7183874333_9b8b43dfe1_q.jpg http://farm9.static.flickr.com/8003/7368215016_3c42485ee9_q.jpg http://farm6.static.flickr.com/5467/7179453807_a4c871311fq. jpg http://farm9.static.flickr.com/8002/7364322976_4f02a954ea_q.jpg http://farm9.static.flickr.com/8026/7177956063_6d92435602_q.jpg http://farm8.static.flickr.com/7227959671_0251cc11c11.jpg .jpg
Estaremos almacenando todas las URL que recibimos de Flickr en una matriz, en lugar de atascarnos como una sola cadena. Agregue lo siguiente a la flickrGame objeto.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: []
(Asegúrese de agregar la coma después de la APIKEY: "SU CLAVE API".)
Ahora, agregue lo siguiente dentro del setImages () función. Eliminé el código del paso anterior, ya que solo tenía fines demostrativos..
$ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item.server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, photoid: item.id););
Aquí empujamos el URL de la imagen y Identificación del artículo sobre la imageArray usando las teclas URL de la imagen y identificación fotográfica respectivamente. Necesitamos el URL de la imagen para construir nuestras imágenes, y la identificación fotográfica Se utilizará para identificar la foto en particular. También debemos mostrar una atribución de las fotos que usamos, y al tener su ID podemos vincular al usuario con la foto en Flickr..
La necesidad de todos estos datos se aclarará a medida que avancemos en el tutorial, por lo que no se preocupe demasiado por ahora..
infoLoaded () los infoLoaded () La función se utilizará para cargar la información de las fotos. Después de que toda la información de la foto ha sido cargada, infoLoaded () llamará a una función llamada preloadImages () que precargará las imágenes.
Una vez que todas las imágenes han sido precargadas llamamos drawImages (), que coloca las imágenes en pantalla, y comienza el juego..
Agregue lo siguiente debajo de setImages () función.
función infoLoaded (datos)
los datos El parámetro mantendrá el JSON de cada foto en particular. Volveremos a esto en un momento; Por ahora solo usaremos esta función para llamar preloadImages () directamente. Anímate y agrega la llamada ahora:
función infoLoaded (data) preloadImages ();
preloadImages () los preloadImages () La función se utilizará para crear y precargar las imágenes para el inicio del juego y para cada nivel. Los cargamos para que no haya demora entre cuando mostramos las imágenes y cuando se están descargando..
Volveremos al código de precarga más tarde. Por ahora, solo crearemos las primeras 12 imágenes para el inicio del juego. Necesitamos una nueva matriz para contener estas 12 imágenes, así que agregue lo siguiente a su flickrGame objeto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], TempImages: []
Asegúrate de agregar una coma después de imageArray: [].
los tempImages matriz se utiliza para mantener 12 imágenes a la vez. Nuestro juego usa 12 imágenes por nivel, y el imageArray guarda hasta 36 imágenes (según la cantidad que configuramos en nuestra búsqueda en Flickr). Así que vamos a agarrar 12 imágenes de la imageArray y guardarlos en tempImages.
Agregue el siguiente código debajo de infoLoaded () Función que has añadido en el paso anterior..
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); para (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage);
Aquí utilizamos el método javascript. empalme() para sacar 12 imágenes de la imageArray, y colocarlos en el tempImages formación. Entonces usamos un anidado para loop para crear 24 imagenes.
Para cada una de estas 24 imágenes, creamos un nuevo Imagen, establecer su src a "cardFront.png" (una imagen que verá antes de voltear la tarjeta), cree una nueva propiedad llamada fuente de imagen que contiene la URL de la imagen real de Flickr que se mostrará, y luego insértela en la matriz las imagenes.
Necesitamos añadir las imagenes para nuestro flickrGame objeto, hazlo ahora.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], TempImages: [], theImages: []
Asegúrate de agregar la coma después de tempImages [].
Sigamos adelante y llamemos al drawImages () funciona también; Una vez que lo hayamos escrito, esto representará las imágenes en la pantalla. Agregue lo siguiente después de anidado para bucle en el preloadImages () función.
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); para (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
los drawImages () La función realmente pone las imágenes en pantalla. Primero barajamos las imágenes en el las imagenes matriz utilizando una función llamada randSort y luego añadirlos a la #gamediv sección del HTML.
Introduzca el siguiente código debajo de flickrGame definición del objeto:
function randOrd () return (Math.round (Math.random ()) - 0.5);
Esta función se utiliza para barajar las imágenes. Llamaremos JavaScript's ordenar() método en una matriz y pasar randOrd como el parametro. Esto funciona básicamente de la misma manera que se describe en "El enfoque de clasificación" en este artículo..
Agregue lo siguiente debajo de preloadImages () Función que agregó en el paso anterior:
function drawImages () flickrGame.theImages.sort (randOrd); para (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); Llamamos al método de clasificación en las imagenes, pasando en nuestro randOrd función, luego en bucle las imagenes, adjuntando cada imagen a la #gamediv.
Utilizamos el método jQuery. .attr para agregar una clase de "tarjeta" a cada imagen. ¿Por qué? Porque cuando terminamos un nivel, quitamos las cartas de la #gamediv; Esto nos da una manera de apuntar solo las cartas y no todos imagenes.
Aquí hay enlaces a los métodos attr () y appendTo () de jQuery para que pueda aprender más sobre ellos.
Deberíamos estar listos para obtener algunas tarjetas en la pantalla en este momento. Después de la .cada() llamar setImages llama a infoLoaded () funciona y prueba la pagina.
function setImages (data) $ .each (data.photos.photo, function (i, item) var imageURL = 'http: // farm' + item.farm + '.static.flickr.com /' + item. server + '/' + item.id + '_' + item.secret + '_' + 'q.jpg'; flickrGame.imageArray.push (imageUrl: imageURL, photoid: item.id);); infoLoaded ();
Si todo va bien, debería ver 24 imágenes con el logotipo de Flickr en la pantalla. Puede tomar un momento antes de que aparezcan, porque estamos llamando a la API de Flickr y también estamos cargando las imágenes..
Haremos un pequeño cambio en el código para que podamos ver las imágenes reales por ahora. Modificar el preloadImages () función para mostrar la imagen real en lugar de "cardFront.png":
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); para (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = flickrGame.tempImages[i].imageUrl; //"cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
Prueba el juego ahora.
los addListeners () La función agregará un detector de clics a cada una de las imágenes que llaman a una función. doFlip (), que a su vez revelará la imagen debajo (si el logotipo se muestra actualmente).
Agregue lo siguiente debajo de drawImages () Función que agregó en el paso anterior:
función addListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).on("click", function (e) doFlip(e); ); Añadimos los oyentes en el drawImages () función:
function drawImages () flickrGame.theImages.sort (randOrd); para (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); También necesitamos una forma de eliminar los escuchas de clic de las imágenes. Agregue lo siguiente debajo de addListeners () Función que has añadido en el paso anterior..
función removeListeners () for (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).off("click"); doFlip () los doFlip () La función se llama cuando el usuario hace clic en una de las imágenes. Muestra las imágenes grandes a la izquierda y derecha del área principal de gamplay, y luego llama a una función checkForMatch () que comprueba si las imágenes coinciden.
Agregue lo siguiente debajo de removeListeners () Función que has añadido en el paso anterior..
función doFlip (e) var theCard = e.target; $ (theCard) .attr ("src", theCard.imageSource); if ($ ('# # image1'). css ('backgroundImage') == "none") $ ('# # image1'). css ('backgroundImage', 'url (' + theCard.imageSource + ')') ; else $ ('# image2'). css ('backgroundImage', 'url (' + theCard.imageSource + ')'); if (flickrGame.chosenCards.indexOf (theCard) == -1) flickrGame.chosenCards.push (theCard); $ (theCard) .off ("clic"); if (flickrGame.chosenCards.length == 2) removeListeners (); checkForMatch (); Primero obtenemos una referencia a la tarjeta en la que se hizo clic y configuramos su src atributo a la URL de la imagen real (en lugar del logotipo de Flickr).
Luego verificamos si el fondo CSS de la imagen grande a la izquierda (# image1) es igual a "ninguno", y si es así, configuramos su imagen de fondo a la misma imagen que la tarjeta en la que hicimos clic. Si no es igual a "ninguno", significa que se ha hecho clic en una tarjeta, por lo que configuramos la imagen de fondo de la imagen grande en la Correcto.
Comprobamos que el cartas elegidas La matriz (que agregaremos en un momento) no contiene esta tarjeta, para un mantenimiento seguro, y luego la empuja hacia la matriz. También eliminamos el evento de clic de la tarjeta para que no puedan volver a hacer clic..
Si el cartas elegidas la longitud es igual a 2 significa que el usuario ha elegido dos tarjetas, por lo que llamamos removeListeners () para eliminar el evento de clic del resto de las tarjetas y llamar al checkForMatch () función (que codificaremos en el siguiente paso) para ver si las tarjetas seleccionadas coinciden.
Necesitamos agregar el cartas elegidas arreglo a nuestro flickrGame objeto, así que hazlo ahora:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], TempImages: [], theImages: [], chosenCards: []
Asegúrate de agregar una coma después de las imagenes[].
checkForMatch () los checkForMatch () La función verifica si las dos tarjetas pulsadas coinciden. Si lo hacen, entonces los "escondemos"; si no lo hacen, agregamos a los oyentes a las cartas restantes y dejamos que el jugador tenga otra oportunidad..
Agregue lo siguiente debajo de doFlip () Función que agregó en el paso anterior:
Función checkForMatch () if (flickrGame.chosenCards.length == 2) if ($ ("# # image1"). css ('background-image') == $ ("# image2"). css ('background- imagen ')) setTimeout (hideCards, 1000); else setTimeout (resetImages, 1000); Aquí, comprobamos si el cartas elegidas la longitud es igual a 2. Si lo es, verificamos si las dos imágenes grandes son iguales usando sus imagen de fondo. (Podríamos haber usado las imágenes más pequeñas en su lugar; como ejercicio, vea si puede hacer esto).
Si las imágenes coinciden, usamos setTimeout () llamar al Ocultar las tarjetas() funcionar después de un segundo; de lo contrario llamamos resetImages () después de un segundo. Al retrasar estas llamadas de función, agregamos una breve pausa al juego..
Codificaremos las funciones para ocultar las tarjetas y restablecer las imágenes a continuación..
Ocultar las tarjetas() Si el usuario emparejó dos tarjetas, las ocultamos y agregamos los escuchas de clic al resto de las tarjetas.
Agregue el siguiente código debajo de checkForMatch () Función que creaste en el paso anterior:
function hideCards () $ (flickrGame.chosenCards [0]). animate ('opacity': '0'); $ (flickrGame.chosenCards [1]). animate ('opacity': '0'); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [0]), 1); flickrGame.theImages.splice (flickrGame.theImages.indexOf (flickrGame.chosenCards [1]), 1); $ ("# image1"). css ('background-image', 'none'); $ ("# image2"). css ('background-image', 'none'); addListeners (); flickrGame.chosenCards = new Array (); Usamos el método animate () de jQuery para interpolar la opacidad de ambas cartas a 0, haciendo que parezcan desaparecer. También eliminamos las imágenes de la las imagenes matriz, reinicie los fondos de las imágenes grandes a "ninguno", agregue los oyentes de nuevo a las otras imágenes y restablezca nuestra cartas elegidas formación.
Pruébalo aquí.
resetImages () Esta función se ejecuta si las dos imágenes seleccionadas no coinciden. Se restablecen las pequeñas imágenes ' src los atributos vuelven a "cardFront.png", establecen el fondo de las imágenes grandes a "ninguno", agregan a los oyentes a las tarjetas y restablecen la cartas elegidas formación.
Agregue lo siguiente debajo de Ocultar las tarjetas Función que has añadido en el paso anterior..
function resetImages () $ (flickrGame.chosenCards [0]). attr ("src", "cardFront.png"); $ (flickrGame.chosenCards [1]). attr ("src", "cardFront.png"); $ ("# image1"). css ('background-image', 'none'); $ ("# image2"). css ('background-image', 'none'); addListeners (); flickrGame.chosenCards = new Array (); Puedes jugar al juego ahora, excepto que las imágenes se muestran. Para cambiar eso de nuevo, modifica la preloadImages () funciona como tal:
function preloadImages () flickrGame.tempImages = flickrGame.imageArray.splice (0, 12); para (var i = 0; i < flickrGame.tempImages.length; i++) for (var j = 0; j < 2; j++) var tempImage = new Image(); tempImage.src = "cardFront.png"; tempImage.imageSource = flickrGame.tempImages[i].imageUrl; flickrGame.theImages.push(tempImage); drawImages();
(Es bueno cambiar esto de un lado a otro para facilitar las pruebas).
Aquí está el resultado!
Ese es el final de la primera parte de este tutorial. Hasta ahora, has hecho un juego funcional de HTML5; en la siguiente parte, agregará pulido, aprendiendo a:
Hasta entonces!
