Subclass Dance Party

Subclass Dance Party 스프린트는 객체 지향 프로그래밍의 상속과 다형성의 특징을 코드로 직접 구현해보는 것이었다. 먼저 Functional로 작성되어 있는 코드를 Pseudoclassical과 ES6 Class로 각각 리팩토링 한 후, 둘 중 한가지 방식을 선택하여 JS와 CSS를 활용하면 됐다.

1. Pseudoclassical & ES6 Class 리팩토링(문제점 위주)

리팩토링은 이전 스프린트에서 다뤘기 때문에 큰 어려움 없이 구현할 수 있었지만, HTML파일 실행 시 'add a blinky dancer'버튼이 제대로 작동하지 않는다는 문제가 있었다(콘솔창에서 봤을 때 <span>요소가 같은 자리에만 계속 찍힘).

class DancerClass {
  // your code here
  constructor(top, left, timeBetweenSteps) {
    this.$node = this.createDancerElement();
    this.timeBetweenSteps = timeBetweenSteps;
    this.top = top;
    this.left = left;
    this.step();
    this.setPosition();
  }

하루 정도의 고민 끝에 class 상속 시 생성자 함수(constructor)에 매개변수를 넣어주지 않아 blinky dancer가 나타나는 자리가 고정되어 있음을 알게 되었고, 상위 class(DancerClass)와 동일한 매개변수를 넣어주자 드디어 제대로 작동하는 것을 확인하였다.

class BlinkyDancerClass extends DancerClass {
  // your code here
  constructor(top, left, timeBetweenSteps){
    super(top, left, timeBetweenSteps);
  } //상속시 매개변수 필요

  step(){
    super.step();
  }
}

2. JS & CSS 활용

JS와 CSS를 활용하는 부분은 크게 1)HTML실행 화면에 나타난 Dancer가 1초 간격으로 좌우로 이동하는 것, 2)그 Dancer를 클릭하면 Dancer가 사라지고 다른 이미지가 나타나도록 하는 것, 3)Dancer가 사라지고 나타난 이미지에 마우스를 가져다 대면 360도 회전하도록 하는 것으로 구현해 보았다.

1) CSS의 animation효과를 활용하여 구현

.mole {
  width: 200px;
  height: 200px;
  position: relative;
  animation-name: mole;
  animation-duration: 1s; //애니메이션 지속 시간(1초)
  animation-timing-function: linear; //애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행
  animation-iteration-count: infinite; // 애니메이션 반복 횟수(무한대)
  animation-direction: alternate; //애니메이션 진행 방향(반복)
}
@keyframes mole {
  0% {left:0pxl; top:0px;}
  100% {left:200px; top:0px;}
} //애니메이션에 대한 키 프레임(keyframe) 정의

2) Dancer에 addEventListener 메소드를 활용하여 구현

createDancerElement() {
    let elDancer = document.createElement('span');
    elDancer.className = 'dancer';
    let elDancer2 = document.createElement('img');
    elDancer2.src = 'images/mole.gif';
    elDancer2.className = 'mole';
    elDancer.appendChild(elDancer2);
    elDancer2.addEventListener('click', function () {
      elDancer.removeChild(elDancer2);
      let elDancer3 = document.createElement('img');
      elDancer3.src = 'images/hole2.png';
      elDancer3.className = 'hole';
      elDancer.appendChild(elDancer3);
    }) //두더지(elDancer2)를 클릭하면 없어지고 hole(elDancer3)이 생김
    return elDancer;
  }

3) CSS transition으로 애니메이션 속도를 설정하고, 마우스를 이미지에 올렸을 때(hover) 회전하도록 transform rotate로 회전 각도를 설정함

.hole {
  width: 150px;
  height: 50px;
  transition: all ease 1s;
}
.hole:hover{
  transform: rotate(360deg);
}