Canvas 2D · 14 시간과 입력
단계: 시간·좌표·입력 · 편집 가능한 예제 · 저장 ID: canvas-2d-02
목표와 학습 후 역량
- 프레임 간격을 바꿔도 시간당 이동이 유사하다.
- 정지·재개·리사이즈 후 입력 좌표가 맞는다.
선수 지식
선수 개념: 포인터 캡처, 잡은 위치. 13단위의 결과 파일과 관찰 기록을 준비하세요.
핵심 개념과 설명
입력 스냅샷
이벤트에서는 목표 상태를 저장하고 프레임에서 이동을 계산할 수 있습니다. 입력과 렌더 루프의 책임을 나누면 정지 상태도 일관되게 다룹니다.
상태 전이
실행과 일시정지는 별도의 상태입니다. 클릭 표시와 운동 상태를 구분하면 정지 중에도 위치 확인이 가능합니다.
실습 준비
기존 내장 예제는 출발점만 제공합니다. 확장 요구사항 전체가 구현된 예제가 아니며 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. 브라우저 버전과 viewport, DPR을 기록하세요.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 실습 프로젝트의 day-14.js와 index.html을 준비하세요. 기존 canvas-2d-02 출발 코드를 읽고 시간 기반 공 이동과 논리 클릭 좌표 출력을 외부 프로젝트로 옮기세요.
- pause/resume 버튼과 경계 반사를 결합하고 정지 중 클릭한 위치도 표시하세요.
- 입력 조건 60px/s에서 출력을 저장한 뒤 120px/s 조건으로 다시 실행하세요. 예상: 같은 시간의 이동거리가 두 배가 되며 클릭 위치는 변하지 않습니다. 실제 화면·로그와 대조하고 day-14-notes.md에 실제 결과와 차이의 원인을 남기세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 속도 | 60px/s | 120px/s | 같은 시간의 이동거리가 두 배가 되며 클릭 위치는 변하지 않습니다 |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 프레임 간격을 바꿔도 시간당 이동이 유사하다.
- 정지·재개·리사이즈 후 입력 좌표가 맞는다.
자가 점검
- 정지 중 클릭은 어떤 상태를 바꾸나요?
- 리사이즈로 공이 벽 밖에 놓이면 어떻게 복구하나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 드래그와 포인터 수명 · 다음: 장면 데이터와 다시 그리기