Descripción del juego "El Barco" [1]

Se trata de un juego similar al tradicional juego de "El Ahorcado".

Crea tus propios juegos

El objetivo de este documento es facilitarte el aprendizaje y conocer el funcionamiento de los juegos para que así puedas crear los tuyos propios. No necesitas tener conocimientos avanzados sobre programación para la creación de estos juegos, así que no te preocupes por ello. Como ejemplo, puedes cambiar la imagen del barco por algo diferente. Las imágenes del barco son:

ship0.png
ship0.png
ship1.png
ship2.png
ship3.png
ship4.png
ship5.png
ship6.png
ship7.png

En caso de que cambies las referencias en el código del programa por ship0.png con una imagen diferente, cambiarás un poco el juego. Además, puedes aprender sobre cómo funcionan las diferentes partes del programa para así poder experimentar y realizar tus propios juegos similares a este. Por supuesto, nos gustaría que los compartas para que todo el mundo pueda utilizarlos.

¿Qué necesitas saber para comenzar?

El juego de "El Barco" utiliza programación Javascript y HTML estándar. Javascript es un lenguaje de programa de ordenador utilizado por los servidores web para crear las páginas interactivas compuestas por etiquetas HTML.

En este juego, los jugadores deben adivinar la palabra escondida eligiendo una letra cada vez. Los caracteres subrayados muestran el número de letras que componen la palabra. El jugador debe utilizar el ratón para seleccionar las letras del alfabeto bajo la palagra que se debe adivinar.

Si la letra elegida por el jugador es correcta, se mostrará la letra dicha letra en la pantalla.

Si la letra elegida por el jugador no es correcta, el barco se hunde un poco.

El barco se hundirá completamente después de siete intentos fallidos y en pantalla aparecerá un aviso notificando que el jugador no ha tenido éxito. El número de intentos restantes aparece reflejado en el apartado "Número de Intentos".

Si el jugador consigue adivinar la palabra, se mostrará en pantalla un mensaje indicando que el jugador ha tenido éxito. El tiempo que ha necesitado el jugador para adivinar la palabra correctamente también apaarecerá junto con un mensaje que pregunta si se desea volver a jugar.

El jugador puede utilizar el botón de "Ayuda" que le proporcionará una pista o descripción sobre la palabra oculta. El juego utiliza una base de datos de palabras relacionadas con la tecnología de ordenadores. Otra forma sencilla de cambiar el juego puede ser cambiar las palabras por un tema diferente, por ejemplo, todas las palabras deben estar relacionadas con capitales de ciudades o palabras relacionadas con la biología.

La "Guía del Profesor" es un enlace a una breve descripción sobre el juego y su propósito es servir de apoyo para los certificados de Ingot.

¿Dónde está el código del programa?

Javascript funciona en una página web, haz click aquí [2] para guardar el juego de El Barco en tu navegador. Debajo encontrarás una barra de menú para ver el código fuente en la página. Puede aparecer de forma un poco diferente dependiendo del navegador utilizado. El ejemplo de abajo se muestra con el navegador Firefox.

Pinchando con el botón derecho del ratón sobre el enlace [2] de la página aparecerá un menú y debes seleccionar "Vista Fuente" (el texto puede variar ligeramente depediendo del navegador utilizado, el texto "Vista Fuente" hace referencia al navegador Internet Explorar, puesto que Mozilla Firefox utiliza el texto "Página Fuente").

El texto está marcado utilizando los comandos estándar de Windows OS ( CTRL+A) y copiado en el tablraeo (CTRL+C). Cualquier editor de texto capaz de procesar el texto completo está abierto (el programa Notepad, que es parte de Windows OS) y el texto se copia en el programa desde el teclado (CTRL+V).

El texto en el editor de Word se guarda en un archivo, al que puedes nombrar como quieras pero debe tener una extensión de "html" o "htm". HTM es la extensión estándar de los archivos que pueden abrirse con un navegador de Internet. Los navegadores de Internet solamente convierten el contenido en un archivo HTML para que pueda ser visualizado como una página web, siempre y cuando tu navegador sea capaz de encontrar un archivo HTML. Esto ocurre normalmente en un servidor de Internet pero también puede localizarse en tu disco duro local.

