공부의 기록/프리스쿨 : 나홀로연습

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

파티피플지선 2024. 11. 18. 20:35

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

  • 자바 스크립트 생성 > ! + Tab 누르고 > 웹페이지 타이틀도 프로젝트에 맞게 변경하기
  • 게임이 돌아갈 캔버스 공간 만들기
    • 캔버스 영역은 <body> 부분에 <canvas> 태그로 크기랑 id 부여하기
    • 캔버스 꾸미기는 <head> 부분에 <style> 태그 사용해서 만들기
  • 게임에서 마우스 커서 좌표 읽기(중앙 맞추기)
  • (이하 일단 생략)

 
<복습 일지 3 시작>
게임에서 마우스 커서 좌표 읽기..... 를 어떻게 했더라.. 일주일 안 지났지만 3일 넘었다고 다 까먹었음 ㅠㅠ
 
결국 3분 정도 고민하다가 선생님이랑 한 코드 봤는데 잘못 생각하고 있었나 싶다.
"Canvas 요소에 그림을 그릴 수 있는 도구의 참조값 얻어오기"
라는 걸 해야 하는 단계였음.
 
저게 무슨 의미였는지는 까먹었는데, 일단 스크립트 써보고 실행해서 확인해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rabbitshootself1</title>

    <style>
        
        canvas{
            border : 2px, solid, green
        }
        
    </style>


</head>
<body>

   <canvas width = 900 height = 600 id="#myCanvas"></canvas>
   <script>
        let canvas=document.querySelector("#myCanvas");
        let context=canvas.getContext("2d");
   </script>

</body>
</html>

<body> 태그 안에 <canvas>태그 선언한 상태이고,
이제 그 Canvas 안에 그림을 그릴 수 있는 도구(아, 그러니까 이거 마우스겠구나), 그리고 그 참조값을 가져오는거라..?

        let canvas=document.querySelector("#myCanvas");
        let context=canvas.getContext("2d");

 
일단  위 두줄을 해석해보면,
canvas라는 변수를 정의하고, document의 querySelector()함수로 canvas의 id인  "#myCanvas"를 호출하여 대입함.
context라는 변수를 정의하고, canvas의 getContext()함수로 2d를 호출하여 대입함.

그러니까 이 얘기가 정리해보자면...
canvas라는 곳에는 내가 만든 #myCanvas라는 애를 넣을 거고,
context라는 곳에는 getContext라는 함수로 평면의 캔버스를 만들 것이다.
 
뭐 이정도로 해석이 되려나... 스읍.. 어렵네.
그러면 얘가 script 태그 안에 있으니까
script로 canvas를 직접 조작할 준비를 하는거라고 보면 되려나.

실제로 캔버스에 아무 변화도 없다.
수업 시간에는 이 단계에서 콘솔창으로 뭔가 확인했던 것 같은데.
콘솔창 보면 코드가 오류 났다고 뜬다... 어디서 난 오류일까 ㅠㅠ
 
어으 머리야. 일단 다음 단계로 넘어가보자.
 
캔버스가 만들어지고 마우스 움직임을 확인한 다음 한 일이 마우스를 화면의 중심에 맞추는 것이었다. 
 
수업 시간에는 800 X 500 픽셀 캔버스 였는데 나는 900 X 600 캔버스를 만들었으니까 
마우스의 중앙 지점이 오는 것은 .....
왜 갑자기 떠오른 기억이 마우스 중앙 지점 체크보다 먼저 마우스에 조준경 이미지 넣는거지...
순서 잘못 기억했나보다 ㅠㅠ 체크 리스트 수정해야겠다ㅠㅠ
 
그럼 마우스에 조준경 이미지 넣기... 이거 하면 뭔가 에러도 해결될지도 몰라...
근데 이미지 넣는 코드도 기억 못함 ㅋ
그냥 첫 라운드는 보고 따라해야 하나 싶은데, 일단 따라 하되
눈으로 훑어서 키워드만 잡고 코드 복붙하진 말기로 목표 변경
 
그래서 잡은 키워드 var, new Image, snipeImg 이 세 개로 코딩을 짜는 걸 시도해보고,
그 다음에 따라해보자.

        var snipeImg = new Image();
        snipeImg = src.Images

└이건 내맘대로 망한 코드 ㅋㅋ

        var snipeImg = new Image();
        snipeImg.src= ".javascript/images/snipe.png";

ㄴ이게 제대로 된 코드... 인데 경로를 모르겠다... 위에 에러가 해결 안돼서 안보이는거인지 경로가 틀린건지 확인할 수가 없어... ㅠㅠㅠㅠ
 
