在特定位置使用 javascript 添加元素

Question

我正在创建一个小游戏以使用我的一种英语类。我已经成功添加了所有项目并创建了项目的动画。

我现在需要的是将物品放置在固定的起始位置。蓝色和红色的物品在每一侧的底角都有固定的位置，足球在任何移动之前都从中间开始。

我不知道该怎么做。请任何人帮助我或指出正确的方向。

这是我现在拥有的：

这就是我想做的事情：

到目前为止，这是我的代码

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

Answer 1

我认为您想要实现的目标可以用 CSS 完成，具体来说就是使用 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>

在特定位置使用 javascript 添加元素

Add element using javascript at specific position

javascript

css-position

appendchild