Otro archivo esencial es "wordlist.js" ya que contiene una base de datos sobre las palabras que el jugador debe adivinar, además del texto de la aplicación de Ayuda. El archivo puede descargarse eliminando el "ship.htm" de la barra de búsqueda de tu navegador y remplazarlo por "wordlist.js". De esta forma, el navegador busca el archivo y puesto que no se trata de un archivo HTML, asumirá que quieres descargarlo.

(Ejemplo: cambia www.ingot.org/javascript/ship/ship.htm [3] por www.ingot.org/javascript/ship/wordlist.js [4])

Pulsando la tecla "Intro" de tu teclado, aparecerá un aviso en pantalla para guardar archivo. Debes guardar dicho archivo con el mismo nombre y extensión dentro del mismo directorio que contiene en archivo anterior para que de esta forma, el código en JavaScript coincida con los nombres y ubicaciones adecuadas.

Por último, las imágenes son una parte esencial del juego.

La lista de imágenes es la siguiente:

ship0.png

ship1.png

ship2.png

ship3.png

ship4.png

ship5.png

ship6.png

ship7.png

(Éstas son las imágenes que dan lugar al hundimiento del barco)

pozadi.jpg

(Ésta imagen es la plantilla de fondo)

Las imágenes pueden descargarse de una forma similar al archivo "wordlist.js", pero deben guardarse en un subdirectorio que debes crear y llamarlo "images".

(Ejemplo: www.ingot.org/javascript/ship/ship.htm [3] por www.ingot.org/javascript/ship/images/ship0.png [5])

Esta acción es necesaria para que los nombres en el código coincidan de nuevo con las ubicaciones en las que se almacena la información.

Para comprobar que todo funciona correctamente, haz una prueba haciendo doble click en el archivo "ship.htm".

¿Cómo cambiar las palabras del juego?

El archivo "wordlist.js" contiene las palabras que necesitamos para el juego y que están almacenadas en una variable del programa JavaScript llamada "Wordlist". Una variable es el almacenamiento de cualquier información que pueda cambiar. En este caso, la lista de palabras (wordlist) puede cambiarse para crear juegos diferentes y aprender así diferentes grupos de palabras. En estos grupos las palabras deben estar siempre separadas por un espacio y la lista completa debe llevar comillas (" ").

(Ejemplo: WordList="antivirus audacia")

Intenta crear un juego con palabras relacionadas con la ciencia o las matemáticas, o si te crees capaz, crea un juego con palabras en un idioma diferente al tuyo.

¿Cómo cambiar las imágenes?

Puedes reemplazar las imágenes utilizadas en el juego por tus propias imágenes. La plantilla de fondo del juego también puede ser modificada al igual que los diferentes escenarios del hundimiento del barco, y si lo deseas, también puedes crear un tipo de barco diferente.

Aquí tienes algunas reglas que debes seguir para ello:

La ubicación de los archivos de imágenes debe tener el mismo nombre y extensión.

Las imágenes de "ship0.png" a "ship7.png" deben tener un fondo transparente. Esto se debe a que los archivos de extensión .png pueden tener transparencias (algunos tipos de navegador pueden no mostrarlas). Los archivos .jpg no tienen transparencias pero pueden comprimirse más que los anteriores para ahorrar espacio y poder subirlos a la web con mayor velocidad.

El fondo del juego es simplemente una plantilla formada por partes repetidas.
Las nuevas imágenes deben tener un tamaño idéntico en píxeles al original para que funciona correctamente.

¿Cómo realizar cambios más avanzados?

Los cambios arriba mencionados no requieren ningún conocimiento avanzado sobre el lenguaje de programación JavaScript. Sin embargo, con un mínimo conocimiento del mismo puedes hacer numerosos cambios y no necesitas aprenderlo todo para ser capaz de crear cosas útilies.

¿Cómo nombrar las imágenes, los archivos y su ubicación?

El código del programa en el archivo ship.htm contiene pautas que utilizan los nombres de los archivos y su ubicación. Puedes encontrarlos abriendo el archivo ship.htm en un editor de texto y buscando la palabra. Los programadores llaman serie o cadena a las palabras y las series similares de números y letras.

El nombre de la imagen de fondo utilizada en al juego del barco se atribuye mediante el siguiente comando HTML:

Comprueba que puedes encontrar esta serie en tu archivo.

