What is the technique for causing this element to move in reverse?

Question

What is the technique for causing this element to move in reverse?

How can I utilize JS to halt the interval and direct the alien to move backwards once it reaches 700px? I am aware that CSS can achieve this, but I prefer a strictly JS approach. I am struggling with stopping the interval as it hits the left position of 700px...

var game = document.querySelector(".game");
var character = document.createElement("div");
character.setAttribute("class", "character");
game.appendChild(character);
character.style.height = 20 + "px";
character.style.width = 20 + "px";
character.style.background = "gold";


var alien = document.createElement("div");
alien.setAttribute("class", "alien");
game.appendChild(alien);
alien.style.height = 20 + "px";
alien.style.width = 20 + "px";
alien.style.background = "red";
alien.style.position = "absolute";

function flow() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));
  alien.style.left = left + 2 + "px";
}
interval = setInterval(flow, 10);

function stop() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));
  if (left > 700) {
    clearInterval(interval);
    alien.style.left = left - 10 + "px";
  }
};
setInterval(stop, 10);

* {
  padding: 0;
  margin: 0;
}

.game {
  background: black;
  height: 100vh;
}

.character {
  position: absolute;
  top: 490px;
  left: 440px;
}

<div class="game">
</div>

Looking for some guidance here!

javascript html css

Answer 1

Answer №1

Implement a velocity variable that will toggle between 2 and -2 once it reaches the right limit. Repeat this process for the left side, switching the velocity from -2 to 2.

Since continuous movement is desired, the stop function becomes unnecessary.

var game = document.querySelector(".game");
var character = document.createElement("div");
character.setAttribute("class", "character");
game.appendChild(character);
character.style.height = 20 + "px";
character.style.width = 20 + "px";
character.style.background = "gold";

var alien = document.createElement("div");
alien.setAttribute("class", "alien");
game.appendChild(alien);
alien.style.height = 20 + "px";
alien.style.width = 20 + "px";
alien.style.background = "red";
alien.style.position = "absolute";

let velocity = 2;

function move() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));
  if (left > 700) velocity = -2;
  else if (left <= 0) velocity = 2;
  alien.style.left = left + velocity + "px";
}
interval = setInterval(move, 10);

* {
  padding: 0;
  margin: 0;
}

.game {
  background: black;
  height: 100vh;
}

.character {
  position: absolute;
  top: 490px;
  left: 440px;
}

<div class="game">
</div>

Answer 2

Implement a velocity variable that will toggle between 2 and -2 once it reaches the right limit. Repeat this process for the left side, switching the velocity from -2 to 2.

Since continuous movement is desired, the stop function becomes unnecessary.

var game = document.querySelector(".game");
var character = document.createElement("div");
character.setAttribute("class", "character");
game.appendChild(character);
character.style.height = 20 + "px";
character.style.width = 20 + "px";
character.style.background = "gold";

var alien = document.createElement("div");
alien.setAttribute("class", "alien");
game.appendChild(alien);
alien.style.height = 20 + "px";
alien.style.width = 20 + "px";
alien.style.background = "red";
alien.style.position = "absolute";

let velocity = 2;

function move() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));
  if (left > 700) velocity = -2;
  else if (left <= 0) velocity = 2;
  alien.style.left = left + velocity + "px";
}
interval = setInterval(move, 10);

* {
  padding: 0;
  margin: 0;
}

.game {
  background: black;
  height: 100vh;
}

.character {
  position: absolute;
  top: 490px;
  left: 440px;
}

<div class="game">
</div>

Answer 3

Answer №2

To adjust the position of your element, you can use left + 2 to ensure it consistently moves in one direction.

Once it reaches the 700px mark, you'll need to change it to left - 2 until it returns to 0.

In the code below, I've included a new variable called currentDirection:

var game = document.querySelector(".game");
var character = document.createElement("div");
character.setAttribute("class", "character");
game.appendChild(character);

var alien = document.createElement("div");
alien.setAttribute("class", "alien");
game.appendChild(alien);

var currentDirection = 1;
var hasMoved = false;

function flow() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));
  alien.style.left = (left + 2 * currentDirection) + "px";
}
interval = setInterval(flow, 10);

function stop() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));

  if (left > 700) {
    currentDirection = -1;
  } else if (left < 0) {
     currentDirection = 1;
  }
};
setInterval(stop, 10);

* {
  padding: 0;
  margin: 0;
}

.game {
  background: black;
  height: 100vh;
}

.character {
  position: absolute;
  top: 490px;
  left: 440px;
  background: gold;
  height: 20px;
  width: 20px;
}

.alien {
  background: red;
  height: 20px;
  width: 20px;
  position: absolute;
}

<div class="game">
</div>

Answer 4

To adjust the position of your element, you can use left + 2 to ensure it consistently moves in one direction.

Once it reaches the 700px mark, you'll need to change it to left - 2 until it returns to 0.

In the code below, I've included a new variable called currentDirection:

var game = document.querySelector(".game");
var character = document.createElement("div");
character.setAttribute("class", "character");
game.appendChild(character);

var alien = document.createElement("div");
alien.setAttribute("class", "alien");
game.appendChild(alien);

var currentDirection = 1;
var hasMoved = false;

function flow() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));
  alien.style.left = (left + 2 * currentDirection) + "px";
}
interval = setInterval(flow, 10);

function stop() {
  var left = parseInt(window.getComputedStyle(alien).getPropertyValue("left"));

  if (left > 700) {
    currentDirection = -1;
  } else if (left < 0) {
     currentDirection = 1;
  }
};
setInterval(stop, 10);

* {
  padding: 0;
  margin: 0;
}

.game {
  background: black;
  height: 100vh;
}

.character {
  position: absolute;
  top: 490px;
  left: 440px;
  background: gold;
  height: 20px;
  width: 20px;
}

.alien {
  background: red;
  height: 20px;
  width: 20px;
  position: absolute;
}

<div class="game">
</div>

What is the technique for causing this element to move in reverse?

Answer №1

Answer №2

Similar questions

Steps for retrieving multiple documents from Firestore within a cloud function

Managing array elements in React: removing and duplicating items

Stop Ajax requests when there are blank spaces in Typeahead.js

When attempting to render a base64 string in an <img> tag using ReactJS, an error message ERR_INVALID_URL is displayed

Automatically open the Chackra UI accordion upon page loading

Encountering a JavaScript runtime error while trying to access and interpret JSON

Encountering an issue with Next.js React SSR using styled-jsx: unable to access the 'state' property as

Saving the initial and final days of each month in a year using javascript

Display the picture for a few moments, then conceal it. A button will appear to reveal the following image after a short period

Resizing SVG to specify width in pixels and automatically adjust height

Unexpected element layout issues

Tips for designing a search bar using Angular

Tips for creating a responsive tab indicator in Material UI?

Several SVG Components failing to function properly or displaying differently than anticipated

Successful PHP submission confirmation

Transmit information from Ajax to CodeIgniter's controller

Is it possible to serve CSS using relative paths that go beyond the URL root?

Guidance on exporting an Excel file from an HTML table, excluding the final row, using JavaScript

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

Issues with zDepth functionality in Material-UI (React.js) not being functional