이번에는 히어로의 죽는 모션과 충돌 모션을 넣는다.
여태까지 했던 것과 똑같이 사진을 keyframe모션으로 이미지를 크기 지정 해서 넣고 나오는 것은 if문을 사용하여 hp가0이 되었을때 캐릭터가 죽는 모션을 넣고 충돌하였을때 모션은 히어로hp가 깎일때 충돌 모션이 나오게 만든다.
이때 충돌 후 원래 모션으로 돌아가지 않는 문제가 존재하는데 이때는 setTimeout을 이용하여 crash 클래스를 삭제한다.
0.4초 후에 충돌 모션이 사라지게 만들면 충돌 후 충돌 애니메이션이 나오고 그 후 원래 일반 애니메이션으로 돌아온다.
죽었을때는 저번에 사용하였던 dead를 가져와 dead가 출력되면 죽은 모션이 나오게 만든다.
이번에는 게임이 끝날때 game over로 게임 종료 처리를 한다.
html 파일에 game over class를 새로 만들고 css에서 game over일 때 화면을 살짝 검게 그리고 game over글자를 나타나게 만든다.
이번에는 데미지 엘리먼트를 만들어 데미지를 나오게 만든다.
여태까지 해왔던 것과 같이 수리검이 충돌하였을때 damageView 메소드를 만들고 damageView를 css에서 꾸민다.
데미지를 꾸민 후 랜덤으로 위치를 나타내기 위해 keyframe을 사용하여
@keyframes textDamage {
0% {opacity: 0; bottom:0;}
70% {opacity: 1; bottom:50px;}
100% {opacity: 0; bottom:90px;}
}
이렇게 하여 데미지가 위로 올라가면서 점점 연해 지도록 만들었다.
그리고 여기damageView에서
let textPosition = Math.random() * -100;
를 사용하여 0부터 100까지 랜덤으로 생성되게 만들었다.
이번에는 몬스터들을 만들고 보스몬스터와 몬스터 러쉬를 한다.
몬스터를 만드는것은 여태까지 해왔던 수리검,히어로와 같이 만들어 주면 된다.
보스몬스터도 똑같이 만들어 주면 된다.
하지만 여기서 보스 몬스터는 몬스터 러쉬가 끝난후 맨 마지막에 나와야 하기에 우선 for문으로 인스턴스를 생성하고 몬스터 배여렝 담아 준다.
그리고 몬스터의 소환 위치의 i를 곱해서 몬스터의 소환 위치의 간격을 정해준다.
