프리스쿨 슈팅게임 과제 복습 일지 4

<일지3에 이어서 오늘 시작할 체크리스트 부분 체크>

• 게임 마우스 커서에 저격 그림 리소스 입히기(중앙에 맞춰 좌표 조정)
  • 이미지 소스 불러오기(상대 경로의 상위 폴더는 ../)
  • 이미지 소스 그리기 (setInterval 함수 사용)
• 저격 커서 이동 주기별 추적하기
• 저격 커서 이동 흔적 지우기
• (이하 일단 생략)

<복습일지 4 -1: 마우스 움직임에 따라 조준경이 나타나는데 이전 프레임의 조준경은 지우기>

일단 복습 일지 3에서 진행했던 부분에서 엄청 고생해서 만든 조준경 이미지(snipeImg) 얘기하느라,

snipeImg의 좌표 맞추기를 했던거를 제대로 언급하질 못했다. 

내가 만든 코드는 시작에서 snipeX(조준경의 X좌표), snipeY(조준경의 Y 좌표)에 각각 450과 300을 대입해서

페이지가 로딩되는 시점에는 (450, 300) 에 조준경 이미지 하나가 고정되어 있고,

setInterval 함수가 실행되면서 100분의 1초당 한개의 프레임마다 조준경 이미지의 위치를 다시 그려내고,

그려내는 위치를 읽는 역할은 

document.querySelector("#myCanvas").addEventListener("mousemove", function(event){ })의 중괄호 안에서

snipeX의 좌표는 마우스가 움직이는 이벤트 발생 시(mousemove)

마우스의 X, Y 좌표를 offsetX, offsetY를 참조해서 snipeX와 snipe Y에 대입하면서 진행한다.

        let canvas=document.querySelector("#myCanvas");

        let context=canvas.getContext("2d");

        var snipeImg = new Image();

        snipeImg.src = "../javascript/images/snipe.png";

        let snipeX=450;

        let snipeY=300;

       

        setInterval(function()

        {

            context.drawImage(snipeImg, snipeX-50, snipeY-50, 100, 100);

        }

        , 10);

       

        document.querySelector("#myCanvas").addEventListener("mousemove", function(event)

        {

            snipeX = event.offsetX;

            snipeY = event.offsetY;

        })

 

그래서 내가 만든 코드로 실행한 브라우저의 조준경은, 처음에 가운데 쯤에 위치하고,

이후로 마우스를 움직이는 곳에서부터 100분의 1초마다 이미지가 1프레임씩 그려진 것이다.

 

오늘하기로 한 부분에서 

• 저격 커서 이동 주기별 추적하기

이거는 사실 지난 시간에 한거였던 것이다..!!

그래서 체크리스트 수정하고 다음 단계, 지나간 스나이퍼 이미지는 삭제하러 간다..!!

 

• 저격 커서 이동 흔적 지우기

삭제를 하기 위해 했던 방법은 setInterval 함수 안에 100분의 1초마다 시작할 때 안의 이미지들을 전부 리셋하는 코드를 썼던거 같은데...

역시나 어떻게 썼는지가 기억이 나지 않는다.

 

context.resetImage ... 였나...

이런 코드가 있나...ㅋㅋㅋㅋㅋㅋ

 

오늘은 복습 시간이 늦었으니 빠르게 보고 오자! 

아, 리셋하는 코드도 했던거 같지만 코드 보고 오니까 리셋하는 코드 다음에 아예 배경이미지를 가져와서 매초 배경이미지를 다시 그리는거부터 시작해서 100분의 1초마다 프레임 리셋 할 때 배경이미지를 그리면서 이전 프레임에서 그린 조준경 이미지를 덮었더랬지.. 그렇군...

 

그래서 오늘 시작할 단계는 배경이미지를 가져오는것..

즉, 저격 커서 이동 흔적을 지우기 = 배경 이미지 넣기 단계였다.

 

이미지 가져오는 것은 한 번 헤매봤으니까 이제 껌이다! (일단은!)

일단 이미지 소스 가져오는 코드를 script 태그 안에,

        var backgroundImg = new Image();

        backgroundImg.src = "../javascript/images/background.jpg" 

 

이미지 그리는 코드를 setInterval 함수 안에 

            context.drawImage(backgroundImg, 0, 0, 900, 600)

 

추가하면!

(세미콜론 없는데도 왜 되는거냐)

 

이렇게 이렇게~ 잘 되었다!!!! >_<

으캬캬캬캬캬캬ㅑ캬캬캬

(아니 근데 사운드 처리할 때 보니까 세미 콜론 빼먹은 곳 있는데도 왜 구현이 된거지 이상하다)

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

<복습일지 4 -2. 조준경을 겨누고 클릭할 때마다 총소리 나게 만들기>

그럼 이번에는 저격 커서를 클릭 할 때 총소리가 빵야 빵야 나도록 해줘보자.

• 저격 커서 클릭 시 슈팅 사운드 발사

이건 일단 소리 파일을 가지고 와야하니까.. Sound로 찾는데 없고 Audio가 뜨길래 써봤더니 빙고인듯!

경로는 이미지처럼 하면 될 것 같고.

        var gunSound = new Audio();

        gunSound.src = "../javascript/sounds/fire.wav";

 

