이번 과제는 아래 그림과 같은 게임을 만드는 것인데,

스크린샷 2019-06-11 오후 4.04.42.png

  1. 왼쪽 상단의 timestamp (총60초) 간 진행되며
  2. 랜덤으로 흰색의 물체가 상단에 형성되고
  3. 흰색 물체가 아래로 떨어지기 시작한다.
  4. 아래 영웅이 좌 우로 움직이며
  5. 하늘에서 떨어진 흰색의 물체가 영웅에 닿으면 죽게된다.

위 기능들을 아래와 같이 작성했다.

1번기능 : setInterval ()

const startTheGame = () => {
  setInterval(() => {
    if (second > 0) {
      createObj();
      showTime();
    }
  }, 1000);
};

second라는 변수의 초기값을 60으로 설정하고, 1초마다 실행되는 showTime() 이라는 함수에서 second의 값이 1씩 감소하게 했다.

2번기능: class, this

class Enemy {
  constructor(enemyStartingPosition) {
    this.left = enemyStartingPosition;
    this.className = `enemies`;
    this.isDead = false;
    this.top = 0;
  }

1번기능에서 설명에서 보이는 createObj();라는 함수를 execute하면 위와 같이 classthis를 활용하여 object를 형성했다. enemyStartingPosition이라는 변수는 Math.random()을 사용하여 parameter로 넘겨주었다.

3번기능: setInterval(), this
2번 기능에서 설명한 isDead라는 key는 떨어지는 흰색 물체가 가장 아래에 도달했는지를 파악하는 변수이다. class Enemy 안에 method로 작성했다.

moveEnemies(intervalId) {
    if (this.isDead === false) {
      this.top += 10;
      this.me.style.top = this.top + "px";
    } else {
      clearInterval(intervalId);
    }
    this.removeEnemy();
  }

isDead === false 이면 아직 아래에 도달하지 않았기 때문에, 계속해서 아래로 떨어지고, isDead === true인 경우, 아래에 도착했기 때문에, clearInterval()을 사용하여 setInterval()의 가동을 멈추었다.

4번기능: this, keyCode, backgroundPosition
흰색 물체와 마찬가지로 classthis를 사용하여 영웅을 형성했다.

class Hero {
  constructor(startingPosition) {
    this.hero = elHero;
    this.left = startingPosition;
    this.hero.style.left = window.getComputedStyle(elHero).left;
  }

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

keyCode를 활용하여 왼쪽 화살표와 오른쪽 화살표에 다른 일이 일어나게 했고,
backgroundPosition을 사용하여 왼쪽을 바라볼 때와 오른쪽을 바라볼 때와 버튼을 클릭하지 않았을 때의 image를 변경했다.

5번기능:
흰색 물체와 영웅의 position이 겹치면 물체가 죽도록 했다.

  removeEnemy() {
    let heroPosition = parseInt(
      elHero.style.left.substring(0, elHero.style.left.length - 2)
    );
    let leftPosition = parseInt(
      this.me.style.left.substring(0, this.me.style.left.length - 2)
    );

    let topPosition = parseInt(
      this.me.style.top.substring(0, this.me.style.top.length - 2)
    );

    if (
      topPosition > 555 &&
      (leftPosition < heroPosition - 35 || leftPosition > heroPosition + 35)
    ) {
      this.isDead = true;
      this.me.style.display = "none";
    } else if (
      topPosition > 555 &&
      (leftPosition >= heroPosition - 35 || leftPosition <= heroPosition + 35)
    ) {
      this.me.style.backgroundPosition = "46px";
      var audio = new Audio("dying.wav");
      audio.play();
      this.me.style.top = "555px";
      this.isDead = true;
      count++;
      showCount();
      setInterval(() => {
        this.me.style.display = "none";
      }, 1000);
    }
  }

class의 method로 작성했으며, 해당 method는 흰색 물체를 이동시키는 method에서 물체가 죽었을 경우 실행시키도록 했다.