Cómo aprender lenguaje Javascript usando el juego PEXESO – PARES
PEXESO – PARES
Esta página describe el juego "Pares".
Este juego está escrito en JavaScript y en HTML.
El juego se basa en el principio del juego de mesa populares - Pares. El objetivo del jugador es encontrar las dos cartas del mismo (o dos tarjetas con el mismo tema en la mezcla de la versión Pares).
El jugador puede hacer clic en la tarjeta y luego se puede ver la imagen. Cuando hace clic en las dos cartas con el mismo símbolo, las cartas se mantendrán visibles. Cuando las dos cartas son diferentes, no habrá marcha atrás.
El juego comienza haciendo clic en Iniciar y finaliza haciendo clic en Parar.
Antes de comenzar el juego, el jugador puede configurar el nivel de 0-9; el nivel de impacto el momento de mostrar las cartas. Durante el juego el jugador puede ver el tiempo medido, el número de intentos y el número de pares de fundada.
Ambas versiones del juego muestran los temas de TI - software gratuito y de pago. En la versión de "Pares", el jugador busca los mismos símbolos, en la versión de "Pares Mix" el jugador debe encontrar la misma función del software en la versión gratuita y de pago (un ejemplo de la pareja mixta es el editor de texto: Microsoft Word (software de pago) - Writer de Open Office (software libre).
El botón "Guía del Profesor" mostrará una breve descripción del juego y del objetivo dentro del proyecto Ingot.
Descarga del juego
El juego puede copiarse y modificarse según tus conocimientos:
Al hacer clic en el botón derecho del ratón, aparece un menú. Hay que seleccionar el elemento "Ver código fuente" (el texto del menú puede ser diferente según el navegador que se esté usando, por ejemplo, en Internet Explorer aparece "Ver código fuente" y en Mozilla Firefox aparece "Ver codigo fuente de la página".
Introduce el texto utilizando los comandos estándar de Windows OS (por ejemplo, CTRL + A) y copiarlo en el portapapeles (por ejemplo, CTRL + C). Abra cualquier editor de texto capaz de procesar texto sin formato (por ejemplo, el Bloc de notas, que forma parte del sistema operativo Windows) y pegar el texto en el editor desde el portapapeles (por ejemplo, CTRL + V).
Guarde el texto que aparece en el editor de Word como un archivo de cualquier nombre y utiliza "html" o la extensión "htm", que es el estándar para los archivos que se pueden abrir en cualquier navegador de Internet.
Código Javascript
El código Javascript se guarda en el archivo pexeso.js por separado.
Hay posibilidad de descargar el archivo cuando se sustituye „pexeso.htm“ por „pexeso.js“
Las imágenes son otra parte esencial del juego. Se almacenan en subcarpetas.
La lista es tal y como aparece a continuación:
Imágenes comunes:
0.gif, 1.gif , 2.gif , 3.gif , 4.gif , 5.gif, 6.gif, 7.gif, , 8.gif, 9.gif, 10.gif – fondos de imágenes
plusminus1.gif, plusminus2.gif, plusminus3.gif, plusminus4.gif – imágenes de los símbolos más y menos
startstop1.gif, startstop2.gif, startstop3.gif, startstop4.gif – imágenes de los botones iniciar y parar
attempts.gif, found.gif, level.gif, s.gif, time.gif – imágenes de los títulos
blank.gif, – imagen de fondo
card.png, – imagen del reverso de la carta
Cartas de la versión Pares
pic1.jpg , pic2.jpg , pic3.jpg, pic4.jpg , pic5.jpg , pic6.jpg, pic7.jpg , pic8.jpg – imágenes de las cartas de la versión Pares
Cartas para la versión Pares Mix
pic1a.jpg , pic2a.jpg , pic3a.jpg, pic4a.jpg , pic5a.jpg , pic6a.jpg, pic7a.jpg , pic8a.jpg
pic1b.jpg , pic2b.jpg , pic3b.jpg, pic4b.jpg , pic5b.jpg , pic6b.jpg, pic7b.jpg , pic8b.jpg – imágenes de las cartas para la versión Pares Mix
Las imágenes se pueden descargar cambiando la dirección en la barra del navegador: „pexeso.htm“ se sustituye por „images/0.gif“
(ejemplo: www.ingot.org/javascript/domino/ [1]pexeso.htm [1]to www.ingot.org/javascript/pexeso/images/ [2]0.g [2]if )
Después de hacer clic en "Intro" en el teclado, aparecerá un cuadro de diálogo para guardar el archivo. El archivo debe guardarse con el mismo nombre y extensión y dentro del mismo directorio del archivo anterior.
La imagen debe guardarse en el subdirectorio "imágenes", que debe crearse previamente.
La función correcta de todos los componentes descargados del juego deben verificarse con el archivo thepexeso.htm (o pexeso1.htm).
Sustituir imágenes
Las imágenes del juego se pueden reemplazar por las tuyas propias. El fondo del juego sólo se puede modificar con las siguientes condiciones:
- Los archivos de imagen deben tener un nombre y una extensión idénticas (los programadores expertos pueden usar un tipo diferente de archivo de imagen)
- El fondo del juego es una plantilla en forma de mosaico.
- El fondo del juego debe ser transparente (la descripción de esta característica está fuera del alcance de este manual pero puede encontrarse en la web)
- Las imágenes deben tener la misma anchura y altura medida en píxeles (la descripción de esta característica está fuera del alcance de este manual pero puede encontrarse en la web)
Cambios del nombre de directorio utilizando diferentes formatos de archivo de imagen
Si se pueden usar nombres diferentes para los archivos de imagen o los subdirectorios, es necesario modificarlos adecuadamente editando el archivo pexeso.htm. Esto lo realizan los programadores expertos.
En el archivo pexeso.js debe encontrarse lo siguiente: var IMG_PATH = "images/".
Lo que aparece en la barra puede reemplazarse por otro directorio en el que se almacenan imágenes. El directorio debe ser un subdirectorio de una carpeta en el que se encuentren los archivos pexeso.htm y pexeso.js
Todos los archivos "gif" presentes en el código deben reemplazarse por los suyos propios. El formato "gif" es el formato del archivo de las imágenes usadas. El formato de imagen puede reemplazarse por los formatos "png" o "jpg" (excepto el fondo, que debe ser transparente – la descripción de esta característica está fuera del alcance de este manual pero puede encontrarse en la web)
Breve descripción de las funciones del juego en lenguaje Javascript
Tal y como se mencionó anteriormente, el juego está escrito con comandos Javascript y HTML. En el código (en las líneas de comandos) se encuentran descripciones para funciones y elementos y de variables. Es necesario tener conocimientos básicos de Javascript y programación de HTML para entender la función.
El código Html de los gráficos, enlaces y botones está presente en el archivo pexeso.htm.
Código Javascript:
Definición de variables
// Game settings, check out pexeso.htm (line 8)
// <body bgcolor="#FFFF99" onload="loadImages(8, 0, 0);">
// | | |
// | | |-- highscore mode (js/php)
// | |----- game mode, see above
// |-------- count of image pairs
//
Configura la versión del juego:
Para la versión Pares, se selecciona el modo 0.
(La configuración se establece en el archivo pexeso.htm, en la línea: <BODY onload="loadImages(8, 0, 0);" >)
Para la versión Pares Mix, se selecciona el modo 1.
(La configuración se establece en el archivo pexeso.htm, en la línea: <BODY onload="loadImages(8, 1, 0);" >)
// game mode 0 : match of two identical pictures,
// filenames pic1.jpg, pic2.jpg ...
// game mode 1 : match of two similar pictures,
// filenames pic1a.jpg, pic1b.jpg, pic2a.jpg, pic2b.jpg ...
//
Aquí se puede establecer el directorio de imágenes:
var IMG_PATH = "images/"; // Ruta de las imágenes
var arrHighScore = new Array(); // Objetos puntuados
var imgBackside = new Image(); // Reverso de la carta
var imgArrStartStop = new Array(4); // Botón de Iniciar y Parar
var imgArrPlusMinus = new Array(4); // Botón de Más y Menos
var imgArrNumber = new Array(11); // Cifras del 0 al 9
var bRunning = false; // Estado del Juego
var nLevel = 4; // Nivel de velocidad
var nSeconds = 0; // Duración del juego en segundos
var nAttempts = 0; // Número de intentos
var nHit = 0; // Número de pistas
var nSelected1 = -1; // Primera imagen seleccionada
var nSelected2 = -1; // Segunda imagen seleccionada
var bShowCard = false; // Estado de la carta (descubierta o no)
var strPlayerName = "xxx"; // Nombre del jugador
var strDate = ""; // Fecha para la puntuación
var nPoints = 0; // Puntos
var bCookies = false; // Cookies permitidas
var nHighscoreMode = 0; // 0=Cookies 1=PHP
var IMG_START, IMG_STOP, IMG_PLUS, IMG_MINUS;
var IMG_LEVEL, IMG_SEC, IMG_ATTEMPTS, IMG_HIT
var IMG_OFFSET, IMG_MODE, imgArrField, nImages, nSumImages;
Función para subir las imágenes:
/*
* Preload of images
*/
function loadImages(nPairs, nImageMode, nScoreMode)
{
nHighscoreMode = nScoreMode;
IMG_MODE = nImageMode;
nImages = nPairs;
imgArrField = new Array(nImages * 2);
nSumImages = nImages * 2 + 4 + 4 + 11;
IMG_START = 2 + nImages * 2;
IMG_STOP = 4 + nImages * 2;
IMG_PLUS = 12 + nImages * 2;
IMG_MINUS = 8 + nImages * 2;
IMG_LEVEL = 10 + nImages * 2;
IMG_SEC = 17 + nImages * 2;
IMG_ATTEMPTS = 25 + nImages * 2;
IMG_HIT = 33 + nImages * 2;
if(document.images)
{
imgBackside.src = IMG_PATH + "card.png";
// Load start and stop button
for(var i = 0; i < 4; i++)
{
imgArrStartStop[i] = new Image();
imgArrStartStop[i].src = IMG_PATH + "startstop" + (i + 1) + ".gif";
}
// Load plus and minus button
for(var i = 0; i < 4; i++)
{
imgArrPlusMinus[i] = new Image();
imgArrPlusMinus[i].src = IMG_PATH + "plusminus" + (i + 1) + ".gif";
}
// Load ciphers
for(var i = 0; i < 11; i++)
{
imgArrNumber[i] = new Image();
imgArrNumber[i].src = IMG_PATH + i + ".gif";
}
// Load pictures
for(var i = 0; i < nImages; i++)
{
if(IMG_MODE == 1)
{
imgArrField[i * 2] = new Image();
imgArrField[i * 2].src = IMG_PATH + "pic" + (i + 1) + "a.jpg";
imgArrField[i * 2 + 1] = new Image();
imgArrField[i * 2 + 1].src = IMG_PATH + "pic" + (i + 1) + "b.jpg";
}
else
{
IMG_MODE = 0;
imgArrField[i * 2] = new Image();
imgArrField[i * 2].src = IMG_PATH + "pic" + (i + 1) + ".jpg";
imgArrField[i * 2 + 1] = new Image();
imgArrField[i * 2 + 1].src = IMG_PATH + "pic" + (i + 1) + ".jpg";
}
}
nLevel = 4;
nSeconds = 0;
nAttempts = 0;
nHit = 0;
searchFirstImage();
clearField();
updateAll();
setTimeout("checkLoading()", 1000)
}
}
Función para barajar las cartas:
/*
* Shuffle all pictures
*/
function shuffle()
{
if(document.images)
{
// Swap two pictures (random index)
var j = Math.floor(new Date().getSeconds() * Math.random() + 60);
for(var i = 0; i < j; i++)
{
n1 = Math.round(Math.random() * (nImages * 2 - 1));
n2 = Math.round(Math.random() * (nImages * 2 - 1));
img = imgArrField[n1];
imgArrField[n1] = imgArrField[n2];
imgArrField[n2] = img;
}
}
}
Iniciar juego:
/*
* Start new game
*/
function startGame()
{
if(document.images)
{
if(!bRunning)
{
shuffle();
clearField();
nSeconds = 0;
nSelected1 = -1;
nSelected2 = -1;
nAttempts = 0;
nHit = 0;
id = setInterval("countSeconds()", 1000)
bRunning = true;
bShowCard = false;
updateAll();
}
}
}
Parar juego:
/*
* Stop game
*/
function stopGame()
{
if(document.images)
{
if(bRunning)
{
clearInterval(id);
bRunning = false;
updateAll();
}
}
return;
}
Tiempo:
/*
* Count seconds
*/
function countSeconds()
{
nSeconds++;
showNumber(nSeconds, IMG_SEC + IMG_OFFSET, 5);
}
Function for figures display:
/*
* Show numbers
*/
function showNumber(nNumber, nPosition, nCount)
{
if(document.images)
{
nNumber += "";
while(nNumber.length < nCount) nNumber = " " + nNumber;
for(var i = 0; i < nCount; i++)
{
var n = nNumber.charAt(i);
if(n == " ")
{
document.images[nPosition + i].src = imgArrNumber[10].src;
}
else
{
document.images[nPosition + i].src = imgArrNumber[n].src;
}
}
}
}
Función para la muestra del reverso de las cartas:
/*
* Set the backside of all cards
*/
function clearField()
{
if(document.images)
{
for(var i = 0; i < nImages * 2; i++)
{
document.images[i + IMG_OFFSET].src = imgBackside.src;
}
}
}
Función para mostrar las cartas seleccionadas:
/*
* Show card
*/
function showCard(nImage)
{
if(document.images)
{
if(bRunning && !bShowCard)
{
// Uncover a card, if not allready two are selected
if(nSelected1 == -1 || nSelected2 == -1)
{
// Is the clicked not uncovered ?
if(document.images[nImage + IMG_OFFSET].src == imgBackside.src)
{
// Uncover selected card
document.images[nImage + IMG_OFFSET].src = imgArrField[nImage].src;
if(nSelected1 == -1)
{
nSelected1 = nImage;
}
else
{
nSelected2 = nImage;
}
}
}
// There are two cards uncovered
if(nSelected1 != -1 && nSelected2 != -1)
{
showNumber(++nAttempts, IMG_ATTEMPTS + IMG_OFFSET, 5);
// Are the cards equal ?
var pic1 = document.images[nSelected1 + IMG_OFFSET].src;
var len1 = pic1.length;
var pic2 = document.images[nSelected2 + IMG_OFFSET].src;
var len2 = pic2.length;
if(pic1.substr(0, len1 - IMG_MODE - 4) == pic2.substr(0, len2 - IMG_MODE - 4))
{
// If there are equal, incement the counter
showNumber(++nHit, IMG_HIT + IMG_OFFSET, 5);
nSelected1 = -1;
nSelected2 = -1;
// Are all pictures uncovered ?
if(nHit == nImages)
{
stopGame();
nPoints = Math.round(100000 * (nLevel + 1) / nSeconds / nAttempts);
strMsg = "Tvoje skˇre je " + nPoints + " bod¨.";
window.alert(strMsg);
}
}
else
{
// The two cards are not identical, start now the timer for hide the cards
bShowCard = true;
setTimeout("clearCard()", 2000 - nLevel * 200);
}
}
}
else
{
if(!bRunning)
{
alert("Press key Start !");
}
}
}
}
Función para que las cartas que no coincidan vuelvan a su estado inicial:
/*
* Turn the uncovered cards
*/
function clearCard()
{
document.images[nSelected1 + IMG_OFFSET].src = imgBackside.src;
document.images[nSelected2 + IMG_OFFSET].src = imgBackside.src;
nSelected1 = -1;
nSelected2 = -1;
bShowCard = false;
}
Función para establecer el nivel:
/*
* Set the level
*/
function setLevel(nValue)
{
if(document.images && !bRunning)
{
nLevel += nValue;
if(nLevel < 0) nLevel = 0;
if(nLevel > 9) nLevel = 9;
showNumber(nLevel, IMG_LEVEL + IMG_OFFSET, 1);
}
}
Actualizar todos los contadores:
/*
* Update all counter
*/
function updateAll()
{
if(document.images)
{
showNumber(nLevel, IMG_LEVEL + IMG_OFFSET, 1);
showNumber(nSeconds, IMG_SEC + IMG_OFFSET, 5);
showNumber(nAttempts, IMG_ATTEMPTS + IMG_OFFSET, 5);
showNumber(nHit, IMG_HIT + IMG_OFFSET, 5);
if(bRunning)
{
document.images[IMG_START + IMG_OFFSET].src = imgArrStartStop[1].src;
document.images[IMG_STOP + IMG_OFFSET].src = imgArrStartStop[2].src;
document.images[IMG_PLUS + IMG_OFFSET].src = imgArrPlusMinus[1].src;
document.images[IMG_MINUS + IMG_OFFSET].src = imgArrPlusMinus[3].src;
}
else
{
document.images[IMG_START + IMG_OFFSET].src = imgArrStartStop[0].src;
document.images[IMG_STOP + IMG_OFFSET].src = imgArrStartStop[3].src;
document.images[IMG_PLUS + IMG_OFFSET].src = imgArrPlusMinus[0].src;
document.images[IMG_MINUS + IMG_OFFSET].src = imgArrPlusMinus[2].src;
}
}
}
Eliminación de los espacios en blanco de las palabras:
/*
* Remove all white spaces
*/
function strTrim(str)
{
var strReturn = "";
for(var i = 0; i < str.length; i++)
{
if(str.charAt(i) != " ")
{
strReturn += str.charAt(i);
}
}
return strReturn;
}
Configurar el cero inicial:
/*
* Add leading zero
*/
function addLeadingZero(value, nTotalLength)
{
value += "";
while(value.length < nTotalLength) value = "0" + value;
return value;
}
Buscar el índice de las primeras cartas:
/*
* Search for index of first image
*/
function searchFirstImage()
{
for(var i = 0; i < document.images.length; i++)
{
if(document.images[i].name == "memory_id")
{
IMG_OFFSET = i + 1;
break;
}
}
}
El contador de las cartas mostradas:
/*
* Count of preloaded images
*/
function countLoadedImages()
{
var nCompleted = 0;
for(var i = 0; i < 2 * nImages; i++)
{
if(imgArrField[i].complete)
{
nCompleted++;
} //else alert(imgArrField[i].src);
}
for(var i = 0; i < 4; i++)
{
if(imgArrStartStop[i].complete)
{
nCompleted++;
} //else alert(imgArrStartStop[i].src);
}
for(var i = 0; i < 4; i++)
{
if(imgArrPlusMinus[i].complete)
{
nCompleted++;
} //else alert(imgArrPlusMinus[i].src);
}
for(var i = 0; i < 11; i++)
{
if(imgArrNumber[i].complete)
{
nCompleted++;
} //else alert(imgArrNumber[i].src);
}
return nCompleted;
}
Indicación de la subida de imágenes:
/*
* Progressbar (state of preloading images)
*/
function checkLoading()
{
var nLoaded = countLoadedImages();
if(nLoaded < nSumImages)
{
document.images[IMG_OFFSET - 1].width = 456 - (456 / nSumImages * nLoaded);
window.status = "" + nLoaded + " of " + nSumImages + " pictures loaded";
setTimeout("checkLoading()", 250);
}
else
{
document.images[IMG_OFFSET - 1].src = IMG_PATH + "blank.gif";
document.images[IMG_OFFSET - 1].width = 5;
window.status = "";
updateAll();
}
}