diseno web

Paleta de colores para su sitio

redaccion — Sun, 20 May 2012 14:36:20 +0000

Este script de diseño web ofrece una paleta de colores básica utilizando incrementos de los valores de las componentes R (rojo), G (verde) y B (azul) con las que se representan los colores en el lenguaje HTML.

La paleta de colores muestra el código de cada color, que puede copiarse directamente para ser utilizado en el diseño de páginas web. El incremento de 30 unidades puede reducirse (por ejemplo a 15 o a 5) para obtener sub paletas de color con transiciones más suaves.

function decimal_a_hex(numero) {
if (numero == null)
return ”00″
numero = parseInt(numero)
if (isNaN(numero))
return ”00″
else if (numero <= 0 )
return ”00″
else if (numero > 255)
return ”FF”
numero = Math.round(numero)
return ”0123456789ABCDEF”.charAt((numero - numero % 16)⁄16) + ”0123456789ABCDEF”.charAt(numero % 16)
}
⁄⁄tabla de color
function tablaColores() {
var r, g, b, color
document.write( ’’ )
columna = 0
for ( r = 0; r <= 255; r = r + 30) {
for ( g = 0; g <= 255; g = g + 30) {
document.write( ’’ )
for ( b = 0; b <= 255; b = b + 30) {
color = decimal_a_hex(r) + decimal_a_hex(g) + decimal_a_hex(b)
document.write( ”” + color + ”<⁄small><⁄td>” )

}

document.write( ’<⁄tr>’ )

}

document.write( ’<⁄table>’ )

}

<⁄script>

Debe añadir el siguiente código a la página HTML, entre y :

tablaColores()
⁄⁄–>
<⁄script>
<⁄div>

Plug-in en JavaScript para su sitio

redaccion — Fri, 18 May 2012 14:35:18 +0000

Con JavaScript de diseño web permite conocer si el navegador del usuario tiene instalado cierto plug-in, lo que permite escribir código dinámicamente, en función de la existencia o no del plug-in.

function DetectaPlugin(descripcion_plugin, extension_plugin, mime_plugin) {
⁄⁄Comprueba todos los navegadores que tienen una array de plug-ins
⁄⁄(como Netscape) y establece las variables
⁄⁄Definicion de variables
var i, detectado=0, daPlugin = new Object()
⁄⁄Si tiene un array de plug-ins o tipos mime, lo examinamos
if(navigator.plugins) {
numPlugins = navigator.plugins.length
if (numPlugins > 1) {
if (navigator.mimeTypes && navigator.mimeTypes[mime_plugin] && navigator.mimeTypes[mime_plugin].enabledPlugin && (navigator.mimeTypes[mime_plugin].suffixes.indexOf(extension_plugin) != -1)) {
⁄⁄Comprueba la version
if ((navigator.appName == ’Netscape’) && (navigator.appVersion.indexOf(’4.0′) != -1)) {
⁄⁄Netscape no permite referenciar al array de plug-ins directamente usando numeros
for(i in navigator.plugins) {
if ((navigator.plugins[i].description.indexOf(descripcion_plugin) != -1) || (i.indexOf(descripcion_plugin) != -1)) { ⁄⁄ some versions of quicktime have no description. feh!
detectado = 1
break
}
}
} else {
for (i = 0; i < numPlugins; i++) {
daPlugin = navigator.plugins[i]
if ((daPlugin.description.indexOf(descripcion_plugin) != -1) || (daPlugin.name.indexOf(descripcion_plugin) != -1)) {
detectado = 1
break
}
}
}
⁄⁄Para Mac usamos el array mimeTypes
if (navigator.mimeTypes[mime_plugin] == null) {
detectado = 0
}
}
return detectado
} else {
return 0
}
} else {
return 0
}
}
⁄⁄Deteccion de los plug-ins mas comunes
function CompruebaPlugins() {
var agt = navigator.userAgent.toLowerCase()
var esNAV = ((agt.indexOf(‘mozilla’)!=-1) && (agt.indexOf(‘spoofer’)==-1) && (agt.indexOf(‘compatible’) == -1) && (agt.indexOf(‘opera’)==-1) && (agt.indexOf(‘webtv’)==-1))
if ( !esNAV ) {
document.write( ”Sólo para Navigator” )
} else {
if ( DetectaPlugin(‘Flash’, ’swf’, ’application⁄x-shockwave-flash’, ’ShockwaveFlash.ShockwaveFlash’) )
flash = ”Flash: SI
”
else
flash = ”Flash: NO
”
if ( DetectaPlugin(‘Shockwave’, ’dcr’, ’application⁄x-director’, ’SWCtl.SWCtl.1′) )
shockwave = ”Director: SI
”
else
shockwave = ”Director: NO
”
if ( DetectaPlugin(‘QuickTime’, ’mov’, ’video⁄quicktime’, ”) )
quicktime = ”QuickTime: SI
”
else
quicktime = ”QuickTime: NO
”
if ( (DetectaPlugin(‘RealPlayer’, ’rpm’, ’audio⁄x-pn-realaudio-plugin’, ’RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)’)) || (DetectaPlugin(‘RealPlayer’, ’rpm’, ’audio⁄x-pn-realaudio-plugin’,'rmocx.RealPlayer G2 Control’)) || (DetectaPlugin(‘RealPlayer’, ’rpm’, ’audio⁄x-pn-realaudio-plugin’,'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)’)) || (DetectaPlugin(‘RealPlayer’, ’rpm’, ’audio⁄x-pn-realaudio-plugin’,'RealVideo.RealVideo(tm) ActiveX Control (32-bit)’)) )
realplayer = ”RealPlayer: SI
”
else
realplayer = ”RealPlayer: NO
”
document.write( ’
Plug-ins:<⁄strong>
’ + flash + shockwave + quicktime + realplayer )

}

}

<⁄script>

Juegos en diseño web con javaSript

redaccion — Mon, 14 May 2012 14:34:06 +0000

Con un JavaScript del desarrollo web permite recrear fácilmente el juego del tres en raya. Usted juega con las teclas (‘X’) y comienza siempre la partida. Al estar muy simplificado, se puede hacer trampas escribiendo sobre los cuadros de texto (la máquina confía en su adversario).

⁄⁄Para entender las explicaciones:

⁄⁄              triunfo - pone y gana

⁄⁄              jugada - pone y tiene en una línea dos ’O' y una casilla vacía

⁄⁄              defender - evitar que gane el contrario en el siguiente movimiento

⁄⁄No tiene sentido que primero ocupe el centro, si hay triunfo o jugada

⁄⁄No debe defender primero y atacar despues. Primero busca el triunfo, luego

⁄⁄defiende y despues busca jugada

⁄⁄variable global

var jugando = true

⁄⁄FUNCION COMPRUEBA JUGADA————————————————

function CompruebaJugada(tablero, ficha) {

⁄⁄comprueba que hay posibilidad de hacer 3 en raya en una fila, columna o diagonal

⁄⁄devuelve la posicion donde hay que colocar la ficha para hacerlo y -1 si no hay jugada

var x, y

for(x = 0; x < 9; x += 3) {      ⁄⁄comprueba las filas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == ficha))

if (tablero.elements[x + 2].value == ”")

return (x + 2)

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 2].value == ficha))

