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:

This is what I would like to do:

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>