Ad

Add Element Using Javascript At Specific Position

- 1 answer

I'm creating a small game to use in one of my English classes. I've managed to add all the items and create the animations of the items.

What I need now is to place the items in their fixed and starting positions. The blue and red items have their fixed positions at the bottom corner of each side and the soccerball starts in the middle before any movement.

I don't know how to do this. Can anybody help me or point me in the right direction, please.

This is what I have now: have

This is what I would like to do:

want

This is my code so far

<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>
Ad

Answer

I think what you want to achieve can be done with CSS, specifically by using 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>

Ad
source: stackoverflow.com
Ad