Estoy creando un pequeño juego para usar en una de mis clases de inglés. Logré agregar todos los elementos y crear las animaciones de los elementos.
Lo que necesito ahora es colocar los elementos en sus posiciones fijas y de inicio. Los elementos azul y rojo tienen sus posiciones fijas en la esquina inferior de cada lado y el balón de fútbol comienza en el medio antes de cualquier movimiento.
No se como hacer esto. ¿Alguien puede ayudarme o indicarme la dirección correcta, por favor?
Esto es lo que me gustaría hacer:
Este es mi código hasta ahora
<script> //Set Background document.body.style.backgroundImage = "url('./back.jpg')"; document.body.style.backgroundSize = 'contain'; document.body.style.backgroundRepeat = 'no-repeat'; document.body.style.backgroundPosition = 'center'; document.body.style.backgroundSize = '100%'; //Add images function show_image(src, width, height, alt, id) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; img.id = id; if (id == "s") { img.style.position = "center" } document.body.appendChild(img); } show_image("./b.png", 100, 100, "btnBlue", "b") show_image("./r.png", 100, 100, "btnRed", "r") show_image("./s.png", 100, 100, "btnSoccerBall", "s") //Add onclick document.getElementById("b").addEventListener("click", myMoveLeft); document.getElementById("r").addEventListener("click", myMoveRight); //Add animation var item = document.getElementById('s'); var anim; var x = 0, y = 0; function myMoveLeft() { anim = item.animate([ // keyframes { transform: `translate(${x}px, ${y}px)` }, { transform: `translate(${x - 60}px, ${y}px)` } ], { duration: 1000, iterations: 1, fill: 'forwards' }); x -= 60; } function myMoveRight() { anim = item.animate([ // keyframes { transform: `translate(${x}px, ${y}px)` }, { transform: `translate(${x + 60}px, ${y}px)` } ], { duration: 1000, iterations: 1, fill: 'forwards' }); x += 60; } item.addEventListener('animationend', () => { console.log('Animation ended'); }); </script>
Creo que lo que quieres lograr se puede hacer con CSS, específicamente usando Flexbox .
body { font-family: Arial, Helvetica, sans-serif; font-size: 5rem; } .btnBlue { color: blue; } .btnRed { color: red; } .btnSoccerBall { color: white; position: relative; margin: auto; } .soccer-field { background-color: lightgreen; height: 100vh; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0 20px; /*optional*/ }
<html lang="en"> <body> <div class="soccer-field"> <div class="btnBlue">O</div> <div class="btnSoccerBall">O</div> <div class="btnRed">O</div> </div> </body> </html>