Блог

Главная - Вопросы по программированию - Как перемещать две машины по экрану с помощью JavaScript

Как перемещать две машины по экрану с помощью JavaScript

#javascript

Вопрос:

В настоящее время у меня есть две страницы CarRace.html второе-это JavaScript.js. CarRace содержит три кнопки и два изображения (каждое из которых представляет собой изображение автомобиля). При нажатии кнопки StartTrace для каждого автомобиля будет сгенерировано случайное число, которое будет повторяться каждую секунду. Сгенерированные два числа-это расстояние, на которое должно перемещаться каждое изображение. В настоящее время ничто не движется.

Код КарРаса:

 var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0

function GatherData() {
  ArandomNumber = GetRandomNumA();
  BrandonNumber = GetRandomNumB();

  var thedivtop = document.getElementById("Move1");
  x  = 10;
  thedivtop.style.left = x   'px';
  var thedivbottom = document.getElementById("Move2");
  q  = 10;
  thedivbottom.style.left = q   'px';
}

function StartRace() {
  timer = setInterval(GatherData, 1000);

}

function GetRandomNumA() {
  var x = Math.random();
  x = Math.random()   55;
  return x;
}

function GetRandomNumB() {
  var q = Math.random();
  q = Math.random()   55;
  return q;
} 
 <title>Race</title>
<script src="JavaScript.js"></script>
<style>
  .moveable {
    position: absolute;
    height: 100px;
    width: 200px;
  }
</style>
</head>

<body>
  <b>First to 800 pixels wins!</b>
  <br>
  <br>
  <b>Both cars start at 0 pixels.</b>
  <br>
  <br>
  <input id="Button1" type="button" value="Start Race" onclick="StartRace()" />
  <input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" />
  <input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" />
  <br>
  <br>
  <div id="Move1">
    <img id="Car1" class="moveable" src="delorean.jpeg" />
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div id="Move2">
    <img id="Car2" class="moveable" src="duster.jpg" />
  </div>


</body>

Комментарии:

1. У вас есть position: absolute для изображений, но вы настраиваетесь left для дивов. Кроме того, вам не нужны две случайные функции, которые делают одно и то же, и вы просто захотите return Math.floor(Math.random() * 55); туда войти. И вы захотите на самом деле использовать возвращенное значение в своем коде перемещения.

Ответ №1:

Ваш код JavaScript действительно изменяет свойство cars left , однако вам необходимо изменить свой CSS, чтобы left свойство вступило в силу.

После добавления relative позиции к элементам автомобилей они перемещаются, как и ожидалось.

 var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0

function GatherData() {
  ArandomNumber = GetRandomNumA();
  BrandonNumber = GetRandomNumB();

  var thedivtop = document.getElementById("Move1");
  x  = 10;
  thedivtop.style.left = x   'px';
  var thedivbottom = document.getElementById("Move2");
  q  = 10;
  thedivbottom.style.left = q   'px';
}

function StartRace() {
  timer = setInterval(GatherData, 1000);
}

function GetRandomNumA() {
  var x = Math.random();
  x = Math.random()   55;
  return x;
}

function GetRandomNumB() {
  var q = Math.random();
  q = Math.random()   55;
  return q;
} 
 #Move1, #Move2 {
  position: relative;
} 
 <title>Race</title>
<script src="JavaScript.js"></script>
<style>
  .moveable {
    position: absolute;
    height: 100px;
    width: 200px;
  }
</style>
</head>

<body>
  <b>First to 800 pixels wins!</b>
  <br>
  <br>
  <b>Both cars start at 0 pixels.</b>
  <br>
  <br>
  <input id="Button1" type="button" value="Start Race" onclick="StartRace()" />
  <input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" />
  <input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" />
  <br>
  <br>
  <div id="Move1">
    <img id="Car1" class="moveable" src="delorean.jpeg" />
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div id="Move2">
    <img id="Car2" class="moveable" src="duster.jpg" />
  </div>


</body>
Метки: