28m28misha10
@28m28misha10
Люблю кодить

Как сделать так чтобы обьект не мог заходить на другой в игре JS?

У меня есть код:
<p id="moto" style="position:absolute; top:100px; left:0px">1</p>
<input type="button" value="|" onclick="car_down()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value="^" onclick="car_up()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value="<" onclick="car_left()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value=">" onclick="car_right()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<div id="qwerty">qwerty</div>
<script>
function car_down () {x = 0;
x = document.getElementById("moto").offsetTop;
xn = x + 50;
document.getElementById("moto").style.top = xn+"px"
}
function car_up () {
x = 0;
x = document.getElementById("moto").offsetTop;
xn = x - 50;
document.getElementById("moto").style.top = xn+"px"
}
function car_left () {
x = 0;
x = document.getElementById("moto").offsetLeft;
xn = x - 50;
document.getElementById("moto").style.left = xn+"px"
}
function car_right () {
x = 0;
x = document.getElementById("moto").offsetLeft;
xn = x + 50;
document.getElementById("moto").style.left = xn+"px"
}
</script>

как можно сделать так чтобы перемещаемый текст не мог заходить на div:
<div id="qwerty">qwerty</div>
Я в JS "0" Пожалуеста можете весь код расживать и прокоментировать
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 1
Bavashi
@Bavashi
Попробуйте так:
Код для теста
<p id="moto" style="position:absolute; top:100px; left:0px">1</p>
<input type="button" value="|" onclick="car_down()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value="^" onclick="car_up()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value="<" onclick="car_left()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value=">" onclick="car_right()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<div id="qwerty">qwerty</div>
<script>
  let windowWidth = window.innerWidth;
  let windowHeight = window.innerHeight;

  function car_down() {
    x = document.getElementById("moto").offsetTop;
    xn = x + 50;
    if (xn > windowHeight) {
      xn = windowHeight - 50;
    }
    document.getElementById("moto").style.top = xn + "px";
  }

  function car_up() {
    x = document.getElementById("moto").offsetTop;
    xn = x - 50;
    if (xn < 50) {
      xn = 50
    }
    document.getElementById("moto").style.top = xn + "px";
  }

  function car_left() {
    x = document.getElementById("moto").offsetLeft;
    xn = x - 50;
    if (xn <= 0) {
      xn = 0;
    }
    document.getElementById("moto").style.left = xn + "px"
  }

  function car_right() {
    x = document.getElementById("moto").offsetLeft;
    xn = x + 50;
    if (xn >= windowWidth) {
      xn = windowWidth - 50;
    }
    document.getElementById("moto").style.left = xn + "px"
  }
</script>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы