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

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

게임 마우스 커서에 저격 그림 리소스 입히기(중앙에 맞춰 좌표 조정)이미지 소스 불러오기(상대 경로의 상위 폴더는 ../)이미지 소스 그리기 (setInterval 함수 사용)저격 커서 이동 주기별 추적하기저격 커서 이동 흔적 지우기(이하 일단 생략)일단 복습 일지 3에서 진행했던 부분에서 엄청 고생해서 만든 조준경 이미지(snipeImg) 얘기하느라,snipeImg의 좌표 맞추기를 했던거를 제대로 언급하질 못했다. 내가 만든 코드는 시작에서 snipeX(조준경의 X좌표), snipeY(조준경의 Y 좌표)에 각각 450과 300을 대입해서페이지가 로딩되는 시점에는 (450, 300) 에 조준경 이미지 하나가 고정되어 있고,setInterval 함수가 실행되면서 100분의 1초당 한개의 프레임마다 조준경 ..

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

자바 스크립트 생성 > ! + Tab 누르고 > 웹페이지 타이틀도 프로젝트에 맞게 변경하기 게임이 돌아갈 캔버스 공간 만들기 캔버스 영역은 부분에 태그로 크기랑 id 부여하기 캔버스 꾸미기는 태그 안에 태그 선언한 상태이고,이제 그 Canvas 안에 그림을 그릴 수 있는 도구(아, 그러니까 이거 마우스겠구나), 그리고 그 참조값을 가져오는거라..? let canvas=document.querySelector("#myCanvas"); let context=canvas.getContext("2d"); 일단 위 두줄을 해석해보면,canvas라는 변수를 정의하고, document의 querySelector()함수로 canvas의 i..

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

0. 새로운 폴더 : 혼자 연습하는 코드 생성, rabbitshootself1.html이라는 이름으로 시작  1. 자습용 체크리스트를 복사해 넣어 봤다.맨 처음 시작은 캔버스 만들기인데.... 코드가 기억나지 않아 ㅠㅠ 흑흑 ㅠㅠ조금만 기억을 되짚어보고 선생님이랑 한거 찾아봐야겠다.. 일단 캔버스 선 굵기나 색을 정하는걸 head에 하는걸로 기억하고 있어서 시도해봤는데,캔버스 꾸미기 코드로 이걸 쓰고 있어서 안되는거였군.... 캔버스 꾸미기 코드 기억하자.캔버스 꾸미기 코드는  아 코드 보니까 title을 안 고치고 작성했네;앞으로 타이틀도 잊어먹지 말고 잘 고치기!!!!!!!!  그래서 타이틀까지 고친 코드랑 화면은 다음과 같다!     1차 체크리스트 수정한 체크리스트( 검정은 오늘 나간 ..

"나루"로 내 개인 웹 페이지 호스팅 도전!

어제 만든 게임 파일을 나루라는 웹 호스팅 페이지에서 호스팅하는 것을 시도하는 중이다.  나루 나루당신의 공간이 되는, 나루. 설명서 사용자당 1GB의 저장 용량이 제공됩니다. 크기가 큰 음악이나 영상은 되도록 SoundCloud나 YouTube로 게시해 주세요. 트래픽을 과도하게 유발하는 행위는 자제해 주naru.pub  처음 등장한 index.html에 게임 파일 코드를 복사했더니게임 화면의 일부분은 나타났으나 이미지나 소리가 들어가지 않아서이미지와 소리를 업로드하고 재도전! 그런데도 실패! 그래서 경로 문제인거 같아서images 폴더와 sound 폴더를 만들어서 그 안에 게임 소스 코드에 있는 경로로 맞춤! 그런데도 실패! 그래서 게임 코드도 실습했던 대로 javascript 폴더로 옮겼는데 ind..

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

1. 슈팅 게임을 만들기 위한 리소스(이미지,소리) 파일 준비2. 슈팅 게임 만들기 복기 및 코딩 작성 안보고 하기1차 자습 시도 체크 리스트 만들기게임이 돌아갈 캔버스 공간 만들기게임에서 마우스 커서 좌표 읽기(중앙 맞추기)게임 마우스 커서에 저격 그림 리소스 입히기(중앙에 맞춰 좌표 조정)저격 커서 이동 주기별 추적하기저격 커서 이동 흔적 지우기저격 커서 클릭 시 슈팅 사운드 발사저격 커서 클릭한 자리 슈팅 후 관통흔 좌표 일치 시키기슈팅 관통흔 좌표에 관통흔 이미지 추가슈팅 관통흔 자리가 저격 커서 따라가게 하기슈팅 관통흔이 쏘는 곳마다 남아 있도록 하기토끼 좌표 중앙에 맞추고 그림 추가토끼 피격 시 피격 소리 추가정적인 토끼 이미지에 애니메이션 부여토끼가 랜덤 좌표에 출몰하게 조절토끼 공격하는 숫..