html - 编程网站中的随机图像位置？

Question

我想做到这一点，以便让“敌人”在特定网页的背景(不是背景，只是其顶部的图像)中以随机高度生成并在屏幕上滚动。现在我有类似的东西:

<script>
    function numberRandomizer(){
      var x = Math.floor((Math.random() * 500) + 300); //random number between 300 and 800
      return x;
    }
  </script>

我已经尝试了 2 种方法来将这个随机变量 X 应用于通过在屏幕上滚动循环的图像:

1) 按照我认为可行的方式编辑每张图片以获得顶部和左侧的随机值

  <marquee behavior="scroll" direction="left" scrollamount="numberRandomizer()"><img src="/aboutme/enemy.png" width="120" height="80" top="numberRandomizer()" left="numberRandomizer()"/><p></marquee>

2) 尽管据我所知这会使所有敌人都处于相同的位置，但尝试使用 CSS 样式使位置随机化，看看它是否可行:

 <style>
    img {
      top: numberRandomizer();
      left: numberRandomizer();
    }
  </style>

这两种样式都无法为图像位置设置随机值，我是犯了一个小错误还是以完全错误的方式解决了这个问题？

作为奖励问题:是否可以将选取框设置为每张图像随机移动一个方向？

Answer 1

你也可以使用普通的 javascript 做同样的事情

html:

<marquee behavior="scroll" direction="left" id="elem">Test</marquee>
<br/>
<button id="butR">Right</button>
<button id="butL">Left</button>

<div class="area">
<div id="enemy"></div>
</div>

Js:

document.getElementById('butR').addEventListener("click", function(){
    document.getElementById('elem').setAttribute("direction", "right");   
});

document.getElementById('butL').addEventListener("click", function(){
    document.getElementById('elem').setAttribute("direction", "left");   
});

function numberRandomizer(){
  var x = Math.floor((Math.random() * 250) + 50); //random number between 50 and 300
  return x;
}


document.getElementById('enemy').style.top = numberRandomizer() + 'px';
document.getElementById('enemy').style.left = numberRandomizer() + 'px';

我还添加了一种改变品牌方向的方法。看看这个 fiddle :

https://jsfiddle.net/oyv324z9/