Share
En este tutorial, usaremos un juego de navegador básico (que incorporamos un tutorial Tuts + Premium), y agregaremos barras de progreso, un preloader, una pantalla de inicio y mucho más pulido..
En este tutorial de Tuts + Premium, creamos un juego básico de emparejamiento de tarjetas con JavaScript, cuyas imágenes provienen de Flickr. Echa un vistazo a la demostración:
Haz clic para probar el juego como está ahora..
En este tutorial, agregaremos mucho brillo al juego al implementar un precargador y una barra de progreso, una pantalla de inicio y una búsqueda de palabras clave. Echa un vistazo a cómo se desarrollará el juego:
Haz clic para probar el juego con las mejoras que agregaremos..
En este tutorial, aprenderá el JavaScript y HTML necesarios para codificar todas estas mejoras. Descarga los archivos fuente y extrae la carpeta llamada. Empieza aqui; Esto contiene todo el código del final del tutorial Premium..
En flickrgame.js hay una función llamada preloadImage (), que contiene esta línea:
tempImage.src = flickrGame.tempImages [i] .imageUrl;
Para propósitos de prueba, cámbielo a:
tempImage.src = "cardFront.jpg";
Esto mostrará las imágenes en las tarjetas todo el tiempo, lo que hace que las pruebas sean mucho más fáciles. Puedes cambiar esto en cualquier momento..
Ahora, sigue leyendo!
Accentsconagua
addKeyPress () Ahora mismo tenemos la etiqueta "dog" codificada, pero el juego se aburrirá rápidamente si obligamos al usuario a usar fotos de perros todo el tiempo!
La entrada de la búsqueda ha estado allí con un aspecto bonito, pero no ha funcionado todo este tiempo. Vamos a arreglar eso. Escucharemos al usuario para que presione la tecla Intro y luego llamemos al Búsqueda () Método utilizando lo que escribieron para llamar a la API de Flickr.
Agregue lo siguiente debajo de resetImages () función, en flickrgame.js.
function addKeyPress () $ (document) .on ("keypress", function (e) if (e.keyCode == 13) doSearch ();)); Aquí escuchamos una pulsación de tecla y si el clave es igual a 13, sabemos que presionaron la tecla Intro, así que llamamos al Búsqueda () función.
Necesitamos modificar el hacer una búsqueda Función para utilizar el texto en la entrada, por lo que realice los siguientes cambios:
función doSearch () if ($ ("(# searchterm"). val ()! = "") $ (document) .off ("keypress"); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Aquí, primero verificamos que la entrada no esté vacía (no queremos buscar nada), luego eliminamos pulsación de tecla oyente. Finalmente, alteramos el etiquetas usar el valor de la entrada.
Lo último que tenemos que hacer es eliminar la llamada a Búsqueda () en el archivo JS. Encuentra donde estamos llamando manualmente Búsqueda () y quitarlo. (Está justo después de la addKeyPress () función.)
No olvides llamar al addKeyPress () función. Lo llamé justo debajo de donde lo declaré..
function addKeyPress () $ (document) .on ("keypress", function (e) if (e.keyCode == 13) doSearch ();)); addKeyPress (); Ahora, si pruebas el juego, no verás ninguna imagen hasta que hagas una búsqueda..
Cuando hacemos nuestra primera llamada a la API de Flickr hay un ligero retraso. Mostraremos un GIF animado (un "zumbador") mientras contactamos con el servidor, y lo eliminaremos una vez que vuelva la llamada..
Agregue lo siguiente a la Búsqueda () función.
función doSearch () if ($ ("# searchterm"). val ()! = "") $ (document) .off ("keypress"); $ ("# infoprogress"). css ('visibilidad': 'visible'); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search"; searchURL + = "& api_key =" + flickrGame.APIKEY; searchURL + = "& tags =" + $ ("# searchterm"). val (); searchURL + = "& per_page = 36" searchURL + = "& license = 5,7"; searchURL + = "& format = json"; searchURL + = "& jsoncallback =?"; $ .getJSON (searchURL, setImages); Esto establece el #infoprogress div ser visible. Una vez que la información vuelva de Flickr, la esconderemos. Para ello, agregue el siguiente código a la setImages () función:
función setImages (datos) $ ("# infoprogress"). css ('visibilidad': 'oculto'); $ .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 prueba el juego ahora, debería ver la imagen del cargador mientras se comunica con la API de Flickr..
Necesitamos obtener la información de cada foto que usamos. Llamaremos al metodo = flickr.photos.getInfo en cada foto, y luego llame al infoLoaded () Funciona cada vez que se carga la información. Una vez que la información para cada La foto se ha cargado, el juego continúa como antes..
Aquí hay una gran cantidad de información nueva, por lo que la desglosaremos paso a paso. Primero, agregue lo siguiente a la setImages () función:
función setImages (datos) $ ("# infoprogress"). css ('visibilidad': 'oculto'); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibilidad': 'oculto'); $ .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); var getPhotoInfoURL = "http: // api .flickr.com / services / rest /? method = flickr.photos.getInfo "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; "; getPhotoInfoURL + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); else alert ("NO SE DEVOLVIERON SUFICIENTES"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Ahora que estamos recibiendo las etiquetas del usuario, debemos asegurarnos de que se hayan devuelto suficientes imágenes para crear un solo juego (12). Si es así, ocultamos la entrada para que el jugador no pueda hacer otra búsqueda a mitad del juego. Establecemos una variable getPhotoInfoURL y usar el metodo = flickr.photos.getInfo - Note que estamos usando el Identificación del artículo Para el identificación fotográfica. Entonces usamos el jQuery getJSON método y llamada infoLoaded.
Si no se devolvieron suficientes imágenes, lanzamos una alerta y llamamos. addKeyPress () para que el usuario pueda hacer otra búsqueda.
Por lo tanto, necesitamos saber cuántas imágenes se devolvieron de la llamada a la API de Flickr, y las almacenamos en la variable numerofotos devuelto, que añadimos a nuestro flickrGame objeto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], TempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0
(Asegúrate de agregar una coma después de cartas elegidas: [].)
Todavía no podemos probar; si lo hiciéramos estaríamos llamando preloadImages () 36 veces seguidas ya que es todo nuestro infoLoaded () La función hace en este momento. Definitivamente no es lo que queremos. En el siguiente paso haremos realidad la infoLoaded () función.
infoLoaded () los infoLoaded () La función recibe información sobre una sola foto. Añade la información a la imageArray para la foto correcta, y realiza un seguimiento de la cantidad de información de las fotos que se han cargado; si este numero es igual a numerofotos devuelto, llama preloadImages ().
Eliminar la llamada a preloadImages () y poner lo siguiente dentro de la infoLoaded () función:
flickrGame.imageNum + = 1; índice var = 0; para (var i = 0; i < flickrGame.imageArray.length; i++) if (flickrGame.imageArray[i].photoid == data.photo.id) index = i; flickrGame.imageArray[index].username = data.photo.owner.username; flickrGame.imageArray[index].photoURL = data.photo.urls.url[0]._content; if (flickrGame.imageNum == flickrGame.numberPhotosReturned) preloadImages();
Aquí incrementamos la imageNum variable y establecer una variable índice igual a 0. Dentro del bucle for verificamos si el identificación fotográfica en el imageArray es igual a la data.photo.id (recuerda el datos es una representación JSON de la imagen actual que se está procesando). Si coinciden nos ponemos índice igual a yo y actualizar el índice apropiado en el imageArray con un nombre de usuario y fotoURL variable. Necesitaremos esta información cuando mostremos las atribuciones de la imagen más adelante..
Esto puede parecer un poco confuso, pero todo lo que estamos haciendo es hacer coincidir las fotos. Como no sabemos el orden en que serán devueltos desde el servidor, nos aseguramos de que coincidan con su ID, y luego podemos agregar el nombre de usuario y fotoURL variables a la foto.
Por último, comprobamos si imageNum es igual a la numerofotos devuelto, Y si lo es, entonces todas las imágenes han sido procesadas por lo que llamamos preloadImages ().
No olvides añadir el imageNum al flickrGame objeto.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0, imageNum: 0
(Asegúrese de agregar una coma después de la NúmeroFotosRegreso: 0.)
Si realiza la prueba ahora, tardará un poco más en ver las fotos. Además de llamar a la API de Flickr para recuperar las fotos, ahora obtenemos información sobre cada una de ellas..
En este paso obtendremos la barra de progreso que muestra cuando cargamos la información de la foto..
Agregue el siguiente código a la setImages () función:
función setImages (datos) $ ("# infoprogress"). css ('visibilidad': 'oculto'); $ ("# progressdiv"). css ('visibilidad': 'visible'); $ ("# progressdiv p"). text ("Cargando información de la foto"); if (data.photos.photo.length> = 12) $ ("# searchdiv"). css ('visibilidad': 'oculto'); $ .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); var getPhotoInfoURL = "http: // api .flickr.com / services / rest /? method = flickr.photos.getInfo "; getPhotoInfoURL + =" & api_key = "+ flickrGame.APIKEY; getPhotoInfoURL + =" & photo_id = "+ item.id; getPhotoInfoURL + =" & format = json "; getPhotoInfoURL + =" & jsoncallback =? "; $ .getJSON (getPhotoInfoURL, infoLoaded);); else $ ("# progressdiv"). css ('visibilidad': 'oculto'); alerta ("NO HABERON SORPRENDIDAS SUFICIENTES"); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; Esto muestra el #progressdiv y cambia el texto del párrafo dentro de la #progressdiv para leer "Cargando información de la foto". Si no se devolvieron suficientes imágenes ocultamos el #progressdiv.
A continuación agregue lo siguiente a la infoLoaded () función:
function infoLoaded (data) flickrGame.imageNum + = 1; var porcentaje = Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); $ ("# progressbar"). progressbar (value: percent); índice var = 0; para (var i = 0; i < flickrGame.imageArray.length; i++) if (flickrGame.imageArray[i].photoid == data.photo.id) index = i flickrGame.imageArray[index].username = data.photo.owner.username; flickrGame.imageArray[index].photoURL = data.photo.urls.url[0]._content; if (flickrGame.imageNum == flickrGame.numberPhotosReturned) preloadImages(); Aquí ponemos una variable. porcentaje igual a Math.floor (flickrGame.imageNum / flickrGame.numberPhotosReturned * 100); Esto asegura que obtengamos un número entre 0 y 100. Luego llamamos $ ("# progressbar"). progressbar () y establecer el valor propiedad igual a porcentaje.
Ahora, si pruebas el juego, debería funcionar igual que antes, pero con una barra de progreso. Bueno, hay un problema: la barra de progreso se queda después de dibujar las imágenes. En el juego primero cargamos la información de la foto, luego cargamos las imágenes y ambos usamos la barra de progreso. Arreglaremos esto en el siguiente paso..
En este paso utilizaremos el complemento jQuery.imgpreload (ya está en la descarga de origen). Tan pronto como se haya cargado toda la información del archivo de los pasos anteriores, la barra de progreso se restablece y supervisa la carga de las imágenes.
Agregue lo siguiente a la 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); $("#progressdiv").css( 'visibility': 'visible' ); $("#progressdiv p").text("Loading Images"); var tempImageArray = []; for (var i = 0; i < flickrGame.tempImages.length; i++) tempImageArray.push(flickrGame.tempImages[i].imageUrl); $.imgpreload(tempImageArray, each: function () if ($(this).data('loaded')) flickrGame.numImagesLoaded++; var percentage = Math.floor(flickrGame.numImagesLoaded / flickrGame.totalImages * 100); $("#progressbar").progressbar( value: percentage ); , all: function () $("#progressdiv").css( 'visibility': 'hidden' ); drawImages(); ); Aquí ponemos la #progressdiv para ser visible y cambiar el párrafo para leer "Cargando imágenes". Configuramos una matriz temporal y le agregamos las URL de las imágenes temporales, luego pasamos la matriz completa a $ .imgpreload para iniciar la precarga.
los cada La función se ejecuta cada vez que se carga una foto, y la todos La función se ejecuta cuando todas las imágenes se han cargado previamente. Dentro cada() nos aseguramos de que la imagen se haya cargado realmente, incremente la numImagesLoaded variable, y use el mismo método para el porcentaje y la barra de progreso que antes. (Los Imágenes totales es 12 ya que cuantos estamos usando por juego.)
Una vez que todas las imágenes han sido precargadas (es decir, cuando todos() se ejecuta) establecemos el #progessdiv a escondido y llamar al drawImages () función.
Necesitamos agregar el numImagesLoaded y Imágenes totales variables a nuestro flickrGame objeto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberPhotosReturned: 0, imageNum: 0, numImagesLoaded: 0, totalImages: 12
(Asegúrate de agregar la coma después de imageNum.)
Si prueba el juego ahora, debería ver la barra de progreso tanto para la información de la foto como para la precarga de las imágenes..
Para cumplir con los términos de servicio de la API de Flickr, tenemos que mostrar las atribuciones de las imágenes que usamos. (También es educado hacerlo).
Agregue el siguiente código dentro del Ocultar las tarjetas() función:
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'); if (flickrGame.theImages.length == 0) $ ("# gamediv img.card"). remove (); $ ("# gamediv"). css ('visibilidad': 'oculto'); showAttributions (); addListeners (); flickrGame.chosenCards = new Array (); Aquí, verificamos si el número de imágenes que quedan es cero, y si es así, sabemos que el usuario ha coincidido con todas las tarjetas. Por lo tanto, eliminamos todas las tarjetas del DOM y configuramos el #gamediv estar escondido Entonces, llamamos al showAttributions () Función que codificaremos a continuación..
En este paso codificaremos la showAttributions () función.
Agregue lo siguiente debajo de checkForMatch () Función que codificaste en los pasos anteriores:
función showAttributions () $ ("# attributionsdiv"). css ('visibilidad': 'visible'); $ ("# attributionsdiv div"). each (function (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl). next (). html ( 'Nombre de usuario: '+ flickrGame.tempImages [index] .username +'
'+' Ver foto '); ); Aquí ponemos la #attributionsdiv para ser visible, y luego recorrer cada div dentro de él. Hay 12 divs, cada uno con una imagen y un párrafo; usamos jQuery encontrar() método para encontrar el img dentro de la div, establece el src de la imagen a la correcta URL de la imagen, y usar jQuery siguiente() método para establecer el nombre de usuario y fotoURL a la información de flickr.
Aquí hay enlaces a los métodos find () y next () de jQuery para que pueda aprender más sobre ellos.
Si prueba el juego ahora y juega a través de un nivel, verá las atribuciones con un enlace a la imagen en Flickr. También verá dos botones: uno para el siguiente nivel y otro para un juego nuevo. Conseguiremos que estos botones funcionen en los próximos pasos..
En nuestra llamada a la API de Flickr configuramos por página al 36, para solicitar tantas imágenes a la vez. Ya que estamos usando 12 imágenes por juego, esto significa que puede haber hasta tres niveles. En este paso conseguiremos que el botón Next Level funcione..
Agregue el siguiente código dentro del setImages () función:
function setImages (data) //… snip… flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);
Necesitamos saber cuántos niveles tendrá el juego. Esto depende de cuántas imágenes fueron devueltas de nuestra búsqueda. No siempre será 36. Por ejemplo, busqué "hmmmm" y me devolvió aproximadamente 21 fotos en ese momento. Nosotros usaremos Math.floor () Para redondear el número hacia abajo, no queremos 2.456787 niveles, después de todo, y eso desbarataría la lógica del juego..
Asegúrese de agregar el númeroNiveles variable a la flickrGame objeto:
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberImages:
(No olvides añadir la coma después de Imágenes totales: 12.)
Ahora modifica el drawImages () funciona de la siguiente manera:
function drawImages () flickrGame.currentLevel + = 1; $ ("# leveldiv"). css ('visibilidad': 'visible'). html ("Nivel" + flickrGame.currentLevel + "of" + flickrGame.numberLevels); flickrGame.theImages.sort (randOrd); para (var i = 0; i < flickrGame.theImages.length; i++) $(flickrGame.theImages[i]).attr("class", "card").appendTo("#gamediv"); addListeners(); Aquí incrementamos la nivel actual variable, establece el #leveldiv para ser visible y configurar el HTML del div para leer en qué nivel estamos y cuántos niveles hay.
Una vez más, necesitamos agregar el nivel actual variable a nuestro flickrGame objeto.
var flickrGame = APIKEY: "76656089429ab3a6b97d7c899ece839d", imageArray: [], tempImages: [], theImages: [], chosenCards: [], numberImages: L L currentLevel: 0
(Estoy seguro de que no necesitas recordarlo ahora, pero asegúrate de agregar la coma después de númeroNiveles: 0.)
Ahora modifica el showAttributions () función a lo siguiente:
función showAttributions () $ ("# leveldiv"). css ('visibilidad': 'oculto'); $ ("# attributionsdiv"). css ('visibilidad': 'visible'); if (flickrGame.currentLevel == flickrGame.numberLevels) $ ("# nextlevel_btn"). css ('visibilidad': 'oculto'); else $ ("# nextlevel_btn"). css ('visibilidad': 'visible'); $ ("# attributionsdiv div"). each (function (index) $ (this) .find ('img'). attr ('src', flickrGame.tempImages [index] .imageUrl); $ (this). encontrar ('p'). html ('Nombre de usuario: '+ flickrGame.tempImages [index] .username +'
'+' Ver foto '); ); Escondemos el #leveldiv estableciendo su visibilidad a oculto.
A continuación comprobamos si el nivel actual es igual a la númeroNiveles. Si son iguales, no hay más niveles disponibles, por lo que ocultamos el #nextlevel_btn; de lo contrario, lo mostramos.
Finalmente tenemos que conectar el #nextlevel_btn. Agregue el siguiente código debajo de addKeyPress () Función que creaste en el paso anterior:
$ ("# nextlevel_btn"). on ("click", function (e) $ (this) .css ('visibilidad': 'oculta'); $ ("# gamediv"). css ('visibilidad ':' visible '); $ ("# attributionsdiv"). css (' visibilidad ':' oculto '); flickrGame.numImagesLoaded = 0; preloadImages ();); Aquí escondemos el botón, revelamos el #gamediv, esconde el #attributionsdiv, restablecer el numImagesLoaded variable y llamada preloadImages () que agarra las siguientes 12 imagenes.
Puedes probar el juego ahora y deberías poder jugar a través de todos los niveles. Vamos a cablear el #newgame_btn en los próximos pasos.
Puedes comenzar un juego nuevo en cualquier momento, pero después de que se hayan jugado todos los niveles, esa es la única opción. En este paso cablearemos la #newgame_btn.
Agregue lo siguiente debajo del código para el #nextlevel_btn Usted agregó en el paso anterior:
$ ("# newgame_btn"). on ("click", function (e) $ ("# gamediv"). css ('visibilidad': 'visible'); $ ("# leveldiv"). css ( 'visibilidad': 'oculto'); $ ("# attributionsdiv"). css ('visibilidad': 'oculto'); $ ("# searchdiv"). css ('visibilidad': 'visible' ); $ ("# nextlevel_btn"). css ('visible': 'hidden'); flickrGame.imageNum = 0; flickrGame.numImagesLoaded = 0; flickrGame.imageArray = new Array (); flickrGame.currentLevel = 0 ; flickrGame.numberLevels = 0; addKeyPress ();); Aquí revelamos el #gamediv, esconde el #leveldiv y #attributionsdiv, revelar el #searchdiv, y esconder el #nextlevel_btn. Luego reiniciamos algunas variables, y llamamos addKeyPress () para que el usuario pueda buscar de nuevo.
Si haces la prueba ahora, deberías poder comenzar una nueva partida en cualquier momento, así como cuando se hayan jugado todos los niveles..
El juego está completo en cuanto a la jugabilidad, pero tenemos que mostrar una pantalla de inicio. Lo haremos en el siguiente paso..
Necesitamos hacer algunos cambios en nuestro archivo CSS. Específicamente, necesitamos establecer la #gamediv Visibilidad a oculta, y establecer el #introscreen a lo visible. Abierto styles / game.css y haz esos cambios ahora:
#gamediv posición: absoluta; izquierda: 150px; ancho: 600px; altura: 375px; borde: 1px negro sólido; relleno: 10px; color: # FF0080; visibilidad: oculta; fondo: #FFFFFF url ('… /pattern.png'); #introscreen position: absolute; izquierda: 150px; ancho: 600px; altura: 375px; borde: 1px negro sólido; relleno superior: 10px; color: # FF0080; visibilidad: visible; fondo: #FFFFFF url ('… /pattern.png'); relleno-izquierda: 80px; A continuación tenemos que cambiar el addKeyPress () función. Quitar todo de addKeyPress () y reemplazarlo con lo siguiente:
function addKeyPress () $ (document) .on ("keypress", function (e) if (e.keyCode == 13) if (! flickrGame.gameStarted) hideIntroScreen (); else else doSearch (); flickrGame.gameStarted = true;); Aquí verificamos si el usuario ha presionado la tecla Intro, luego verificamos si el juego ha comenzado. Si no lo hemos llamado hideIntroScreen (); de lo contrario, llamamos Búsqueda (); De cualquier manera, marcamos el juego como habiendo comenzado. Esto significa que la primera vez que el usuario presione Entrar, llamará. hideIntroScreen (), y la próxima vez que el usuario presione la tecla Intro, llamará Búsqueda ().
Ahora necesitamos codificar el hideIntroScreen () función. Agregue lo siguiente debajo de addKeyPress () función:
function hideIntroScreen () $ ("# gamediv"). css ('visibilidad': 'visible'); $ ("# introscreen"). css ('visibilidad': 'oculto'); Si prueba el juego ahora debería ver la pantalla de inicio; pulsa Intro y podrás jugar el juego como antes.
En este momento, si no se devuelven suficientes imágenes para un juego, se abrirá una alerta. Aunque esto funciona, podemos hacer que se vea un poco mejor usando el diálogo de jQuery UI.
Necesitamos editar index.html, así que ábralo y agregue el siguiente derecho dentro del #gamediv:
No se devolvieron suficientes imágenes, por favor intente una palabra clave diferente.
Ahora necesitamos atarlo. Agregue lo siguiente debajo de
hideIntroScreen ()Función en el archivo JS:$ ("# dialog"). dialog (autoOpen: false);Este código convierte el
#diálogodiv en un diálogo; deshabilitamos la característica de apertura automática.Queremos activar este cuadro de diálogo para abrir en lugar de la alerta que teníamos antes, así que elimine la alerta de
setImages ()Funciona y reemplázala con lo siguiente:else $ ("# progressdiv"). css ('visibilidad': 'oculto'); $ ("# dialog"). dialog ('abrir'); addKeyPress (); flickrGame.numberPhotosReturned = flickrGame.imageArray.length; flickrGame.numberLevels = Math.floor (flickrGame.numberPhotosReturned / 12);Ahora, si no se devuelven suficientes imágenes, aparece un diálogo de aspecto agradable, en lugar de usar una alerta que recuerda a las páginas web de los años 90..
No olvides cambiar esta linea, desde
preloadImages ():tempImage.src = "cardFront.jpg";... Volviendo a esto:
tempImage.src = flickrGame.tempImages [i] .imageUrl;... De lo contrario, el juego será un poco demasiado fácil.!
Ahora prueba el juego final. Si algo no está bien, siempre puedes comparar tu fuente con la mía o hacer una pregunta en los comentarios..
Conclusión
Hemos codificado un pequeño juego divertido con imágenes de la API de Flickr, y le hemos dado una capa o dos de pulido decente. Espero que hayas disfrutado este tutorial y hayas aprendido algo que valga la pena. Gracias por leer y divertirse.!