Si deseas utilizar nombres diferentes para tu imagen de fondo, necesitarás buscar todas las veces que el archivo pozadi.jpg aparezca en el archivo ship.htm y sustituirlo con un nombre nuevo, lo que es más rápido y sencillo en el editor de textos. Comprueba que la serie de pozadi solo aparece una vez en el archivo.

Para cambiar la imagen de fondo puedes cambiar el archivo pozadi.jpg en el directorio de imágenes para nombrar un archivo como "Sailing Boat.jpg" y cambiar el códico por ship.htm desde background="images/pozadi.jpg" a background="images/Sailing Boat.jpg".

Al guardar los cambios deberás conseguir un juego idéntico pero con una nueva imagen de fondo.

(Pista: ¡Guarda siempre una copia del archivo original por si cometes un error y ocurre algo inesperado!)

Los nombres de las imágenes del hundimiento del barco están guardados en un tipo de variable, una Matriz o Array. Una Matriz es una lista de objetos y el código para ellos en JavaScript es Matriz (N), en el que N equivale al número de objetos que componen la lista. Puesto que la lista comienza desde 0 y va aumentando correlativcamente a 0, 1, 2, 3. Matriz (4) tiene 4 espacios en la lista Matriz (0), Matriz(1), Matriz(2) y Matriz(3). Por lo tanto, en nuestro Barco de JavaScript la Matriz para almacenar la lista de imágenes es Matriz (8) porque son 8 las imágenes que componen el hundimiento del barco.

Intenta buscar tu archivo de Matriz (8). Deberías encontrarlo como parte del siguiente código:

Pic = new Array(8);

Este código le dice al programa que queremos que establezca una nueva matriz llamada Pic con 8 espacios en la lista. ( 0 ----> 7)

De esta forma, la matriz Pic será un simple conjunto de espacios en algún lugar en la memoria del ordenador preparado para almacenar 8 imágenes. Llegados a este punto, el programa simplemente crea enlaces a las imágenes para que así pueda encontrarlas fácilmente. Las imágenes pueden ser de cualquier cosa, pero si tenemos en cuenta que este juego trata sobre el hundimiento de un barco, es lógico que en las imágenes utilizadas para el juego aparece un barco en 8 posiciones diferentes simulando su hundimiento.

Un poco de programación

Si deseamos cambiar un cierto número de imágenes, por ejemplo, para darle más intentos al jugador y hacer que el hundimiento del barco sea más gradual, la cosa se complica un poquito. Necesitamos una forma de decirle a la página web que seleccione un número de imágenes del archivo de imágenes y las muestre de fondo cada vez que el jugador escoja una letra.

El código de programa que aparece en las próximas dos líneas se llama "bucle" y se utiliza para realizar tareas que se repiten.

for (n=0; n<8; n++)

{ Pic[n] = new Image(); Pic[n].src = "images/ship"+n+".png"; }

Esta secuencia le dice al ordenador que debe empezar la cuenta desde 0. (n=0)

Después de realizar las instrucciones en el { } utilizando el valor actual de n y comprobando que n es menor de 8 y así hacerlo uno mayor. Sigue las instrucciones en {} utilizando el valor actual de n, que ahora es 1 y continúa repitiéndose hasta que n sea igual a 8.

La parte en que { } Pic[n].src ="images/ship"+n+".png"; dirige la página web al directorio de imágenes y obtiene el archivo shipn.png. Este archivo será ship0.png, ship1.png, etc puesto que el programa sigue un bucle. La primera parte de las instrucciones consiste en almacenar cada una de las imágenes en la matriz lista para su utilización.

Para cambiar el número de imágenes deberemos cambiar el número 8 en la Matriz y también en el programa.

Comentarios en el programa

Como mencionamos anteriormente, el juego está escrito utilizando comandos de Javascript y HTML. Breves descripciones de ayuda sobre las funciones y los elementos, y las descripciones de las variables están escritas directamente en el código (en los comandos). Para entender su funcionamiento es necesario tener conocimientos básicos sobre programación Javascript y HTML.

(Ejemplo:

wordlist - la variable en el archivo wordlist.js contiene la lista de palabras

)

En la línea 9 en el archivo "ship.htm" se encuentra el siguiente comando:

El comando contiene instrucciones y procedimientos del archivo "wordlist.js" utilizados para el arranque del archivo de "ship.htm".

