jquery-10: 게임만들기 1

<section>
  <div></div>
</section>

section {
  width: 1000px;
  height: 400px;
  border: 5px solid blue;
  position: relative;
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

let x = 0;
let y = 0;

let x축방향 = "오른쪽";
let y축방향 = "위쪽";

let 맵 = {
  width: 1000,
  height: 400
};

let 사각형 = {
  width: 100,
  height: 100
};

function 사각형_움직이다() {
  if (x축방향 == "오른쪽") {
    x++;
  } else {
    x--;
  }
  if (x > 맵.width - 사각형.width) {
    x축방향 = "왼쪽";
  } else if (x <= 0) {
    x축방향 = "오른쪽";
  }

  if (y축방향 == "아래쪽") {
    y++;
  } else {
    y--;
  }
  if (y > 맵.height - 사각형.height) {
    y축방향 = "위쪽";
  } else if (y <= 0) {
    y축방향 = "아래쪽";
  }

  // console.log(x);
  // console.log(y);
  $("div").css("left", x);
  $("div").css("top", y);
}

setInterval(사각형_움직이다, 10);

• x축과 y축은 맵의 witdh와 height보다 크기 전까지는 값이 커지다가(각각 x축, y축으로 가다가) 맵보다 커지면 다시 값이 감소됨