결국 프리스쿨 3일차 글을 보면서 다시 하기로 결정.... ㅠㅠ
 
그리고 깨달음.... 체크리스트 순서 바뀐게 아니었고 ㅋㅋㅋㅋㅋㅋㅋㅋ 내가 아예 잘못 기억하고 있는거였네ㅠㅠ
 
<오늘 일지는 여기서부터 다시 시작...>
게임 만들기 전에 처음에 했던 것은 div로 만든 상자 안에서 "mousemove"라는 이벤트에 의해 콘솔 창에 로그가 남도록 하는 스크립트를 짜는걸로 시작했었다!!
그래서 내가 체크리스트에서 "게임에서 마우스 커서 좌표 읽기(중앙 맞추기)"를 먼저 작성했던것..
(이말은 즉 체크리스트는 잘못된게 없었다는거...8ㅁ8)
 
그래서 다시 수업시간에 한 것처럼 마우스가 캔버스 위에서 움직이는걸 확인해보는 코딩을 해보려는 것이다.
그래서 다시 코드 짜본거 

   <script>
        let canvas=document.querySelector("#myCanvas");
        let context=canvas.getContext("2d");
   
        document.querySelector("#myCanvas").addEventListener("mousemove", function(event)
        {
            x = event.offsetX
            y = event.offsetY
            console.log(x);
            console.log(y);
        })
   </script>

이거였는데 계속 에러가 나서.... 봤더니 멍청하게,
canvas 태그 안에서 id 부여할 때 #을 쓴게 원인이었다.
하... 너 땜에 내가... 지금 두어 시간을.. 날린 게 말이 돼..?
심지어 지난 2번 일지에서... 너무 당연하게 맞는건줄 알고 넘어가서...
상상도 못했어...

   <script>
        let canvas=document.querySelector("myCanvas");
        let context=canvas.getContext("2d");
   
        document.querySelector("#myCanvas").addEventListener("mousemove", function(event)
        {
            x = event.offsetX
            y = event.offsetY
            console.log(x);
            console.log(y);
        })
   </script>

그래서 코드 바꾸니까 맞네... 하...
콘솔창에서 마우스 움직이면 x, y좌표 같이 뜨네...
 
그럼 이제 다시 이미지 소스 넣기로 가도 될듯... 하...

        var snipeImg = new Image();
        snipeImg.src = "javascript.images./snipe.png";

그래서 다시 이 코드로 돌아오면.... 지금 만든 폴더가 자바스크립트와 별개의 폴더이고, 여기에는 이미지 파일을 일부러 안 두고 연습하려고 했던 건데, 어떻게 경로를 지정해야 나타날지 모르겠다..
그렇게 한 30분 삽질(경로 코드 별의 별걸로 다 바꿔봄)하다가, 깨달았다.
 
아 이거는 이미지 소스를 가져오기만 했지.
가져온 이미지 소스를 그리는 코드는 따로 있었다는 것을
 
근데 역시나, 이미지를 그리는 코드 컨텍스트랑 관련 있었던거 같은데 정확히 기억이 안나서 키워드만 보러 가기
키워드 :context, drawImage라는 함수 사용.
 
그래서 조준경을 한 번 그려보려고 한다.
일단 막무가내로 코딩해보기 시도

        var snipeImg = new Image();
        snipeImg.src = "./javascript/images./snipe.png";

        context.drawImage(snipeImg, 450, 300, 20, 20);

이렇게 했더니 페이지에 아무것도 나타나진 않았다.
경로가 잘못된건지 그 아래 코드가 잘못된건지는 모르겠으나,
일단 경로 지정 방법을 알아내야하니까 그리는 코드를 확인해보자.

        context.drawImage(snipeImg, 450, 300, 100, 100);

오 일단 대충 맞았긴 했는데, 20이 너무 작은건가 싶어서 수업시간에 한 사이즈 100으로 바꿨다.
450, 300 도 사실은 snipeX-50, snipeY-50이지만 이건 일단 경로부터 확인하고 해보자.
 
역시나 조준경이 나타나지 않아, 역시 경로인가 싶어서 경로를 아까 전에 했던걸로 다시 해보기로 했다.
일단 수업 시간에 했던 것부터 내가 제대로 못 배운 어중간한 지식(.이나 /로 상위 하위 폴더 관계)으로 경우의 수 만들고..
"images/snipe.png"
"javascript.images/snipe.png"
".javascript.images/snipe.png"
".selfpractice./javascript/images/snipe.png"
".selfpractice./javascript.images/snipe.png"
"../javascript.images/snipe.png"
".selfpractice/javascript/images/snipe.png"
뭐야 다 안돼...
".selfpractice.javascript/images/snipe.png"
"./selfpractice.javascript/images/snipe.png"
레알 다 안돼... ㅠㅠㅠ 
어디서 틀린걸까 ㅠㅠㅠㅠㅠ 이건 선생님께 여쭤봐야 하려나 ㅠ 흑 ㅠ
일단 복습 보류야? 그런거야? ㅠㅠ
 
