01
60fps — 1초에 60컷
⏱ 8분
게임 화면이 부드러운 이유 = 1초 동안 60장의 그림을 빠르게 바꿔서 보여주기 때문! 만화 영화와 똑같아.
💡 빈 칸 10개에 공이 조금씩 오른쪽으로 가는 모습을 그려봐 (각 칸 = 한 컷)
💡 게임은 이렇게 1초에 60컷을 보여줘서 움직이는 것처럼 보이게 한다. fps = frames per second
02
캔버스 좌표 시스템
⏱ 12분
컴퓨터 화면은 (0,0)이 왼쪽 위! 오른쪽으로 갈수록 X 커지고, 아래로 갈수록 Y 커져. 수학 시간 좌표랑 Y가 반대!
그려봐:
① (0,0) 표시
② X축 → 오른쪽
③ Y축 ↓ 아래
④ (200, 150)에 공 ⚽
⑤ 화면 끝 (400, 300)
03
움직임 4가지
⏱ 10분
게임 캐릭터가 움직이는 방법은 크게 4가지. 각각 어떤 게임에서 본 적 있는지 빈칸에 적어봐!
➡️
직선 이동
한 방향으로 쭉 가는 것. 가장 쉬움.
⚡
튕김 이동
벽에 부딪히면 반대로 튀는 것. (탁구공!)
🎲
랜덤 이동
예측 못 하는 방향으로! (적·아이템)
04
내 도형 디자인 카드
⏱ 8분
내가 움직이게 할 도형을 정해보자. 색·모양·크기 정하고 미리보기 박스에 그려봐!
05
오늘 점검 체크
⏱ 4분
하나씩 ✓ 체크해봐!
캔버스가 무엇인지 한 문장으로 설명할 수 있다
60fps가 1초에 60컷이라는 뜻인 줄 안다
이번 주에 나오는 단어들. 모르면 자연스러워요. 외울 필요 없어요. 막힐 때마다 펴서 보세요.
게임 루프Game Loop
게임이 1초에 60번씩 화면을 다시 그리는 패턴. 영화 필름 돌아가는 거랑 비슷.
캔버스Canvas
HTML의 그림판. 도형·캐릭터를 자유롭게 그릴 수 있는 빈 종이 같은 거.
초당 프레임60fps · Frames Per Second
1초에 60장 그림. 사람 눈에는 부드러운 영상으로 보임. 게임 표준.
좌표Coordinate
화면 위치 표시. (0,0)이 왼쪽 위. X=가로 Y=세로. 학교 수학이랑 반대로 Y는 아래로 +.
픽셀Pixel
화면 점 하나. 가장 작은 단위. 모니터를 확대하면 보이는 작은 사각형들.
애니메이션 프레임 요청requestAnimationFrame
브라우저에 "다음 그림 그려줘" 요청하는 명령. 게임 루프의 심장.
도형Shape
사각형·원·삼각형 등 기본 모양. 게임 캐릭터도 처음엔 사각형으로 시작.
그리기Draw
화면에 도형이나 글자 표시하는 일. fillRect, fillText 같은 명령으로 함.
함수Function
명령어 묶음. "draw()"라고 부르면 그리는 일 시작. 자판기 버튼 같은 거.
변수Variable
숫자·이름을 담는 상자. 위치·점수 저장. let x = 100; 이런 식.