Efecto al pulsar una serie de teclas

pekpon · #1 (**permalink**) 21/06/2008, 08:10

Buenas a todos,

Tengo una pagina web, y basandome en el script de los copos de nieve, que van cayendo suavemente por la pantalla, me gustaria que al pulsar una serie de teclas en el teclado, por ejemplo "12345", un ejemplo tipo el de los copos de nieve succeda. No se si es posible, pero vi el comando keypress o algo asi y se me ocurrio preguntar.

Luego si esto es posible, me gustaria que callese una imagen en .png, es decir, en ve de un copo de nieve, una imagen distinta, supongo que esto se hara con capas, pero no tengo ni idea de como.

Espero que me ayuden.

Muchas gracias de antemano.

derkenuke · #2 (**permalink**) 21/06/2008, 08:43

Hola pekpon:

La respuesta es Sí, sí se puede.

Ahora, ¿en que te podemos ayudar? Porque una cosa es una duda concreta y otra que te programemos un script entero... que si hay alguien que te lo haga bien, pero partir de cero es un poco costoso...

Saludos.

pekpon · #3 (**permalink**) 21/06/2008, 09:25

Bien pues tienes razon. Parto de 0, y mi nivel de javascript es bastante basico, nada mas de algun if...algun while y algo mas.

El caso es, alguien me puede poner un script basico tipo:

if( teclas_presionadas == 12345)
{
alert("algooooo");
}

no quiero mas de momento, luego ya investigare sobre lo otro, pero de momento necesito saber como se llama la condicion que ve las teclas que presionamos.

Muchas gracias

derkenuke · #4 (**permalink**) 21/06/2008, 10:15

Hola de nuevo pekpon:

Bueno, no es tan sencillo como has posteado pero casi. Si buscas detectar+tecla+pulsada+javascript puedes encontrar información al respecto. La fórmula básica para detectar la tecla es así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
 
</style> 
</head> 
 
<body onkeypress="tecla(event)"> 
 
 
<script type="text/javascript"> 
<!-- 
 
var keyCode; 
function tecla(e){ 
    if(window.event) 
        keyCode=window.event.keyCode; 
    else if(e)  
        keyCode=e.which; 
    alert(keyCode) 
} 
 
// --> 
</script> 
 
</body> 
</html>

En IE es diferente que con el resto de navegadores, para variar; por eso la condicional.

Así tendrás un valor de tecla. Ahora tenemos que medir la secuencia deseada: 1,2,3,4,5; o en valores 49, 50, 51, 52, 53. Voy a poner un contador llamado i que contendrá siempre valores de 0,1,2,3,4. Cuando el usuario pulse la tecla 49 el contador se pondrá a 1, su seguidamente pulsa 50 se pondrá a 2, y así sucesivamente. Si pulsa otra tecla el contador pasará a 0, teniendo que volver a empezar. Pero si pulsa las teclas en el orden correcto entonces i será 4 y se habrá pulsado 53 y se lanzará un alert(), o lo que tú desees:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
 
</style> 
</head> 
 
<body onkeypress="tecla(event)"> 
 
 
<script type="text/javascript"> 
<!-- 
 
var keyCode, i=0; 
function tecla(e){ 
    if(window.event) 
        keyCode=window.event.keyCode; 
    else if(e)  
        keyCode=e.which; 
    if( i===0 && keyCode===49 ) 
        i = 1; 
    else if( i===1 && keyCode===50 ) 
        i = 2; 
    else if( i===2 && keyCode===51 ) 
        i = 3; 
    else if( i===3 && keyCode===52 ) 
        i = 4; 
    else if( i===4 && keyCode===53 ) { 
        i = 0; 
        alert("Has pulsado la secuencia correcta!"); 
    } 
    else 
        i = 0; 
} 
 
// --> 
</script> 
 
</body> 
</html>

Así que si se pulsa la secuencia correcta Bang!, y si no, pues nada.

Espero que te sirva.

Saludos!

pekpon · #5 (**permalink**) 22/06/2008, 16:37

Fantastico macho, que script tan bueno!!!!
Al principio me costo entender, que el codigo 49 era un "1" pero en cuanto lo vi, vi lo bueno que era el script.

Muchas gracias de verdad, estas hecho un monstruo!

Saludos

pekpon · #6 (**permalink**) 22/06/2008, 17:10

SOLO una cosa mas.
Tengo un script, que hace que caigan copos de nieve, este:

Código:

