如何使用 JavaScript 在屏幕上移动两个不同的图像

Question

我遇到了一个网站的挑战，该网站要求我让两张图片在屏幕上随机比赛到终点线。我需要使用 JavaScript 来实现这一点。不幸的是，我在这里遇到了一些麻烦。

我的脚本允许 div 容器和对象“动画”（这是一个小方块）按照我应该做的那样在屏幕上向右移动。当尝试对两个不同的图像执行此操作时，我的问题就发挥了作用。

目标是让我创建的动画应用于图像，我不知道如何将功能应用于已经放置在页面上的图像，以使其看起来好像它们在整个页面上以随机间隔运行页面到终点线。

我了解动画的概念及其背后的 JavaScript，但我只是不明白如何将其应用于图像，以及超过 1 个图像。

请指教。

这是我正在使用的代码：您可以看到我在页面上留下了演示动画，以及我希望将其应用到的两个图像。

function myMove() 
{
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() 
  {
    if (pos == 350) 
    {
      clearInterval(id);
    } 
    else 
    {
      pos++; 
      elem.style.left = pos + 'px'; 
    }
  }
}

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="yeildLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

<style>
  body {
    overflow: hidden;
  }

  #bluefish {
    position: absolute;
    top: 31pc;
    width: 17pc;
    left: -.5pc;
  }

  #turtle {
    position: absolute;
    width: 15pc;
    top: 20pc;
  }

  body {
    background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
  }

  .finishline {
    position: absolute;
    right: -12pc;
    top: 18pc;
  }

  #traffic-light {
    height: 10pc;
    width: 4pc;
    background-color: #333;
    border-radius: 20pc;
    position: absolute;
  }

  .bulb {
    height: 2pc;
    width: 2pc;
    background-color: #111;
    border-radius: 50%;
    margin: 15px auto;
    transition: background 500ms;
  }

  #container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
</div>

Answer 1

试试这个：

function myMove() 
{
  var elemBluefish = document.getElementById("bluefish");
  var elemBluefishWin = document.getElementById("bluefishwin");
  var elemTurtle = document.getElementById("turtle");
  var elemTurtleWin = document.getElementById("turtlewin");
  
  var posBluefish = 0;
  var posTurtle = 0;

  var hasWinner = false;
  elemBluefishWin.style.display = 'none';
  elemTurtleWin.style.display = 'none';
  
  var id = setInterval(frame, 5);
  function frame()
  {
    if(posBluefish >= 350 && posTurtle >= 350)
    {
      clearInterval(id);
      return;
    }

    if(posBluefish < 350)
    {
      posBluefish += Math.round(Math.random()*10);
      if(posBluefish >= 350)
      {
        posBluefish = 350;
        if(!hasWinner){
          hasWinner = true;
          elemBluefishWin.style.display = 'unset';
        }
      }
      elemBluefish.style.left = posBluefish + 'px';
    }

    if(posTurtle < 350)
    {
      posTurtle += Math.round(Math.random()*10);
      if(posTurtle >= 350)
      {
        posTurtle = 350;
        if(!hasWinner){
          hasWinner = true;
          elemTurtleWin.style.display = 'unset';
        }
      }
      elemTurtle.style.left = posTurtle + 'px';
    }
  }
}

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="yeildLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

<style>
  body {
    overflow: hidden;
  }

  #bluefish {
    position: absolute;
    top: 31pc;
    width: 17pc;
    left: -.5pc;
  }

  #turtle {
    position: absolute;
    width: 15pc;
    top: 20pc;
  }
  
  #bluefishwin {
    position: absolute;
    right: 1pc;
    top: 31pc;
    display: none;
  }
  
  #turtlewin {
    position: absolute;
    right: 1pc;
    top: 20pc;
    display: none;
  }

  body {
    background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
  }

  .finishline {
    position: absolute;
    right: -12pc;
    top: 18pc;
  }

  #traffic-light {
    height: 10pc;
    width: 4pc;
    background-color: #333;
    border-radius: 20pc;
    position: absolute;
  }

  .bulb {
    height: 2pc;
    width: 2pc;
    background-color: #111;
    border-radius: 50%;
    margin: 15px auto;
    transition: background 500ms;
  }

  /*#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }*/
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">

<p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
</div>

它为每个图像获取一个元素，并每 5ms 将随机数量的像素（0 到 9 之间）添加到图像的每个位置。 如果两个“赛车手”都达到了目标（350 像素），则间隔被清除并且比赛结束。 获胜者将获得显示在终点线上的图像。

Answer 2

一个例子：

function startRace() {
  animateRacer("player1", true);
  animateRacer("player2", true);
}

function animateRacer(playerId, reset) {
  var elem = document.getElementById(playerId);
  var pos = parseInt(elem.style.left, 10);
  if (isNaN(pos) || reset) {
    pos = 0;
  }
  //console.log(playerId + ': ' + pos);

  if (pos < 450) {
    pos += randStep(3);
    elem.style.left = pos + 'px';
    setTimeout('animateRacer("' + playerId + '")', randStep(5));
  }
}

function randStep(max) {
  var min = 1;
  return Math.floor(Math.random() * (max - min)) + min;
}

body {
  overflow: hidden;
}

#container {
  width: 500px;
  height: 160px;
  position: relative;
  background-color: yellow;
}

.player {
  width: 50px;
  height: 50px;
  background-color: gray;
  position: relative;
}

#player1 {
  background-color: red;
  top: 20px;
}
#player2 {
  background-color: blue;
  top: 40px;
}

<p>
  <button onclick="startRace()">Start Race</button>
</p>

<div id="container">
  <div id="player1" class="player"></div>
  <div id="player2" class="player"></div>
</div>

Answer 3

function mover(obj) { 
this.obj=obj;
this.pos = 0; 
this.id = setInterval(this.frame, 5);   
} 
mover.prototype.frame=function() { 
 if (this.pos == 350) { 
clearInterval(this.id); 
} else { 
this.pos++; 
this.obj.style.left = this.pos + 'px'; 
} 
} 
}

简单地做：

img1=new mover(document.getElementById("pic1"));

您可以对每张图片重复此操作，并将它们存储到一个数组中：

images=[]; 
function letsmove(){
images.push(new mover(someid));
...
}

您可以对网站上的所有图片执行此操作：

images=[]; 
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}

更多解释请参见 JS OOP 和 JS Prototyping