Los eventos del teclado tienen propiedades únicas asignadas a sus objetos de evento, como la .key propiedad que almacena los valores de la tecla presionada por el usuario. Puede programar la función del controlador de eventos para que reaccione a una tecla específica o a cualquier interacción con el teclado.
<div id="container">
<h1>Ball Bounce</h1>
<p>Let's dribble the ball on the platform using any key on your keyboard. Hold a key down to lift the ball, then release the key to drop the ball.</p>
<!--<button id='button'>Reset</button>-->
<div id="float-circle" style="bottom: 50px;"></div>
<div id="platform"></div>
<div id="floor"></div>
</div>
<style>
#container {
background: #6400e4;
width: 100vw;
height: 100vh;
margin: 0;
float: left;
}
#float-circle {
width: 100px;
height: 100px;
background: #fd4d3f;
border-radius: 100px;
bottom: 50px;
left: 50%;
position: absolute;
transition-property: bottom;
transition-duration: 2s;
}
#platform {
width: 100px;
height: 50px;
background: #efd9ca;
bottom: 0;
position: absolute;
left: 50%;
right: 50%;
}
#floor {
width: 100%;
height: 30px;
background: #6df0c2;
bottom: 0;
position: absolute;
}
</style>
<script>
let ball = document.getElementById('float-circle');
// Write your code below
function up(){
ball.style.bottom="250px";
}
function down(){
ball.style.bottom="50px";
}
document.addEventListener("keydown",up);
document.addEventListener("keyup",down);
</script>