/******************************************
* Snow Effect Script- By Altan d.o.o. ([email protected], http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/


//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"><\/layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

El caso es, que en cuanto pego todo este codigo, a partir del alert, que es la zona que se ejecuta si las teclas son bien presionadas no me funciona. Si lo quito me hace el alert, pero si pongo ese codigo a continuacion, no me caen ni copos, ni me hace el alert.

Muchas gracias por todo

derkenuke · #7 (**permalink**) 22/06/2008, 19:09

Huy, me acuerdo de ese código, estuvimos hablando de él por aqui:
http://www.forosdelweb.com/f13/scrip...10/index2.html

Pero es muy antiguo. Incluso plantee la mejora de que los copos se quedasen abajo acumulados... me pareció mas atractivo (habría que ir borrandolos alguna vez porque se acumulan demasiados...). Había que quitarle la detección del browser, que ya no sirve para nada, y reducir líneas.

Es normal que no te funcione pegando, no se puede pegar por pegar: ese código contiene funciones y demás elementos. Es más complicado.

Bueno, te dejo aquí el código modificado, y con la secuencia de botones. Como ves en vez del alert() hay que poner snow() para que nieve, y listo. Los copos inicialmente los dibujo ocultos, y luego a la hora de hacer llover los muestro:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
body { height: 100%; }  
</style> 
</head> 
 
<body onkeypress="tecla(event)"> 
 
 
<script type="text/javascript"> 
<!-- 
 
 
/****************************************** 
* Snow Effect Script- By Altan d.o.o. ([email protected], http://www.altan.hr/snow/index.html) 
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code 
* Modified Dec 31st, 02' by DD. This notice must stay intact for use 
(modificado por derkeNuke, también ;-) ) 
******************************************/ 
 
 
//Configure below to change URL path to the snow image 
// por ejemplo: http://fresh.t-systems-sfr.com/unix/src/privat2/mweather-0.6.0.tar.gz:a/mweather/images/snow.gif 
var snowsrc="http://www.ahiva.info/public/galeria/santa09.gif"; 
var imgWidth = 50, imgHeight = 50;        // dimensiones de snowsrc 
// Configure below to change number of snow to render 
var no = 10; 
 
 
var dx, xp, yp; // coordinate and position variables 
var am, stx, sty; // amplitude and step variables 
var abajoN = 0; 
 
var doc_width = document.body.clientWidth || window.innerWidth; 
var doc_height = document.body.clientHeight || window.innerHeight; 
 
dx = new Array(); 
xp = new Array(); 
yp = new Array(); 
am = new Array(); 
stx = new Array(); 
sty = new Array(); 
scrollY = new Array(); 
 
for (var i=0; i < no; ++ i) {  
    dx[i] = 0; // set coordinate variables 
    xp[i] = Math.random()*(doc_width-imgWidth);    // set position variables 
    yp[i] = Math.random()*(doc_height-imgHeight); 
    am[i] = Math.random()*20;                // set amplitude variables 
    stx[i] = 0.02 + Math.random()/10;            // set step variables 
    sty[i] = 0.7 + Math.random();                // set step variables 
    scrollY[i] = 0;                            // scrollY para cada punto 
    document.write('<div id="dot'+i+'" style="POSITION: absolute; Z-INDEX: '+i+'; width:'+imgWidth+'px; height:'+imgHeight+'px; background: url('+snowsrc+') no-repeat; display:none;">&nbsp;</div>'); 
} 
 
 
 
function snow() { 
    for (var i=0; i < no; ++ i) { // iterate for every dot 
        yp[i] += sty[i];            // un paso más en la coordenada Y 
        if (yp[i] > doc_height-50) {        // Si nos salimos de la pantalla por abajo con el copo 
            // Que el copo vuelva a su nueva regeneración, sí, pero dejaremos una copia allí donde estuviera cuando llegue abajo 
            var copia = document.getElementById("dot"+i).cloneNode(true); 
            copia.setAttribute("id", "abajo"+abajoN++); 
            document.body.appendChild( copia ); 
            // generamos la nueva posición y las nuevas variables para este copo 
            xp[i] = Math.random()*(doc_width-am[i]-imgHeight);        // Generamos una X aleatoria 
            yp[i] = 0;                                        // Reseteamos la posición Y 
            stx[i] = 0.02 + Math.random()/10;                // Inicializamos de nuevo los stepX e stepY 
            sty[i] = 0.7 + Math.random(); 
        } 
        dx[i] += stx[i];            // Un paso más en la coordenada X 
         
        document.getElementById("dot"+i).style.top = (yp[i] + scrollY[i]) + "px"; 
        document.getElementById("dot"+i).style.left = (xp[i] + am[i]*Math.sin(dx[i])) + "px"; 
 
    } 
    setTimeout("snow()", 10); 
} 
 
window.onscroll = function() { 
    var scrTop = window.document.documentElement.scrollTop; 
    for (var i=0; i < no; ++ i) { 
        scrollY[i] = scrTop; 
    } 
    for(var i=0; i<abajoN; i++) { 
        document.getElementById("abajo"+i).style.top = (scrTop+doc_height-imgHeight) + "px"; 
    } 
} 
 
 
 
 
 
 
var keyCode, i=0; 
function tecla(e){ 
    if(window.event) 
        keyCode=window.event.keyCode; 
    else if(e)  
        keyCode=e.which; 
    if( i===0 && keyCode===49 ) 
        i = 1; 
    else if( i===1 && keyCode===50 ) 
        i = 2; 
    else if( i===2 && keyCode===51 ) 
        i = 3; 
    else if( i===3 && keyCode===52 ) 
        i = 4; 
    else if( i===4 && keyCode===53 ) { 
        i = 0; 
        // hay que poner que los copos sean visibles: 
        for (var x=0; x < no; ++ x) {  
            document.getElementById("dot"+x).style.display = "block"; 
        } 
        // nevar 
        snow(); 
    } 
    else 
        i = 0; 
}  
 
 
// --> 
</script> 
 
</body> 
</html>

Bueno, espero que así quedes satisfecho.

Saludos

pekpon · #8 (**permalink**) 24/06/2008, 06:23

Tio, eres un maquina!

Muchisimas gracias, por todo , te lo has currado, y me has dado la solucion EXACTA!
Muchisimas gracias ;)

Saludos

derkenuke · #9 (**permalink**) 24/06/2008, 06:30

De nada, para eso estamos.

Hasta otra