Autor Tema: JavaScript mover figura gráfico por pantalla al pulsar teclas cursor CU01161E  (Leído 13510 veces)

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Adjunto respuesta a ejercicio 2 de la entrega CU01161E del curso JavaScript:

Citar
EJERCICIO 2

Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Utiliza el evento keypress para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    h1 {
        text-align: center;
    }
    #cuadrado{
        margin:200px;
        border: solid 1px blue;
        background:yellow;
        width:300px;
        height:300px;
        position: absolute;
    }
</style>
<script>
window.onload=function(){document.onkeydown=desplazar};
    function desplazar(objeto){
    var tecla = objeto.which;
   
        var situacionY = document.getElementById("cuadrado").offsetLeft;
         var situacionX = document.getElementById("cuadrado").offsetTop;
        switch (tecla){
            case 37 :   
                cuadrado.style.left = situacionY-220+"px" ; break;
            case 38 :
                cuadrado.style.top = situacionX-220+"px" ;break;
            case 39 : 
        cuadrado.style.left = situacionY-180+"px" ;break;
            case 40 :
                cuadrado.style.top = situacionX-180+"px" ;break;
        default :alert("Se ha equivocado, debe pulsar las flechas del teclado");
        }
    }
</script>
<body>
    <h1>Pulse una flecha</h1>
    <div id="cuadrado"></div>
</body>
</html>

Para personas que vayan a hacer este ejercicio les advierto que no se les olvide añadir al estilo del div la característica de "position:absolute", me volví loco hasta que me dí cuenta.

Una pregunta para César, estuve probando lo que comentaste de onkeypress , pero no sé si es que hago algo mal , pero cuando presionas las teclas de las flechas su valor es cero. Sin embargo, con onkeyup o onkeydown salen sus valores.
« Última modificación: 02 de Diciembre 2015, 08:22 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2074
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola! He creado un nuevo tema con tu mensaje ya que consideramos que es preferible que cada propuesta de solución a ejercicios vaya en un nuevo tema para mantener los foros mejor ordenados.

Tu código funciona bien y es muy compacto, perfecto!

Citar
Una pregunta para César, estuve probando lo que comentaste de onkeypress , pero no sé si es que hago algo mal , pero cuando presionas las teclas de las flechas su valor es cero. Sin embargo, con onkeyup o onkeydown salen sus valores.

Pégame el código que no te funcione y lo miro

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".