Adjunto respuesta a ejercicio 2 de la entrega CU01161E del curso JavaScript:
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.
<!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.
Tema: JavaScript mover figura gráfico por pantalla al pulsar teclas cursor CU01161E (Leído 15193 veces)
RSS -
WAP2