TIL

🎯 shooting-game

🥱 쉬어가는 타임

기본강의만 듣다보면 재미없고 지루하고 집중도 떨어지기 마련이다.
우연히 youtube 에서 슈팅게임 만들기라는 것을 보고 흥미를 가지게 되었다.
전반적으로 따라가기 정말 무리없이 쉬어가는 타임이였다.

🕹 게임설명 & 구조잡기

1. 캔버스 세팅
2. 이미지 불러오기
3. canvas drawImage()
   -> 무슨 이미지 그려줄건지 / 그 이미지를 어디서 그려줄건지(x.y 좌표)
4. 방향키를 누르면
5. 우주선의 xy 좌표가 바뀌고
6. 다시 render 그려주기

7. 적군 만들기 , x, y, init, update
   x값 : (min, max)
   min=0, max= canvas.width-적군사이즈
8. 적군 위치가 랜덤
9. 적군이 밑으로 내려온다
   -> y 좌표가 증가하므로 함수 만들고 -> update() 불러오도록 한다.=> 값을 업데이트 시킴
10. 1초마다 하나씩 적군이 나온다
    createEnemy() 만들고
    const interval = setInterval(호출하고 싶은 함수, 시간)
    const interval = setInterval(적군생성, 1)
    ms가 단위임 1s = 1000ms
    -> 적군은 웹사이트가 시작하자마자 생성 -> render 를 하기
11. 적군의 우주선이 바닥에 닿으면 게임 오버
    -> gameOver 이라는 변수 생성-> true 이면 게임이 끝, false 게임이 안 끝남
    ->
12. 적군과 총알이 만나면 우주선이 사라진다. 점수 1점 회득
    -> 캔버스 높이에서 우주선 높이만큼 올라온 값 좌표 순간 끝난다는 것.
    -> if(this.y) >= canvas.height-적군크키 {
    gameOver = true
    -> main () 더이상 호출 되지 못하게 멈추기 -> if(!gameOver)
    13.총알이 적국에게 닿으면 죽는다
    -> 총알의 y값이 작아지고 적군의 y값보다
    총알.y <= 적군.y and
    총알.x >= 적군.x and
    적군.x + 적군의 넓이
    => 닿았다 => 총알이 죽게되고, 적군의 우주선이 없어짐=> 점수 획득

🌈 트러블슈팅

이미지 크기가 제일 난관이였다.
캔버스 크기에 맞춰서 우주선, 적군, 총알 이미지 찾는데 시간을 많이 쏟은 것 같았고
총알과 적군이 닿았을 때 죽는 시점 계산
적군을 다 죽이고 빨리 빨리 잘 내려오지 않는 점..아직 개선할 필요가 있다.
그리고 우주선이 마음에 들지 않아 다시 찾아보고 업데이트를 해야겠다.

🕹 최종

https://youtu.be/0mOQCk1ONrg