Почему не срабатывает условие

Я не понимаю почему не происходит движение, понимаю код плохой, не срабатывают условия после первого изменения, вот код:

var a = $('#test');
var x = 0;
var y = 0;
var right = true;
var dowm;
var left;
var up;
var n = -10

function animate() {
  if (right) {
    x += -n;
    if (x >= 100) {
      down = true;
      right = false;
    }
  }
  if (dowm) {
    y += -n;
    if (y >= 100) {
      down = false;
      left = true;
    }
  }
  if (left) {
    x -= n;
    if (x <= 0) {
      left = false;
      up = true;
    }
  }
  if (up) {
    y -= n;
    if (y <= 0) {
      up = false;
      right = true;
    }
  }
  a.offset({
    left: x,
    top: y
  });
}
setInterval(animate, 1000);
#test {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'></div>

Помогите разобраться, почему не срабатывает условие?


Ответы (1 шт):

Автор решения: StoneCountry

У тебя опечатка в коде: вместо dowM нужно написать dowN:

var x = 0;
var y = 0;
var right = true;
var down; // Здесь было dowm
var left;
var up;
var n = -10

function animate() {
  if (right) {
    x += -n;
    if (x >= 100) {
      down = true;
      right = false;
    }
  }
  if (down) { // И здесь
    y += -n;
    if (y >= 100) {
      down = false;
      left = true;
    }
  }
  if (left) {
    x -= n;
    if (x <= 0) {
      left = false;
      up = true;
    }
  }
  if (up) {
    y -= n;
    if (y <= 0) {
      up = false;
      right = true;
    }
  }
  a.offset({
    left: x,
    top: y
  });
}
setInterval(animate, 1000);
→ Ссылка