Los programadores con más experiencia pueden utilizar un nombre diferente para el archivo y deben cambiarlo en este comando..

El siguiente procedimiento muestra los pasos a seguir con el teclado:

//Event Keydown return keycode

if (window.event) KeyDown(window.event.keyCode);

</script>

El siguiente procedimiento reconoce la letra correcta y los clicks en la tabla ASCII:

// detection pressed key

function KeyDown(whichkey)

{ if (IsOver) return;

if ((whichkey>64)&&(whichkey<91)) Click(String.fromCharCode(whichkey));

if ((whichkey>96)&&(whichkey<123)) Click(String.fromCharCode(whichkey-32));

}

La siguiente lista contiene las variables y el bucle que leerá las imágenes en el archivo:

n - start initial variable for cycle

m - end initial variable for cycle (number of attempts is <8)

IsOver - true if game is over

Moves - actual attempt

Letters - guessed letters

Word - word which is displayed

StartTime - start time

EndTime - end time

var n, m, IsOver=true, Moves, Letters, Word, StartTime, EndTime;

// Pic - field containing images

Pic = new Array(8);

for (n=0; n<8; n++)

{ Pic[n] = new Image(); Pic[n].src = "images/ship"+n+".png"; }

La siguiente función "Init" configura las variables, arranca el juego, y selecciona al azar la palabra escondida:

function Init()

ii - start initial variable for cycle

jj - variable displaying letters in cycle (A-Z is charcode between 65 - 90)

wordlist - variable in file wordlist.js containing list of words

{ var ii, jj;

if (!IsOver)

{ if (! confirm("Deseas abandonar el juego?"))

return;

}

document.Options.attempt.value=7;

IsOver=false;

Moves=0;

Letters="";

for (ii=65; ii<91; ii++)

{ jj=String.fromCharCode(ii);

document.Options[jj].value=jj;

}

{ do ii=Math.round(Math.random()*WordList.length);

while (WordList.charAt(ii)==" ");

while (WordList.charAt(ii)!=" ") ii--;

jj=++ii;

while (WordList.charAt(jj)!=" ") jj++;

Word=WordList.substring(ii, jj).toUpperCase();

}

while ((Word.length<5)||(Word.length>9))

var ii, ss=" ";

for (ii=0; ii<Word.length; ii++) ss+="_ ";

document.Options.TWord.value=ss;

document.images[0].src=Pic[Moves].src;

Now = new Date();

StartTime = Now.getTime() / 1000;

document.Options.TWord.focus();

document.Options.TWord.blur();

}

La siguiente función "Click" reconoce la letra que ha sido seleccionada, muestra si la palabra escondida contiene dicha letra, y muestra los resultados en caso de que se adivine la palabra correctamente o se hayan agotado el número de intentos:

//action after click on any button

function Click(cc)

ii - start initial variable for cycle

ss - variable displaying actual result in button Tword of guess word

