19.08.03 작업결과물

유령비가 내려와~~

오늘의 작업물

 DOM div 엘리먼트 생성, CSS 로 background image 불러옴

• 2. 히어로를 가운데서시작하도록
  3. DOM div로 이미지 컨테이너생성, 컨테이너 child로 이미지 삽입. 컨테이너 위치를 바닥, 가운데로 설정. 삽입된 이미지 position: absolute로 활용해서 원하는 이미지 부분을 불러온다.나머지 부분은 clip-path로 안보이게 삭제,
• 3. 키이벤트 -> 좌우 누를때 히어로 움직이게
  4. 키입력( 좌, 우 키 ) 값을 불러와서 해당 키값별로 컨테이너의 left 값을 조정한다. 히어로 이미지도 수정해서 좌 , 우 모습이 다르게 나오게 한다. 그리고 키입력이 끝나면 다시 정면 모습이 보이게 한다.
• 4. 바탕화면 끝 도달하면 더이상 움직이지 않도록
  5. 컨테이너의 위치값 범위를 지정해서 범위 안에서만 움직이도록 한다.
• 5. 귀신 하늘에서 시작하도록
  6. 히어로와 마찬가지로 엘리먼트생성하고 이미지를 넣는다
• 6. 랜덤한 x의 위치에서 소환
  7. Math.floor(Math.random* (최대값 - 최소값)+ 최소값

  랜덤 함수로 absoulte position 설정해버림.

• 7. 귀신 시작한 위치에서 y를 아래로 내려주시면 됩니다.
  8. setInterval을 이용해서 주기적으로아래로 움직임 부여.
• 8. 바닥 도착 하면 죽음
  9. 좌표 바닥 도착후, clearInterval로 계속 실행 되는거 방지
  10. 유령의 이미지 변경
  11. 5초후 setTimeout 으로 유령이미지 컨테이너 삭제해버림