title: How to add random position of image in css by the x
body: <p>I need to make a random position of image &quot;.block&quot; and make the auto reset of function when it flies down. Big thanks to everybody who will help. :)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var player = document.getElementById("player");
  var block = document.getElementById("block");
  
  function goleft(argument) {
    player.classList.add("animatel");
  
    setTimeout(function() {
      player.classList.remove("animatel");
    }, 1);
  
    console.log("left");
  }
  
  function goright(argument) {
    player.classList.add("animater");
  
    console.log("right");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: lightblue;
  }
  
  .player {
    height: 50px;
    width: 50px;
    position: relative;
    top: 450px;
  }
  
  .block {
    height: 30px;
    width: 30px;
    position: relative;
    top: -50px;
    animation: block 1s infinite linear;
  }
  
  #game {
    width: 500px;
    height: 500px;
    border: 2px solid black;
  }
  
  @keyframes block {
    0% {
      top: -50;
    }
    100% {
      top: 420;
    }
  }
  
  @keyframes gor {
    0% {
      left: 0px;
    }
    50% {
      left: 450px;
    }
    100% {
      left: 0px;
    }
  }
  
  @keyframes gol {
    0% {
      right: 450px;
    }
    50% {
      right: 0px;
    }
    100% {
      right: 450px;
    }
  }
  
  .animater {
    animation: gor 1s;
    position: relative;
  }
  
  .animatel {
    animation: gol 1s;
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="game"&gt;
  
      &lt;div id="player"&gt;&lt;img class="player" src="https://via.placeholder.com/50" alt="player box"&gt;&lt;/div&gt;
      &lt;div id="block"&gt;&lt;img class="block" src="https://via.placeholder.com/80" alt="bogdan"&gt;&lt;/div&gt;
      &lt;button onclick="goleft()"&gt;left&lt;/button&gt;
      &lt;button onclick="goright()"&gt;right&lt;/button&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>