if (tablero.elements[x + 1].value == ”")

return (x + 1)

if ((tablero.elements[x + 1].value == ficha) && (tablero.elements[x + 2].value == ficha))

if (tablero.elements[x].value == ”")

return (x)

}

for(x = 0; x < 3; x++) {     ⁄⁄comprueba las columnas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == ficha))

if (tablero.elements[x + 6].value == ”")

return (x + 6)

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 6].value == ficha))

if (tablero.elements[x + 3].value == ”")

return (x + 3)

if ((tablero.elements[x + 3].value == ficha) && (tablero.elements[x + 6].value == ficha))

if (tablero.elements[x].value == ”")

return (x)

}

⁄⁄comprueba las diagonales

if ((tablero.elements[2].value == ficha) && (tablero.elements[4].value == ficha) && (tablero.elements[6].value == ”"))

return (6)

if ((tablero.elements[2].value == ficha) && (tablero.elements[4].value == ”") && (tablero.elements[6].value == ficha))

return (4)

if ((tablero.elements[2].value == ”") && (tablero.elements[4].value == ficha) && (tablero.elements[6].value == ficha))

return (2)

if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == ficha) && (tablero.elements[8].value == ”"))

return (8)

if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == ”") && (tablero.elements[8].value == ficha))

return (4)

if ((tablero.elements[0].value == ”") && (tablero.elements[4].value == ficha) && (tablero.elements[8].value == ficha))

return (0)

return -1

}

⁄⁄FUNCION PAREJA HORIZONTAL—————————————————

function ParejaHorizontal(tablero, ficha) {

⁄⁄comprueba si es posible poner 2 en una fila, estando vacia la otra posicion…

⁄⁄…de esa misma fila

⁄⁄devuelve la fila que permite hacerlo, o -1 en caso contrario

var x, y

for(x = 0; x < 9; x += 3) {      ⁄⁄comprueba las filas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == ”") && (tablero.elements[x + 2].value == ”"))

return (x)

if ((tablero.elements[x].value == ”") && (tablero.elements[x + 1].value == ficha) && (tablero.elements[x + 2].value == ”"))

return (x + 1)

if ((tablero.elements[x].value == ”") && (tablero.elements[x + 1].value == ”") && (tablero.elements[x + 2].value == ficha))

return (x + 2)

}

return -1

}

⁄⁄FUNCION PAREJA VERTICAL—————————————————

function ParejaVertical(tablero, ficha, jugadaHtal) {

⁄⁄comprueba si es posible poner 2 en una columna, estando vacia la otra posicion…

⁄⁄…de esa misma columna y teniendo en cuenta si esa posicion ya es pareja horizontal

⁄⁄devuelve la columna que permite hacerlo si no es pareja horizontal, o -1 en caso contrario

var x, y

for(x = 0; x < 3; x++) {         ⁄⁄comprueba las columnas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == ”") && (tablero.elements[x + 6].value == ”"))

if (x != jugadaHtal)        ⁄⁄si es pareja horizontal no interesa como vertical

return (x)

if ((tablero.elements[x].value == ”") && (tablero.elements[x + 3].value == ficha) && (tablero.elements[x + 6].value == ”"))

if ((x + 3) != jugadaHtal)

return (x + 3)

if ((tablero.elements[x].value == ”") && (tablero.elements[x + 3].value == ”") && (tablero.elements[x + 6].value == ficha))

if ((x + 6) != jugadaHtal)

return (x + 6)

}

return -1

}

⁄⁄FUNCION OBTEN POSICION————————————————-

function ObtenPosicion(jugadaHtal, jugadaVcal) {

⁄⁄busca la posicion que permite hacer jugada vertical y jugada horizontal a la vez

⁄⁄conocidas la fila y la columna donde pueden hacerse parejas

var x, y, fila, columna

var posicion = 0

matriz = new Array(3)

for (x = 0; x < 3; x++) {        ⁄⁄crea un matriz que asigna posicion a fila y columna

matriz[x] = new Array(3)

for (y = 0; y < 3; y++) {

matriz[x][y] = posicion

posicion ++

}

}

for (x = 0; x < 3; x++) {                    ⁄⁄busca la fila y la columna

for (y = 0; y < 3; y++) {

if (matriz[x][y] == jugadaHtal) ⁄⁄encontro la fila

fila = x

if (matriz[x][y] == jugadaVcal) ⁄⁄encontro la columna

columna = y

}

}

return (matriz[fila][columna])          ⁄⁄devuelve posicion jugada

}

⁄⁄FUNCION PONER REDONDEL————————————————-

function PonerRedondel(tablero) {

⁄⁄juega el ordanador

var jugada, jugadaHtal, jugadaVcal

⁄⁄ataca y gana

jugada = CompruebaJugada(tablero, ”O”)

if (jugada != -1) {

tablero.elements[jugada].value = ”O”

alert(‘¡Yo gano!’)

document.marcador.perdidas.value++

jugando = false

return 1

}

⁄⁄defiende evitando que gane el rival

jugada = CompruebaJugada(tablero, ”X”)

if (jugada != -1) {

tablero.elements[jugada].value = ”O”

return 1

}

⁄⁄ataca y gana a la siguiente

jugadaHtal = ParejaHorizontal(tablero, ”O”)

jugadaVcal = ParejaVertical(tablero, ”O”, jugadaHtal)

if ((jugadaHtal != -1) && (jugadaVcal != -1)) {     ⁄⁄puede poner 2 en fila y 2 en columna

if ((jugadaHtal != 4) || (jugadaVcal != 4)) {       ⁄⁄no es el centro

jugada = ObtenPosicion(jugadaHtal, jugadaVcal)  ⁄⁄obtiene donde debe poner

tablero.elements[jugada].value = ”O”

return 1

}

}

⁄⁄ataca y pone dos en fila

if ((jugadaHtal != -1) && (jugadaVcal == -1)) {

if ((jugadaHtal != 2) && (jugadaHtal != 5) && (jugadaHtal != 8))    ⁄⁄esto es arbitrario

tablero.elements[jugadaHtal + 1].value = ”O”                        ⁄⁄pone a la derecha

else

tablero.elements[jugadaHtal - 1].value = ”O”                        ⁄⁄pone a la izquierda

return 1

}

⁄⁄ataca y pone dos en columna

if ((jugadaHtal == -1) && (jugadaVcal != -1)) {

if ((jugadaVcal != 6) && (jugadaVcal != 7) && (jugadaVcal != 8))

tablero.elements[jugadaVcal + 3].value = ”O”        ⁄⁄pone abajo

else

tablero.elements[jugadaVcal - 3].value = ”O”        ⁄⁄pone arriba

return 1

}

⁄⁄ocupa el centro

if (tablero.elements[4].value == ”") {

tablero.elements[4].value = ”O”

return 1

}

⁄⁄ocupa la primera que este libre

for (x = 0; x < 9; x++)

if (tablero.elements[x].value == ”") {

tablero.elements[x].value = ”O”

return 1

}

alert(‘Tablas.’)

document.marcador.tablas.value++

jugando = false

return -1

}

⁄⁄FUNCION PONER ASPA——————————————————

function PonerAspa(tablero, posicion) {

⁄⁄comprueba primero que se esta jugando

if (jugando) {

if (tablero.elements[posicion].value != ”")     ⁄⁄casilla no vacia

alert(‘Esa casilla ya está ocupada.’)

else {                                                  ⁄⁄casilla vacia, puede poner

tablero.elements[posicion].value = ”X”

⁄⁄comprueba si ha ganado (AÑADIDO EN LA VERSION 2)

if ( CompruebaVictoria(tablero, ”X”) ) {

alert(‘¡Felicidades! Tú ganas.’)

document.marcador.ganadas.value++

jugando = false

} else

PonerRedondel(tablero)

}

} else {

alert(‘Para comenzar una nueva partida\npulsa Juego nuevo.’)

}

}

⁄⁄FUNCION COMPRUEBA VICTORIA ———————————————-

function CompruebaVictoria(tablero, ficha) {

⁄⁄AÑADIDA EN LA VERSION 2

⁄⁄comprueba si ha ganado el jugador que juega con ficha

var x

for(x = 0; x < 9; x += 3) {  ⁄⁄comprueba las filas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 1].value == ficha) && (tablero.elements[x + 2].value == ficha))

return true

}

for(x = 0; x < 3; x++) {     ⁄⁄comprueba las columnas

if ((tablero.elements[x].value == ficha) && (tablero.elements[x + 3].value == ficha) && (tablero.elements[x + 6].value == ficha))

return true

}

⁄⁄comprueba las diagonales

if ((tablero.elements[2].value == ficha) && (tablero.elements[4].value == ficha) && (tablero.elements[6].value == ficha))

return true

if ((tablero.elements[0].value == ficha) && (tablero.elements[4].value == ficha) && (tablero.elements[8].value == ficha))

return true

return false

}

<⁄script>

Debe añadir el siguiente código a la página HTML, entre y :

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄table>

<⁄center><⁄div>

<⁄form>

Tablas:

<⁄small><⁄td>

Perdidas:

<⁄small><⁄td>

Ganadas:

<⁄small><⁄td>

<⁄td>

<⁄tr>

<⁄table>

<⁄center><⁄div>

<⁄form>

Simular una instalación

redaccion — Sat, 12 May 2012 14:33:31 +0000

Previo a realizar un diseño web, conviene simular un proceso de instalación que ironiza sobre las nuevas tecnologías y aquellos que las lideran.

function humor1() {

var respuesta

alert(‘Esto es una simulación JavaScript del proceso de instalación de la fictícea aplicación Mikrosof Incompatible Application, v3.14.16. Los nombres que aparecen son imaginarios y tienen el único propósito de ironizar sobre la realidad.\n\nPara comenzar la simulación pulse ACEPTAR.’)

respuesta = confirm(‘Bienvenido al Mikrosof Incompatible Application Instalation Wizard. El MIA Instalation Wizard le guiará durante el proceso de instalación.\n\nPara comenzar la instalación pulse ACEPTAR. Para salir pulse CANCELAR.’)

if (respuesta) {

respuesta = confirm(‘El MIA Instalation Wizard ha comprobado que tiene 1,458 Mb de espacio disponible en el disco duro. Para realizar la instalación completa necesita al menos 121,783 Mb.\n\nSi desea realizar la instalación simplificada pulse ACEPTAR. En caso contrario pulse CANCELAR.’)

if (!respuesta) {

alert(‘Para cancelar debe introducir el número de serie del producto, que figura en la página 123 del tomo V de la primera parte del Manual de Introducción a la Instalación.’)

prompt(‘Introduzca el número de serie:’, ”)

alert(‘Número de serie incorrecto. La instalación continuará en modo desprotegido.’)

}

alert(‘La versión que tiene del MIA Communication Plugin de 14 bits para ODBCD es de ayer, por lo que ha quedado obsoleta.\n\nEl MIA Instalation Wizard le guiará en la actualización del Plugin.’)

respuesta = confirm(‘Los requerimientos mínimos para la actualización del MIA Communication Plugin son procesador Pention a 318 MHz y 19 Mb de memoria VHS-RAM.\n\nSi su sistema cumple estos requerimientos pulse ACEPTAR. En caso contrario pulse CANCELAR.’)

if (!respuesta) {

alert(‘Con la versión de ayer del MIA Communication Plugin sólo podrá comunicarse con el site de Mikrosof. Le recomendamos que actualice sus sistema cuanto antes.’)

} else {

alert(‘La actualización del MIA Communication Plugin se ha interrumpido debido a un fallo de protección general en el módulo 14HDFJ19KK. El error devuelto es: ”error general”.\n\nConsulte con el proveedor de su memoria VHS-RAM.’)

}

alert(‘Se ha producido un error al modificar el registro. La entrada HKEY.SOFTWARE.MIKROSOF ha devuelto el error: ”error desconocido”. Consulte con el servicio de mantenimiento de su sistema hardware.\n\nSi desea continuar pulse ACEPTAR.’)

alert(‘Es imposible continuar la instalación. Para salir pulse ACEPTAR.’)

respuesta = confirm(‘La instalación no se ha completado con éxito. Si la interrumpe en este momento su sistema puede volverse más inestable de lo habitual.\n\nPulse ACEPTAR para continuar con la instalación. Pulse CANCELAR para terminar.’)

if(!respuesta) {

alert(‘Imposible terminar la instalación sin reconfigurar el Shell del sistema. Pulse ACEPTAR para iniciar el proceso de configuración.’)

alert(‘Su sistema no puede reconfigurarse adecuadamente. Deberá instalarse el Servis Pack #6 para poder terminar la instalación.\n\nSi su sitema tiene instalado el Servis Pack #3 o el #4 tendrá que desinstalar aquellos primero y despues volver a éstos para terminar de resetear, sin instalarlos. No reinicie en este momento. Pulse ACEPTAR para reiniciar.’)

}

alert(‘WARNING! Le système encotra qe le idiomé instalé es dül thodo incorrekt. Pulso ACEPTAR pour instalé nuovo idiomé.’)

alert(‘FATAL ERROR! Lé ficcero dou idiomé na exist en vouz diske durex. Inser diskàte #12 do ranuré adequete.’)

while (!(respuesta = confirm(‘Diskàte #12 korruptá se na virusa mortüno.\nThe system is now formatting your hard drive.\nPush CANCELAR to stop this process’))) {

if(!respuesta)

alert(‘Imposible cancelar ahora.’)

}

alert(‘Actualizando la hora del sistema…’)

alert(‘Actualizando los hipervínculos cruzados del enlace dinámico con KOM al Java Engine de la versión antigua del Kernel.’)

alert(‘Actualizando otra vez la hora del sistema…’)

alert(‘La hora del sistema no es correcta. ¿Desea actualizarla?’)

alert(‘Actualizando la hora…\nLa hora ha sido actualizada a GMT+22.5′)

alert(‘Gracias por confiar en los productos Mikrosof. La instalación ha sido un éxito.\n\nRegístrese para poder descargar la última actualización del MIA y el componente MIA Final Patch que resuelve la incompatibilidad con los sistemas Vindous 3.x y los 19 agujeros de seguridad de Kuartengo.’)

}

alert(‘Mensaje’)

}

<⁄script>

Resolución de pantalla

redaccion — Thu, 10 May 2012 00:24:34 +0000

Este ejemplo de desarrollo web ilustra la utilización de las propiedades screen.height y screen.height del objeto window. Lo adecuado es que el diseño de una página no dependa de la resolución de pantalla del usuario. Utilizando la información que nos proporcionan estas propiedades, podemos cargar una página u otra en función de la resolución que tenga el usuario, o advertir que la página que se está viendo está optimizada para una resolución mayor.

⁄⁄especifica aqui la anchura y altura (en pixels) recomendada para la pagina

var ancho_recomendado = 1600

var alto_recomendado = 1200

⁄⁄comprobacion y aviso

if(screen.width < ancho_recomendado || screen.height < alto_recomendado)

alert(“Esta página ha sido diseñada para verse con una resolución de ” + ancho_recomendado + ”*” + alto_recomendado + ” píxeles o superior, pero tu resolución es de ” + screen.width + ”*” + screen.height + ” píxeles.\nTe recomiendo que cambies tu resolución.”)

<⁄script>

Juego del ahorcado en su sitio

redaccion — Sun, 06 May 2012 14:21:51 +0000

En un buen desarrollo web un sencillo script para implementar el popular juego del ahorcado, es sencillo y practico.

La biblioteca de palabras consta de 25 términos relacionados con internet. Las palabras se encuentran en el código fuente.

var hombre = new Array(“___\n”, ”   |\n”, ”   O\n”, ”  ⁄”, ”|”, ”\\\n”, ”  ⁄”, ” \\\n”, ”___”)

var palabra

var libreriaPalabras = new Array(“m u l t i m e d i a”, ”i n t e r n a u t a”, ”s e r v i d o r”, ”p r o t o c o l o”, ”c o r t a f u e g o s”,

“n a v e g a d o r”, ”n o d o”, ”m a r c o”, ”p a g i n a”, ”t e l a r a ñ a”,

“d e s c a r g a r”, ”v i r t u a l”, ”m e m o r i a”, ”d i s c o”, ”l o c a l”,

“c o n e c t a r”, ”d e s c o n e c t a r”, ”e n c a m i n a d o r”, ”i n t e r n e t”, ”d o m i n i o”,

“d i n a m i c o”, ”h i p e r v i n c u l o”, ”e n l a c e”, ”m a r c a d o r”, ”o r d e n a d o r”)

var partes = 0

var colNueva = 0

var jugando

function ObtienePalabra() {

⁄⁄obtiene la palabra para jugar de forma pseudoaleatoria

var indice = Math.round ( Math.random() * 24 )

var cadena = new String( libreriaPalabras[indice] )

palabra = cadena.split(“ ”)

}

function DibujaHombre(visor, partes) {

⁄⁄dibuja el hombre ahorcado

⁄⁄partes indica el numero de partes a dibujar

var dibujo = ”"

if (partes < 10)

for(var x = 0; x < partes; x++) {

dibujo += hombre[x]

}

visor.displayHombre.value = dibujo

}

function DibujaLetra(visor, letra) {

⁄⁄dibuja una letra de la palabra

⁄⁄posicion indica donde debe dibujar la letra

var flag = false        ⁄⁄indica si se encontro la letra

⁄⁄obtiene cadena actual

var cadena = new String(visor.displayPalabra.value)

⁄⁄la separa en sus espacios

var letrasCadena = cadena.split(“ ”)

cadena = ”"

for (var x = 0; x < palabra.length; x++) {

if (palabra[x] == letra) {

cadena += letra + ” ”

flag = true

} else

cadena += letrasCadena[x] + ” ”

}

visor.displayPalabra.value = cadena

return flag

}

function NuevaLetra(visor, letra) {

⁄⁄añade letra lista de letras

visor.displayLetras.value += letra + ” ”

⁄⁄comprueba si ha de pasar a la siguiente fila

if(colNueva == 3) {

visor.displayLetras.value += ”\n”

colNueva = 0

} else

colNueva++

}

function Juega(visor, letra) {

⁄⁄comprueba si esta jugando

if (jugando) {

⁄⁄ciclo de jugada

⁄⁄1. añade letra a la lista

NuevaLetra(visor, letra)

⁄⁄2. dibuja la letra y comprueba si acierto

var acierto = DibujaLetra(visor, letra)

⁄⁄3. si no acierto, dibuja hombre

if (!acierto)

DibujaHombre(visor, ++partes)

⁄⁄4. comprueba si fin

if (partes == 9)

FinJuego(false)

else if ( CompruebaPalabra(visor) )

FinJuego(true)

} else {

alert(‘Pulsa Juego nuevo para comenzar\nuna partida nueva.’)

}

}

function IniciaJuego() {

⁄⁄inicializa visor y variables globales

jugando = true

partes = 0

colNueva = 0

ObtienePalabra()

DibujaHombre(document.visor, partes)

document.visor.displayPalabra.value = ”"

for (var x = 0; x < palabra.length; x++)

document.visor.displayPalabra.value += ”_ ”

document.visor.displayLetras.value = ”"

}

function CompruebaPalabra(visor) {

⁄⁄comprueba si se completo toda la palabra

var fin = true

⁄⁄obtiene cadena actual

var cadena = new String(visor.displayPalabra.value)

⁄⁄la separa en sus espacios

var letrasCadena = cadena.split(“ ”)

for(var x = 0; x < letrasCadena.length; x++)

if (letrasCadena[x] == ”_”)

fin = false

return fin

}

function FinJuego(resultado) {

⁄⁄indica que si se ha perdido o ganado

var solucion = ”"

jugando = false

if (resultado) {

document.visor.ganadas.value++

alert(“¡Acertaste!”)

} else {

document.visor.perdidas.value++

⁄⁄construye la palabra solucion

for (var x = 0; x < palabra.length; x++)

solucion += palabra[x]

alert(“¡Has muerto!\n La palabra era: ” + solucion)

}

}

window.onload = IniciaJuego;

if (document.captureEvents) {               ⁄⁄N4 requiere invocar la funcion captureEvents

document.captureEvents(Event.LOAD)

}

<⁄script>

Debe añadir el siguiente código a la página HTML, entre y :

<⁄textarea><⁄p><⁄td>

<⁄textarea><⁄p><⁄td>

Ganadas<⁄small><⁄p>

Perdidas<⁄small><⁄p>

<⁄p>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄table>

<⁄center><⁄div>

<⁄form>

Juegos en gráfico para su sitio

redaccion — Fri, 04 May 2012 14:30:40 +0000

Ademas de un diseño web, implemente el tradicional juego del tres en raya que incorpora una visualización gráfica del tablero y de las aspas y los ceros. Esto da la posibilidad de adaptar la imagen del juego al diseño que más les guste, con solo modificar las imágenes por defecto. Otra opción es cambiar los nombres de las imágenes en el propio script.

var tablero = new initArray(0,0,0,0,0,0,0,0,0); ⁄⁄tablero del TTT, de la manera: 812,793,654

var jug = 2                     ⁄⁄1 la persona, 2 la maquina

var ultima = 0;                 ⁄⁄última casilla ocupada por la persona

var tras = 0;                   ⁄⁄para el algoritmo, nº de posiciones giradas desde el modelo

var sepuede = true              ⁄⁄indica si la persona puede poner ficha o no

var O=”⁄ejemplos⁄javascript⁄tresraya⁄o.jpg” ⁄⁄imagen O

var X=”⁄ejemplos⁄javascript⁄tresraya⁄x.jpg” ⁄⁄imagen X

var gan = 0                 ⁄⁄si hay ganador y quién es: -1 tablas

var turno = 0                   ⁄⁄numero de circulos

⁄⁄posiciones donde han puesto circulos

var cir = new initArray(undefined,undefined,undefined)

⁄⁄lista de lineas

var pg = new initArray(8,1,2,7,9,3,6,5,4,8,9,4,6,9,2,8,7,6,1,9,5,2,3,4)

⁄⁄aqui esta codificado el algoritmo, descodificarlo… lleva su tiempo

var d   = new initArray(3,3,3,3,3,3,3,4);

var d8  = new initArray(2,1,5,0,3,7,6,0);

var d81 = new initArray(6,6,6,6,6,3,6,6);

var d82 = new initArray(5,5,5,5,7,5,5,5);

var d825= new initArray(6,6,6,6,6,3,6,6);

var d83 = new initArray(6,1,1,1,1,1,1,1);

var d85 = new initArray(7,7,7,7,7,7,2,7);

var d86 = new initArray(3,3,1,3,3,3,3,3);

var d863= new initArray(5,5,5,5,2,5,5,5);

var d87 = new initArray(5,5,5,5,2,5,5,5);

var d1  = new initArray(7,7,7,7,7,7,4,7);

var d17 = new initArray(2,8,2,2,2,2,2,2);

salto = 0

function ObtenSalto() {

⁄⁄si hay otras imagenes en la pagina HTML (a parte del tablero), las tiene en cuenta con esta variable

while ( document.images[salto].src.indexOf(“c.jpg”) == -1) {

salto++;

}

}

function flujo()

{

⁄⁄si hay otras imagenes en la pagina HTML (a parte del tablero), las tiene en cuenta con esta variable

ObtenSalto()

⁄⁄if(confirm(‘yo empiezo,\njugar con X \njugar con O ’)) jugarconX();

equis(9);

}

function jugarconX()

{

a=X;

X=O;

O=a;

}

function equis(n)

{

n += tras

if (n < 1) n += 8;

else if (n > 8 && turno) n -= 8  ⁄⁄lo del turno es que si es la primera equis

⁄⁄puede poner en el centro (9). Si no seria la 1.

n%8;

tablero[n] = 2;

document.images[f(n)].src=X

switch (comprobar())

{

case 0: sepuede = true; break;

case 1: alert(‘Has perdido. Para reiniciar pulsa F5′); break;

case 2: alert(‘Tablas. Para reiniciar pulsa F5′); break;

}

}

function comprobar()

{

suma=1;

for(i=0;i<8;i++,suma*=tablero[i])

{

if(tablero[pg[3*i+1]] * tablero[pg[3*i+2]] * tablero[pg[3*i+3]] == 8) return 1;

}

if (suma!=0) return 2;

return 0;

}

function f(n)

{

var x = 1;

switch(n)

{

case 1: x = 3; break;

case 2: x = 5; break;

case 3: x = 15; break;

case 4: x = 25; break;

case 5: x = 23; break;

case 6: x = 21; break;

case 7: x = 11; break;

case 8: x = 1; break;

case 9: x = 13; break;

}

⁄⁄si hay otras imagenes en la pagina HTML (a parte del tablero), las tiene en cuenta con esta variable

⁄⁄return x-1;

return x-1+salto;

}

function circulo(n,objeto)  ⁄⁄onClick de las imagenes, n es el nº en el tablero

⁄⁄objeto es la imagen(this)

{

if(!tablero[n] && sepuede)

{

tablero[n] = 1      ⁄⁄poner un circulo

sepuede = false     ⁄⁄desactivar los circulos hasta que la CPU ponga X

cambiarjugador();   ⁄⁄para que pueda poner una X

objeto.src = O;     ⁄⁄O es el string del nombre de la imagen O

ultima = n;

ultimabn();

for(i=1;cir[i]!=undefined;i++); cir[i]=ultima

turno++;

juegacpu();

}

}

function juegacpu()

{

for(ins=’d',i=1;cir[i]!=undefined&&cir[i+1]!=undefined;ins+=cir[i],i++);

ins+=’['+cir[i]+’]';

equis(eval(ins));

}

function ultimabn()     ⁄⁄ajusta el valor de ultima con respecto a tras

{

if(turno == 0)

{

tras = ultima - ( ultima % 2 ? ultima % 2 : 0 )

}

ultima-=tras;

if (ultima<1) ultima+=8

return ultima;

}

function cambiarjugador() ⁄⁄1->2, 2->1

{

jug=3-jug

}

function initArray()

{

this.length = initArray.arguments.length

for (var i = 0; i < this.length; i++)

this[i+1] = initArray.arguments[i]

}

<⁄script>

Debe añadir el siguiente código a la página HTML, entre y :

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄td>

<⁄tr>

<⁄table>

Imprimir desde un enlace

redaccion — Wed, 02 May 2012 14:53:42 +0000

Cuando se están mostrando ventanas sin las barras de menús y botones en el desarrollo web, es necesario incluir en la página un enlace para permitir imprimirla. La implementación de esta funcionalidad se basa en el método print() del objeto window, que lanza la impresión de la página como si el usuario hubiera pulsado sobre la opción imprimir del menú de opciones del navegador.

function imprimir() {

if (window.print != null) {

window.print()

} else {

alert(‘Desafortunadamente, tu navegador no soporta este método de impresión.\nPor favor, selecciona la opción de Imprimir del menú de Archivo de tu navegador.’)

}

}

<⁄script>

Acceso rápido en javaScript

redaccion — Mon, 30 Apr 2012 14:58:09 +0000

La mayoría de aplicaciones están basadas en una interfaz GUI poseen lo que se conoce como teclas de acceso rápido. Son teclas que al pulsarlas realizan cierta acción. Mediante el JavaScript en diseño web podes incluir esta funcionlidad en cualquier páginas.

⁄⁄si 1 soporta el objeto Event

var Navegador = (window.Event) ? 1 : 0

⁄⁄comprueba la tecla pulsada

function CompruebaTecla(evento) {

var codigo = Navegador ? evento.which : event.keyCode

var tecla = String.fromCharCode(codigo)

for (var x = 0; x < listaURLs.length; x++) {

if ( tecla == listaURLs[x].tecla )

location.href = listaURLs[x].direccion

}

}

⁄⁄crea elemento de la lista de URLs

function objetoURL(tecla, direccion) {

this.tecla = tecla

this.direccion = direccion

}

⁄⁄crea la lista de URLs

var listaURLs = new Array()

⁄⁄especificar aqui las URLs o rutas y nombres de fichero de las paginas a mostrar

listaURLs[0] = new objetoURL(“j”, ”⁄taller⁄javascript⁄taller.html”)

listaURLs[1] = new objetoURL(“d”, ”⁄taller⁄dhtml⁄tallerdhtml.html”)

listaURLs[2] = new objetoURL(“t”, ”⁄tutoriales⁄tutoriales.html”)

listaURLs[3] = new objetoURL(“r”, ”⁄recursos⁄enlaces.html”)

listaURLs[4] = new objetoURL(“h”, ”⁄principal.html”)

⁄⁄activa la captura de eventos

if (Navegador)

document.captureEvents(Event.KEYPRESS)

document.onkeypress = CompruebaTecla

<⁄script>

Enlace sin retorno

redaccion — Sat, 28 Apr 2012 15:01:59 +0000

Para un diseño web pude implementar un enlaces que impiden que el usuario vuelva a la página anterior pulsando el botón de retroceso del navegador.

Su utilidad reside en la posibilidad de crear visitas guiadas con una secuencia que el usuario no puede alterar. Al pulsar regresar, se retrocede a la página inicial de toda la secuencia.

function IrSinRetorno(url) {

location.replace(url)

}

function AutoCarga(url) {

window.open(url, ”, ’scrollbars=yes,status=no,toolbar=no,directories=no,menubar=no,resizable=yes,width=620,height=300′)

}

<⁄script>