0. 새로운 폴더 : 혼자 연습하는 코드 생성, rabbitshootself1.html이라는 이름으로 시작
1. 자습용 체크리스트를 복사해 넣어 봤다.
맨 처음 시작은 캔버스 만들기인데.... 코드가 기억나지 않아 ㅠㅠ 흑흑 ㅠㅠ
조금만 기억을 되짚어보고 선생님이랑 한거 찾아봐야겠다..
일단 캔버스 선 굵기나 색을 정하는걸 head에 하는걸로 기억하고 있어서 시도해봤는데,
캔버스 꾸미기 코드로 <canvas></canvas> 이걸 쓰고 있어서 안되는거였군....
캔버스 꾸미기 코드 기억하자.
캔버스 꾸미기 코드는 <style> 태그 사이에 넣어서 <head> 부분에 작성한다.
근데 작성하는 내용은 style 태그니까 이것만 있으면 실행해도 아무것도 보이지 않아.
그래서 body 부분에 실제로 캔버스 영역을 나타내는 canvas 태그도 필요하다.
사실 이게 먼저 필요한 거고, 스타일 부분을 나중에 지정해줘도 되는거니까
체크리스트에는 캔버스 영역→캔버스 꾸미기(스타일)로 수정해놔야겠다.
canvas 태그는 <>안쪽에 width, height를 작성해 캔버스 영역을 만들 수 있다.
그리고 id도 추가로 만들어주는데 그 이유가 뭐였는지 까먹었으니까...
이제 일지로 연습해가면서 확인해봐야 할 것 같다.
아무튼 이제 저번에 만든 게임을 만들 캔버스 공간이 등장했다!
캔버스를 그려놓고 스타일을 주석처리 해봤더니 캔버스가 다 사라진다.
이번에는 solid란 녀석의 기능이 궁금해서 없애봤는데 얘 없애니까 또 캔버스가 안 그려진다.
아무래도 solid가 선의 종류인가 싶었는데, 생각해보니 자바스크립트에는 좋은 기능이 있었다.
단어에 마우스를 가져다 대면 설명이 나오는 것.
그래서 본 solid의 설명은 다음과 같다.
Shorthand property for setting border width, style, and color.
그러니까 얘는 경계 폭, 스타일, 색을 설정하는 속성의 기능어라는 거다.
그럼 solid, border :2px, green이라고 코딩 순서를 바꿔도 되나?
라고 생각하고 바꿔봤는데 안된다.
그러니까 border라고 경계선의 스타일을 지정하는데 그 하위 속성인 애... 로 일단 추정...
하다보면 또 뭔가 알게 되겠지...
는 다시 보니까 아까 위에서 solid 설명인줄 알았던게 border의 설명이었네?
Shorthand property for setting border width, style, and color.← 이게 border 설명
어쩐지 이상하더라...(눈치 못 챘으면서 눈치 챈 척 하지마!)
헤매면서 보면서 오늘 다시 짠 코드는 아래에 있는것 밖에 안 된다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border : 2px, solid, green
}
</style>
</head>
<body>
<canvas width = 900 height = 600 id="#myCanvas"></canvas>
</body>
</html>
아 코드 보니까 title을 안 고치고 작성했네;
앞으로 타이틀도 잊어먹지 말고 잘 고치기!!!!!!!!
그래서 타이틀까지 고친 코드랑 화면은 다음과 같다!
<!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>
</body>
</html>
<체크 리스트 수정>
1차 체크리스트 수정한 체크리스트( 검정은 오늘 나간 진도, 초록 글씨는 추가한 부분. 연한글씨는 오늘 나가지 못 한 진도)
- 자바 스크립트 생성 > ! + Tab 누르고 > 웹페이지 타이틀도 프로젝트에 맞게 변경하기
- 게임이 돌아갈 캔버스 공간 만들기
- 캔버스 영역은 <body> 부분에 <canvas> 태그로 크기랑 id 부여하기
- 캔버스 꾸미기는 <head> 부분에 <style> 태그 사용해서 만들기
- 게임에서 마우스 커서 좌표 읽기(중앙 맞추기)
- 게임 마우스 커서에 저격 그림 리소스 입히기(중앙에 맞춰 좌표 조정)
- 저격 커서 이동 주기별 추적하기
- 저격 커서 이동 흔적 지우기
- 저격 커서 클릭 시 슈팅 사운드 발사
- 저격 커서 클릭한 자리 슈팅 후 관통흔 좌표 일치 시키기
- 슈팅 관통흔 좌표에 관통흔 이미지 추가
- 슈팅 관통흔 자리가 저격 커서 따라가게 하기
- 슈팅 관통흔이 쏘는 곳마다 남아 있도록 하기
- 토끼 좌표 중앙에 맞추고 그림 추가
- 토끼 피격 시 피격 소리 추가
- 정적인 토끼 이미지에 애니메이션 부여
- 토끼가 랜덤 좌표에 출몰하게 조절
- 토끼 공격하는 숫자 점수 카운트 하기
- 토끼 공격할 때 토끼 피격 후 사라지는 이펙트
- 이펙트가 사라지면서 쓸데없이 차지하는 메모리 소스 정리 위해 오브젝트 정리하기
<오늘 일지 마무리>
아무튼 오늘은 블로그 하면서 하다보니 여기까지 밖에 못 한거 같긴한데...
이렇게라도 해야 기억에 남을 수 있는 게 많은 거 같은 장점도 있고
시간이 오래 걸려서 목표치를 도달 못한 단점도 있다...
그래도 첫번째는 이렇게 한 번 열심히 해보자.
'공부의 기록 > 프리스쿨 : 나홀로연습' 카테고리의 다른 글
| 프리스쿨 슈팅게임 과제 복습 일지 4 (1) | 2024.11.20 |
|---|---|
| 프리스쿨 슈팅게임 과제 복습 일지 3 (22) | 2024.11.18 |
| "나루"로 내 개인 웹 페이지 호스팅 도전! (1) | 2024.11.15 |
| 프리스쿨 슈팅게임 과제 복습 일지 1 (0) | 2024.11.14 |