[Review] JavaScript로 간단한 게임 만들기(Enemy Rain)<2>

1. 고스트 랜덤 생성

setInterval(createGhost, 3000); // 3초마다 고스트 랜덤생성 함수 실행
function chreateGhost(){
	const ghostDiv = document.createElement('div');
  	document.getElementsByClassName('bgContainer')[0].appendChild(ghostDiv);
  	ghostDiv.classList.add('ghost');
  	ghostDiv.style.left = (Math.random() * 750) + 'px'
}

1. bgContainer라는 클래스네임을 갖고있는 태그에 createElement를 사용해 고스트를 담을 div태그를 생성
2. 그 다음 classList.add('ghost')로 ghost라는 클래스 네임을 부여
3. Math.random() 을 사용해서 .ghost의 left 값을 랜덤으로 지정해준다.
   (배경이미지의 크기인 750을 곱해서 생성되는 랜덤 숫자의 범위를 정해준다.)
4. createGhost 함수를 setInterval의 첫번째 인자로 넣고 두번째 인자에는 반복될 시간을 넣는다.

2. 고스트 내려오게 하기 + 고스트가 땅에 닿거나 히어로에 닿으면 죽게 만들기

setInterval(fallingGhost, 10) // 고스트 내려오는 함수 + 땅에 도착하거나 히어로에 부딛히면 고스트가 죽는 함수
function fallingGhost(){
    const ghost = document.getElementsByClassName('ghost');//고스트 접근
  for(let i = 0; i < ghost.length; i++){
        const goDown = ghost[i].offsetTop + 2;
        if(ghost[i].offsetTop === 550){
            ghost[i].style.backgroundPosition = '45px';
            ghost[i].className = 'ghostDead'  
            setTimeout(() => {
                removeGhost();
            }, 2000);
        } else if(ghost[i].offsetTop === 490 && ghost[i].offsetLeft > hero.offsetLeft - 45 && ghost[i].offsetLeft < hero.offsetLeft+35){
            ghost[i].style.backgroundPosition = '45px';
            ghost[i].className = 'ghostDead';
            setTimeout(() => {
                    removeGhost();
                }, 2000);
        } else {
            ghost[i].style.top = goDown + 'px';
        }
    }
}

function removeGhost(){
    let ghostDead = document.getElementsByClassName('ghostDead')[0];
    let bg = document.getElementsByClassName('bgContainer')[0];
    bg.removeChild(ghostDead);
}

1. 고스트가 바닥에 닿았을 때의 offsetTop값을 구해서 그 offsetTop인 550이 되면 죽게만든다.
2. backgroundPosition을 '45px'이 되게 하고 클래스네임을 ghostDead 바꿔준다.
3. 고스트가 히어로와 부딛혔을때 죽게하기위해 offsetLeft의 값을 사용했다.
4. 고스트의 좌측면이 히어로 div의 좌측 면부터 히어로의 우측 면사이에서 움직인다면 히어로와 부딛히는 걸로 간주
5. 이 것들을 조건으로 다시한번 backgroundPosition을 45px로 바꾸고 ghostDead 클래스네임으로 변경해준다.

리뷰

고스트가 죽고나서 몇 초뒤에 사라지게 하기위해 setTimeout함수를 사용했다. 초반에 많은 에러들을 만났는데, setTimeout 함수를 제대로 쓰지 못한 것인지 에러가 계속 발생했다.

//처음에 계속 오류가 났던 함수
setTimeout(ghost.remove(), 3000);

//수정한 함수 , setTimeout , setInterval 함수는 보통 에로우 함수식으로 쓸 것
setTimeout(() => {
	removeGhost();
}, 2000)

배운점

1. 히어로와 고스트의 js파일을 따로 만들어 정리했다.
2. offset 시리즈들을 이용하면 절대위치와 상대위치 값을 구할 수 있다.
3. getElementsByClassName으로 같은 이름의 요소를 전부 접근하려면 반복문을 사용하여야 하는지(?)
4. 위 반복문을 쓸때 (let i = 0; i < ghost.length; i++)식으로 클래스명.length가 그 클래스를 갖은 요소의 숫자만큼을 의미하는지(?)