일단 그럼. 그리기 코드가 확실히 안틀린걸 확인하기 위해서
selfpractice안에다가 images/snipe.png만 넣어놓고 확인해보자.
 
오호라. 안 나온다.
 
그리기 코드가 어디선가 틀렸네. 상하위 태그 잘못 했나.
 
수업시간에 했던 코드 보면서 비교해보니까 setInterval(function(){}, 밀리초당프레임 수) 함수를 설정해서
그 안에다가 context.drawImage 코드를 넣었어야 그려지는 거였음.

<body>

   <canvas width = 900 height = 600 id="myCanvas"></canvas>
   <script>
        let canvas=document.querySelector("#myCanvas");
        let context=canvas.getContext("2d");

        var snipeImg = new Image();
        snipeImg.src = "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;
        })
   </script>

그러고 보니 선생님께서 그런 말씀을 해주셨던거 같긴함....
 
그래서 일단 성공이니까

 
이번에야말로, 이미지 파일 다른 경로에서 가져와 보는 코드를 만들어보자.
 
......
 
위에 있는거랑 없는거까지 다 시도했는데 모르겠어서 결국 챗GPT에게 물어봄...
챗GPT가 알려주길, 상대 경로는 ../ 를 입력해서 나가야 한다고 하네..
 
그럼 이걸 적용해서
"../javascript/images/snipe.png";
를 입력해서 브라우저에서 열어보자.

 
오매 됐다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ㅁ;ㅣㅏㅇ놀;ㅏㅁㅈㄷ;ㄹ;ㅣㅏ먼ㅇㄹ됐다고!!!!!!!! 야호!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 
하.....
 
이거 하는데 개 힘들었다 진짜 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
 
2회차 self 시도부터는 괜찮아지겠지? ㅠㅠㅠㅠㅠ
 
할 수 있다! 나는 할 수 있다!!!!!
 
오늘은 여기까지!!! 언제 만드냐~
 
 
 
 
<체크 리스트 수정>
(검정은 오늘 나간 진도, 초록 글씨는 추가한 부분. 연한글씨는 오늘 나가지 못 한 진도 또는 지나간 진도)

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

 
 
 
<오늘의 일지 마무리>
일단 실수한거랑 기억할거
1. #myCanvas는 호출할 때의 형태이지, 캔버스 안에서 id를 부여할 때는 이렇게 하면 오류난다!
2. 이미지 소스 가져오기와 이미지 그리기는 별개의 코드이다!
3. 이미지 그리기는 웹페이지의 프레임에 적용되어야 하는 애고,
    밀리초 당 몇 개의 프레임이 들어갈건지를 정하는 setInterval 함수 안에 그리는 코드를 넣어줘야 프레임에 나타난다!!!
4. 상대 경로의 상위 폴더는 ../ 쩜 두개와 슬래시를 사용하여 나타낸다!
 
여전히 엄청나게 헤매고 있지만, 분명 이렇게 하고 나면 내 실력은 늘긴할 것 같다.
 
사람은 어쩌다 운으로 이뤄낸 성공보다는
뼈아픈 시행착오가 더 기억에 남기 마련이니까.
그리고 사람이니까 실수로부터 배우고 고쳐나가면 되는 거니까.
 
그러니까 나는 할 수 있다. 눈 앞에 것만 집중하자.
못한거는 생각하지 않기. 못한 거는 하면 된다.
느려도 한 걸음씩. 나아가기만 하면 된다.

'공부의 기록 > 프리스쿨 : 나홀로연습' 카테고리의 다른 글

프리스쿨 슈팅게임 과제 복습 일지 4  (1) 2024.11.20
프리스쿨 슈팅게임 과제 복습 일지 2  (1) 2024.11.16
"나루"로 내 개인 웹 페이지 호스팅 도전!  (1) 2024.11.15
프리스쿨 슈팅게임 과제 복습 일지 1  (0) 2024.11.14

'공부의 기록/프리스쿨 : 나홀로연습'의 다른글

  • 현재글프리스쿨 슈팅게임 과제 복습 일지 3

관련글

티스토리툴바