그럼 이제 사운드 출력을 클릭할 때 나게 하는 것이 과젠데.

        document.querySelector("#myCanvas").addEventListener("mousemove", function(event)                                            

 

대애략 얘랑 비슷한 애를 하면되었던 걸로 기억한단 말이지.

그러니까 

        document.querySelector("#myCanvas").addEventListener("mouseclick", function(click)

        {

           

        })

이렇게 생긴 애 안에다가 채우면 될 거 같은데....

이미지를 그리는건 drawImage함수 였는데, 소리를 내는건... playAudio 이런거일까?

        document.querySelector("#myCanvas").addEventListener("mouseclick", function(click)

        {

            context.playAudio(gunSound);

        })

일단 쓰여지긴 했으니까 시도해보자.

 

는 페이지 열어서 클릭해도 소리가 나질 않는다. mouseclick과 관련된 행동에 소리가 나게 해줘야하는건데.

지금 한 거는... 맥락, 소리재생, 총소리 이런 느낌....인데 맞는지 틀린지 조차 모르는 상황이니까...

 

그래 선생님과 한걸 보러 가자!

        document.querySelector("#myCanvas").addEventListener("mousedown", function(e){

        //강제로 재생 위치를 처음으로 변경한 다음

        fireSound.currentTime=0;

        //play를 하면 연속 재생이 가능하다

        fireSound.play();

(선생님하고 한거는 fireSound였구나 심지어...)

오우.... mouseclick이 아니었어요~~~~

mousedown에다가 fireSound.play();였군요 ㅠㅠ

currentTime = 0을 0으로 해야하는 이유는 

        document.querySelector("#myCanvas").addEventListener("mousedown", function(click)

        {

            gunSound.play();

        })

코드가 이렇게만 있을 때는 마우스를 클릭하고 나면 총소리가 재생되긴하는데, 총소리 음원 파일이 끝날 때까지 재생을 멈추지 않아서 바로 이어지는 클릭에 마우스 총소리가 나지 않고, 몇 초 기다린 후 클릭한 다음 총소리가 나기 때문에, 강제로 gunSound의 재생 시간을 다시 0으로 돌려놓고(리셋해놓고) 사운드를 시작해야하는 것이다.

 

        document.querySelector("#myCanvas").addEventListener("mousedown", function(click)

        {

            gunSound.play();

            gunSound.currentTime=0;

        })

 

 

수업시간에 한 것처럼 gunSound.currentTime-0;을 먼저 써도 되고, 나중에 써도 기능적으론 똑같아 보이는데,

아무래도 약간의 의미 차이가 있다면

fireSound.currentTime-0; → fireSound.play(); 이거는 0으로 리셋한 애를 재생한다는 의미가 있겠고

gunSound.play(); → gunSound.play(); 이거는 플레이 시작하고 0으로 돌린다는 미세한 의미 차이가 있을 듯..?

(선생님께 여쭤봐야겠다 이 부분은!

선생님 컨펌 받음 - 맞다고 해주심

100분의 1초라는 짧은 시간 동안 이루어지기 때문에 우리가 보는 차이는 없지만

컴퓨터에게는 내가 쓴 의미 차이가 있는게 맞긴하다고 해주심)

 

어쨋든 총소리 넣는거까지 성공적!!!

 

 

 

 

<체크 리스트 수정>

(검정은 오늘 나간 진도, 초록 글씨는 추가한 부분. 연한글씨는 오늘 나가지 못 한 진도 또는 지나간 진도)

• 자바 스크립트 생성 > ! + Tab 누르고 > 웹페이지 타이틀도 프로젝트에 맞게 변경하기
• 게임이 돌아갈 캔버스 공간 만들기
  • 캔버스 영역은 <body> 부분에 <canvas> 태그로 크기랑 id 부여하기
  • 캔버스 꾸미기는 <head> 부분에 <style> 태그 사용해서 만들기
• 게임에서 마우스 커서 좌표 읽기(중앙 맞추기)
  • 마우스 커서 좌표 읽기는 주기별 추적을 위한 단계로 생략해도 무방하다.
  •   그런 의미에서 저격 커서가 될 마우스의 이동을 주기별로 추적하는걸 미리하게 된다.
• 게임 마우스 커서에 저격 그림 리소스 입히기(중앙에 맞춰 좌표 조정)
  • 이미지 소스 불러오기(상대 경로의 상위 폴더는 ../)
  • 이미지 소스 그리기 (setInterval 함수 사용)
• 저격 커서 이동 주기별 추적하기(삭제)
• 저격 커서 이동 흔적 지우기 = 배경이미지 넣기
• 저격 커서 클릭 시 슈팅 사운드 발사
• 저격 커서 클릭한 자리 슈팅 후 관통흔 좌표 일치 시키기
• 슈팅 관통흔 좌표에 관통흔 이미지 추가
• 슈팅 관통흔 자리가 저격 커서 따라가게 하기
• 슈팅 관통흔이 쏘는 곳마다 남아 있도록 하기
• 토끼 좌표 중앙에 맞추고 그림 추가
• 토끼 피격 시 피격 소리 추가
• 정적인 토끼 이미지에 애니메이션 부여
• 토끼가 랜덤 좌표에 출몰하게 조절
• 토끼 공격하는 숫자 점수 카운트 하기
• 토끼 공격할 때 토끼 피격 후 사라지는 이펙트
• 이펙트가 사라지면서 쓸데없이 차지하는 메모리 소스 정리 위해 오브젝트 정리하기

 

<오늘 일지 마무리>

사격 흔적 관련해서 더 할까 고민했지만

일단 내일 아침 5시에 일어나서 나갈 생각이기 때문에...!!

이제 슬슬 마무리하고 C# 책 좀 읽다가 잘 준비해야 할 것 같다.

 

낼부터 120일 자바 풀스택 과정이 시작된다!!!

 

게임 복습일지 5는 아마도 토요일이나 야자 시간에 가능하지 않을까..? 모르겠다.

일단 유에스비 들고 다닐거니까...

 

화이팅!!!