TIL : Subclass Dance Party

OOP와 프로토타입을 기반으로 이번에는 댄서들이 춤추도록 만드는 스프린트이다! 빨간 점의 예시는 춤춘다(?)고 하긴 그렇지만 CSS를 바꾸고 이것저것 하면 나만의 댄스 파티(?) 스프린트를 완성할 수 있다.

---

1. 리팩토링 (ES5 & ES6)

다른 기능을 추가하기 전에 먼저 dancer.js와 blinkyDancer.js와 init.js 파일을 ES5(pseudoclassical) 및 ES6 방법으로 리팩토링 해야 한다. 클로저를 이용한 functional pattern으로 코드가 이미 작성되어 있으므로 이를 리팩토링하면 되는데 BeesBeesBees 스프린트와 비슷해서 금방 했던 것 같다. step함수를 작성할 때 안에 setTimeout을 넣게 되는데 setTimeout은 비동기로 실행되므로 bind로 this를 지정해주어야 한다는 것을 주의해야 한다. pseudoclassical을 작성할 때는 prototype과 Object.create을 쓰는 것 빼곤 거의 비슷한 방식으로 작성하면 된다. init.js를 쓸 때는 new (+class)를 붙이는 것을 주의해야 한다!!

//DancerClass.js(ES6)
step() {
  setTimeout(this.step.bind(this), this.timeBetweenSteps);
} //setTimeout은 비동기로 실행되므로 bind로 this를 지정해주어야 한다.

//init.js(ES6)
let dancer = new BlinkyDancerClass(
  document.body.clientHeight * Math.random(),
  document.body.clientWidth * Math.random(),
  Math.random() * 2000
);

---

2. 어몽어스👻

나는 우선 CSS에서 전체 테마를 어몽어스로 잡아서 원래 빨간 점이었던 댄서(?)들을 임포스터들로 바꿔주었다. 그리고 한 줄로 정렬해주는 line up 버튼을 만들고 초기화 버튼을 만들어주었다. + 임포스터에 마우스를 놓으면 크기가 커지고, 클릭하면 시체(ㅠ)와 함께 없어진다!!

 

임포스터 생성

 

임포스터 가운데 정렬