주말 양일간 휴식을 취하고 월요일부터 다시 시작
이번 과제는 간단한 게임을 만드는 것이었다.

  1. 하늘에서 enemy가 떨어지면 hero를 이동시켜 enemy를 없애야한다. Class를 사용하여 Object를 아래와 같이 형성하여 object 내 method를 사용했다.
class Enemy {
  constructor(enemyStartingPosition) {
    this.left = enemyStartingPosition;
    this.className = `enemies`;
    this.isDead = false;
    this.top = 0;
  }
 }
  class Hero {
  constructor(startingPosition) {
    this.left = startingPosition;
  }

Math(random) 을 사용해서 enemyStartingPosition 을 넘겨주었다.

  1. HTML에 style로 작성한 내용은 element.style.left 를 사용할 수 있지만, CSS에 작성한 내용은 window.getComputedStyle(element)를 사용하여 불러와야했다.

  2. substring()
    style.left / style.top 등의 property가 모두 500px 과 같은 string으로 이루어져있어서, substring() method를 사용하여 px 를 제거하고 parseInt()를 활용하여 숫자로 작업했다.

    moveHero() {
    let heroCurrent = window.getComputedStyle(elHero).left;
    let heroPosition = parseInt(heroCurrent.substring(0, heroCurrent.length - 1));
     if (event.keyCode === 37 && heroPosition !== 0) {
       elHero.style.backgroundPosition = "70px";
       elHero.style.left = `${heroPosition - 10}px`;
     } else if (event.keyCode === 39 && heroPosition < 760) {
       elHero.style.backgroundPosition = "36px";
       elHero.style.left = `${heroPosition + 10}px`;
     }
    }
  3. backgroundPosition

스크린샷 2019-06-10 오후 7.51.56.png

  • 어떤 방향키를 누르느냐에 따라 다른 이미지를 보여줘야하기 때문에, bacgroundPosition property를 사용했다.