{ var ii, ss=" ";

document.Options.TWord.focus();

document.Options.TWord.blur();

if (IsOver) return;

if (Letters.indexOf(cc)>=0) return;

document.Options[cc].value=" ";

Letters+=cc;

if (Word.indexOf(cc)>=0)

{ for (ii=0; ii<Word.length; ii++)

{ if (Letters.indexOf(Word.charAt(ii))>=0) ss+=Word.charAt(ii)+" ";

else ss+="_ ";

}

document.Options.TWord.value=ss;

if (ss.indexOf("_")<0)

{ IsOver=true;

Now = new Date();

EndTime = Now.getTime() / 1000;

ii=Math.floor(EndTime - StartTime);

if (window.opener)

{ if (window.opener.SetHighscores)

window.opener.SetHighscores("Hangman","",ii,-1);

}

if (confirm("Super, you solved this game in "+ii+" seconds !\nPlay again ?")) Init();

}

else

{ document.Options.attempt.value--;

Moves++;

document.images[0].src=Pic[Moves].src;

if (Moves==7)

{ IsOver=true;

alert("¡Has perdido!\nLa palabra era "+Palabra+".");

}

El siguiente código HTML muestra los propios elementos del juego y los gráficos, y además, configura los pasos de los clicks:

</head>

El número de intentos es: 

<!- attempt - name of button displaying number off attempts ->

<!- napoveda - name button diplaying link on help ->

<a href="teachers_guide.htm" target="_blank">Teachers Guide</a>

</p>

<tr>

<!- Tword - name of button displaying guessed word ->

</table>

</td>

</table>

</td>

</tr>

<!- Buttons displaying letters of alphabet ->

</td></tr>

</form>

El siguiente código supone el comienzo de la función del juego:

Init();

</script>

</BODY>

</HTML>

Una lista de palabras variable en el archivo wordlist.js contiene la lista de las palabras escondidas.

//lisa de palabras utilizadas en el juego

WordList=" antivirus audacity ordenador copyright visor puerto archivo firefox flash hardware inkscape internet teclado licencia linux malware memoria monitor ratón openoffice opensource propietario contraseña plataforma impresora procesador seguridad escáner seguridad smartphone software estándar almacenamiento touchpad trackball virus windows";

La función "Disphelp" en el archivo wordlist.js muestra una ventana con un texto de ayuda en el que se describe la palabra escondida.

//ventana con texto de ayudat

function DispHelp(sel_word)

{

odkud="\n\nsource: De Wikipedia, la Enciclopedia libre";

//sel_word - displayed word

switch (sel_word)

{

case "ANTIVIRUS":

alert("Este software se utiliza para prevenir, detectar y eliminar todo tipo de malware, incluyendo virus de ordenador, gusanos y troyanos. También puede prevenir y eliminar el adware, spyware y otras formas de malware."+odkud);

break;

case "AUDACITY":

alert("Un editor y grabador de audio digital. Es una aplicación gratuita, software libre y multiplataforma, y está disponible para Windows, Mac OS X, Linux and BSD."+odkud);

break;

case "ORDENADOR":

alert("Un aparato que procesa información a partir de una serie de instrucciones dadas."+odkud);

break;

case "COPYRIGHT":

alert("Un tipo de "propiedad intelectual". La persona que crea un trabajo tiene el derecho de establecer cómo debe ser utilizado dicho trabajo, lo cual incluye su publicación, distribución y si puede o no ser modificado."+odkud);

break;

case "VISOR":

alert("Se trata de un dispositivo de salida para la presentación visual de la información, la recepción táctil o auditiva, precisa, guardada o transmitida de varias formas. Cuando la información de entrada se suministra como una señal eléctrica, se le llama visor electrónico."+odkud);

break;

case "PUERTO":

alert("Un dispositivo utilizado para grabar y recuperar información, como por ejemplo, un disco duro, una disquetera, puertos USB y discos ópticos."+odkud);

break;

case "ARCHIVO":

alert("Se trata de un bloque de información almacenada en el ordenador o fuente de almacenamiento, la cual es compatible con los programas de ordenador y normalmente se basa en algún tipo de almacenamiento duradero."+odkud);

break;

case "FIREFOX":

alert("Un navegador libre y gratuito basado en Mozilla Application Suite."+odkud);

break;

case "FLASH":

alert("Una plataforma multimedia de Adobe Corporation conocida por incluir animación e interactividad a las páginas web. Desde su introducción en el mercado en 1996, se ha convertido en un método popular para añadir animación e interactividad a las páginas web."+odkud);

break;

case "HARDWARE":

alert("Hace referencia a los componentes físicos de un sistema de ordenador."+odkud);

break;

case "INKSCAPE":

alert("Un programa de gráficos que puede producir y editar archivos gráficos vectoriales redimensionables (SVG). Se distribuye como una licencia de software libre, conocido como GNU GPL."+odkud);

break;

case "INTERNET":

alert("Un sistema global de redes de ordenadores interconectados que utilizan el TCP/IP y que sirven a millones de usuarios en todo el mundo."+odkud);

break;

case "TECLADO":

alert("Un dispositivo de entrada que permite teclear números y letras."+odkud);

break;

case "LICENCIA":

alert("Significa dar permiso que debe ser concedido por una parte hacia otra, como un acuerdo entre las dos partes. Es necesaria para tener acceso a un trabajo que dipsone de copyright."+odkud);

break;

case "LINUX":

alert("Se trata de un término genérico que hace referencia a los sistemas operativos Unix-like basados en Linux kernel. Su desarrollo es uno de los ejemplos más prominentes de colaboración en software libre y gratuito. Como de costumbre, todos los códigos fuente pueden utilizarse y modificarse de forma gratuita, y además, pueden ser distribuidos comercialmente o no por cualquiera de las licencias tipo GNU GPL."+odkud);

break;

case "MALWARE":

alert("Un tipo de software malicioso que está diseñado para infiltrar o dañar el sistema del ordenador sin el consentimiento del propietario."+odkud);

break;

case "MEMORIA":

alert("Parte del ordenador que almacena, retiene y activa la información."+odkud);

break;

case "MONITOR":

alert("Una pieza del equipo que muestra las imágenes generadas por los dispositivos como los ordenadores, sin producir una grabación permanente de dichas imágenes."+odkud);

break;

case "RATÓN":

alert("Un dispositivo de señalización utilizado para señalar opciones en un ordenador mediante la detección dimensional del movimiento."+odkud);

break;

case "OPENOFFICE":

alert("Se trata de una aplicación de fuente libre disponible para un gran número de ordenadores con sistemas operativos diferentes. Puede distribuirse como software libre utilizando su propio kit de herramientas GUI."+odkud);

break;

case "OPENSOURCE":

alert("Un software de ordenador para el que el código fuente y otros derechos normalmente reservados por los derechos de copyright se proporcionan bajo una licencia de software que es de dominio público."+odkud);

break;

case "PROPIETARIO":

alert("La persona que tiene el derecho legal para decidir cómo se ha de utilizar el recurso."+odkud);

break;

case "CONTRASEÑA":

alert("Una serie de caracteres secretos que previenen del acceso no autorizado a la información personal."+odkud);

break;

case "PLATAFORMA":

alert("Describe algún tipo de arquitectura de hardware o marco software que permite el funcionamiento del software."+odkud);

break;

case "IMPRESORA":

alert("Peripheral which produces a hard copy (permanent readable text and/or graphics) of documents stored in electronic form, usually on physical print media such as paper or transparencies."+odkud);

break;

case "PROCESADOR":

alert("There is a system which processes data which has been captured and encoded in a format recognizable by the data processing system or has been created and stored by another unit of an information processing system."+odkud);

break;

case "SEGURIDAD":

alert("There is the state of being 'safe', the condition of being protected against physical, social, spiritual, financial, political, emotional, occupational, psychological, educational or other types or consequences of failure, damage, error, accidents, harm or any other event which could be considered non-desirable."+odkud);

break;

case "ESCÁNER":

alert("There is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image."+odkud);

break;

case "PROTECCIÓN":

alert("There is the degree of protection against danger, loss, and criminals."+odkud);

break;

case "SMARTPHONE":

alert("There is a mobile phone offering advanced capabilities, often with PC-like functionality."+odkud);

break;

case "SOFTWARE":

alert("There is a general term used to describe the role that computer programs, procedures and documentation play in a computer system."+odkud);

break;

case "ESTÁNDAR":

alert("There is an established norm or requirement. It is usually a formal document that establishes uniform engineering or technical criteria, methods, processes and practices."+odkud);

break;

case "ALMACENAMIENTO":

alert("There is a device for recording (storing) information (data)."+odkud);

break;

case "TOUCHPAD":

alert("There is a pointing device consisting of specialized surface that can translate the motion and position of a user's fingers to a relative position on screen."+odkud);

break;

case "TRACKBALL":

alert("There is a pointing device consisting of a ball held by a socket containing sensors to detect a rotation of the ball about two axes-like an upside-down mouse with an exposed protruding ball."+odkud);

break;

case "VIRUS":

alert("There is a computer program that can copy itself and infect a computer."+odkud);

break;

case "WINDOWS":

alert("There is a series of software operating systems and graphical user interfaces produced by Microsoft."+odkud);

break;

}

Aprender Javascript mediante el uso de puzzles y juegos

Descripción del juego "El Barco" [1]

Crea tus propios juegos

¿Qué necesitas saber para comenzar?

¿Dónde está el código del programa?

(Ejemplo: www.ingot.org/javascript/ship/ship.htm [3] por www.ingot.org/javascript/ship/images/ship0.png [5])

¿Cómo cambiar las palabras del juego?

¿Cómo cambiar las imágenes?

¿Cómo realizar cambios más avanzados?

¿Cómo nombrar las imágenes, los archivos y su ubicación?

Un poco de programación

for (n=0; n<8; n++)

Comentarios en el programa