jquery-11: 게임만들기 2

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

  position: absolute;

let 게임정보 = {
  맵: {
    너비: 800,
    높이: 500
  },
  플레이어: {
    너비: 100,
    높이: 100,
    속력: 10,
    x축속도: null,
    y축속도: null,
    x축좌표: 0,
    y축좌표: 0
  }
};

let 초기화 = function () {
  $("section").css("width", 게임정보.맵.너비);
  $("section").css("height", 게임정보.맵.높이);

  $("div").css("width", 게임정보.플레이어.너비);
  $("div").css("height", 게임정보.플레이어.높이);

  $("div").css("left", 게임정보.플레이어.x축좌표);
  $("div").css("top", 게임정보.플레이어.y축좌표);

  게임정보.플레이어.x축속도 = 게임정보.플레이어.속력;
  게임정보.플레이어.y축속도 = 게임정보.플레이어.속력;
};

let 플레이어_그리기 = function () {
  $("div")
    .css("left", 게임정보.플레이어.x축좌표)
    .css("top", 게임정보.플레이어.y축좌표);
};

let 플레이어_이동 = function () {
  게임정보.플레이어.x축좌표 += 게임정보.플레이어.x축속도;
  게임정보.플레이어.y축좌표 += 게임정보.플레이어.y축속도;
};

let 플레이어_벽_충돌시_방향전환 = function () {
  let x축_이동가능_거리 = 게임정보.맵.너비 - 게임정보.플레이어.너비;
  let y축_이동가능_거리 = 게임정보.맵.높이 - 게임정보.플레이어.높이;

  if (게임정보.플레이어.x축좌표 > x축_이동가능_거리) {
    게임정보.플레이어.x축속도 = 게임정보.플레이어.속력 * -1;
  } else if (게임정보.플레이어.x축좌표 < 0) {
    게임정보.플레이어.x축속도 = 게임정보.플레이어.속력;
  }
  if (게임정보.플레이어.y축좌표 > y축_이동가능_거리) {
    게임정보.플레이어.y축속도 = 게임정보.플레이어.속력 * -1;
  } else if (게임정보.플레이어.y축좌표 < 0) {
    게임정보.플레이어.y축속도 = 게임정보.플레이어.속력;
  }
};

let 게임시작 = function () {
  setInterval(function () {
    플레이어_벽_충돌시_방향전환();
    플레이어_이동();
    플레이어_그리기();
  }, 100);
};

초기화();
게임시작();

$(window).keyup(function (event) {
  if (event.keyCode == 37) {
    게임정보.플레이어.x축속도 = 게임정보.플레이어.속력 * -1;
  } else if (event.keyCode == 39) {
    게임정보.플레이어.x축속도 = 게임정보.플레이어.속력;
  } else if (event.keyCode == 40) {
    게임정보.플레이어.y축속도 = 게임정보.플레이어.속력;
  } else if (event.keyCode == 38) {
    게임정보.플레이어.y축속도 = 게임정보.플레이어.속력 * -1;
  }
});

• 기능은 전과 동일
• 추가로 방향키로도 조작할 수 있음