옮긴이의 글
지은이의 글
감사의 글

CHAPTER 01 HTML5 캔버스 소개
01-1 기본적인 HTML 페이지
__1. 「!doctype html」
__2. 「html lang= "ko" 」
__3. 「meta charset= "UTF-8" 」
__4. 「title」 . . . 「 / title」
__5. 간단한 HTML5 페이지
01-2 이 책에서 사용하는 기본적인 HTML
__1. 「div」
__2. 「canvas」
01-3 DOM과 캔버스
01-4 자바스크립트와 캔버스
__1. 자바스크립트 프레임워크와 라이브러리
__2. 자바스크립트를 넣는 위치
01-5 HTML5 캔버스로 만드는 "Hello World!"
__1. 캔버스를 위한 자바스크립트 코드 캡슐화하기
__2. HTML 페이지에 캔버스 넣기
__3. 브라우저가 캔버스를 지원하는지 알아보기
__4. 2D 컨텍스트 구하기
__5. drawScreen( ) 함수
01-6 Console.log로 디버깅하기
01-7 2D 컨텍스트와 현재 상태 정보
01-8 HTML5 캔버스 객체
01-9 또 다른 예제: Guess The Letter
__1. 게임의 작동 원리
__2. "Guess The Letter" 게임의 변수
__3. initGame( ) 함수
__4. eventKeyPressed( ) 함수
__5. drawScreen( ) 함수
__6. 캔버스에서 이미지로 바꾸기
__7. 완성된 게임 코드
01-10 다음 내용 소개

CHAPTER 02 캔버스에 그리기
02-1 기본 파일 형태
02-2 기본 사각형 그리기
02-3 캔버스 상태 정보
__1. 상태 정보에 없는 정보
__2. 상태 정보의 저장과 복구
02-4 패스를 이용해서 선 그리기
__1. 패스의 시작과 끝
__2. 실제로 그리기
__3. 더 복잡한 선 그리기 예제
02-5 고급 패스 메서드
__1. 원호 그리기
__2. 베지어 곡선 그리기
__3. 캔버스 영역 선택
02-6 겹치기 효과
02-7 간단한 캔버스 변환
__1. 회전과 이동
__2. 스케일 변환
__3. 스케일과 회전 변환 조합하기
02-8 색상과 그레이디언트 넣기
__1. 채우기 색상 설정
__2. 그레이디언트로 채우기
02-9 도형에 패턴 채우기
02-10 그림자 만들기
02-11 다음 내용 소개

CHAPTER 03 HTML5 캔버스 문자 API
03-1 문자 출력의 기본
__1. 기본 문자 출력
__2. Text Arranger에서의 기본적인 문자 처리
__3. HTML 폼과 캔버스의 연결
__4. measureText 사용하기
__5. fillText와 strokeText
03-2 문자 폰트 설정
__1. 폰트 크기, 두께, 스타일의 기본
__2. Text Arranger에서 폰트 크기와 종류 설정하기
__3. 폰트 색상
__4. 폰트 기준선과 정렬
__5. Text Arranger 버전 2.0
03-3 문자와 캔버스 컨텍스트
__1. 문자에 투명도 설정하기
__2. 문자에 그림자 설정하기
03-4 문자에 패턴과 그레이디언트 넣기
__1. 선형 그레이디언트와 문자
__2. 방사형 그레이디언트와 문자
__3. 이미지 패턴과 문자
__4. Text Arranger에서 그레이디언트와 패턴 처리하기
03-5 폭, 높이, 스케일, toDataURL( ) 다시 보기
__1. 동적으로 캔버스 크기 조절하기
__2. 동적으로 캔버스 스케일하기
__3. Canvas 객체의 toDataURL( ) 메서드
03-6 Text Arranger 최종 버전
03-7 다음 내용 소개

CHAPTER 04 캔버스에서의 이미지
04-1 기본 파일 형태
04-2 기본적인 이미지 처리
__1. 이미지 미리 불러오기
__2. drawImage( )로 캔버스에 이미지 출력하기
__3. 캔버스에서 이미지 크기 변환하기
__4. 이미지의 일부분을 캔버스로 복사하기
04-3 간단한 셀 스프라이트 애니메이션
__1. 애니메이션 프레임 카운터 만들기
__2. 타이머 만들기
__3. 출력할 타일 바꾸기
04-4 복잡한 셀 애니메이션
__1. 타일 시트 알아보기
__2. 애니메이션 배열 만들기
__3. 출력할 타일 고르기
__4. 타일 반복하기
__5. 타일 그리기
04-5 이미지에 회전 적용하기
__1. 캔버스 변환의 기본
__2. 변환한 이미지에 애니메이션 효과 넣기
04-6 타일로 배경 만들기
__1. 타일 맵 정의하기
__2. Tiled로 타일 맵 만들기
__3. 캔버스에 맵 출력하기
04-7 이미지 축소, 확대, 패닝
__1. 이미지 창 만들기
__2. 이미지 창 그리기
__3. 이미지 패닝
__4. 이미지 축소, 확대, 패닝
__5. 애플리케이션: 축소 확대, 패닝 제어하기
04-8 픽셀 처리
__1. 캔버스 픽셀 처리 API
__2. Tile Stamper 애플리케이션
04-9 한 캔버스에서 다른 캔버스로 복사하기
04-10 다음 내용 소개

CHAPTER 05 수학과 물리학을 적용한 애니메이션
05-1 일직선상으로 움직이기
__1. 두 점 간의 이동: 두 점 사이의 거리 구하기
__2. 벡터에 따른 움직임
05-2 튀는 공 구현하기
__1. 튀는 공 하나
__2. 벽에 맞고 튀는 여러 개의 공
__3. 동적으로 크기가 변환되는 캔버스 상에서 튀는 공들
__4. 튀는 공과 충돌 효과
__5. 튀는 공에 마찰력 적용
05-3 곡선과 회전 이동
__1. 등속 원운동
__2. 간단하게 구현한 나선 모양 움직임
__3. 3차 베지어 곡선
__4. 이미지 움직이기
__5. 3차 베지어 곡선으로 고리 모양 만들기
05-4 기본적인 중력, 탄성, 마찰력 적용
__1. 간단히 중력 적용하기
__2. 중력과 튀는 효과 적용하기
__3. 중력과 탄성을 적용하여 튀는 효과 만들기
__4. 중력, 탄성, 마찰력 간단히 적용하기
05-5 가속도 효과
__1. 감속(우주선 착륙)
__2. 가속(우주선 이륙)
05-6 다음 내용 소개

CHAPTER 06 HTML5 캔버스와 비디오
06-1 HTML5의 비디오 지원
__1. 테오라 + 보비스 = .ogg
__2. H.264 + $$$ = .mp4
__3. VP8 + 보비스 = .webm
__4. 세 가지 형식 모두 사용
06-2 비디오 형식 변환
06-3 기본적인 HTML5 비디오 구현
__1. 평범하고 단순하게 비디오 넣기
__2. 컨트롤, 반복재생, 자동재생 기능 넣기
__3. 비디오의 폭과 높이 바꾸기
06-4 자바스크립트로 비디오 프리로딩 구현
__1. HTML5에서 이벤트와 비디오 간의 문제점
06-5 비디오와 캔버스
__1. HTML5 캔버스에서 비디오 출력하기
__2. HTML5 비디오 속성
06-6 캔버스 상의 비디오 예제 애플리케이션
__1. currentTime 속성을 이용하여 비디오 이벤트 만들기
__2. 캔버스 비디오 변환: 회전
__3. 캔버스 비디오 퍼즐
__4. 캔버스에서 비디오 컨트롤 만들기
06-7 애니메이션 효과 넣기: 움직이는 비디오
06-8 다음 내용 소개

CHAPTER 07 HTML5 캔버스와 오디오
07-1 기본적인 「audio」 태그
07-2 오디오 형식
__1. 오디오 형식 지원
__2. Audacity
__3. 예제 애플리케이션: 세 가지 형식 모두 사용하기
07-3 오디오 태그의 속성, 함수, 이벤트
__1. 오디오 함수
__2. 중요한 오디오 속성
__3. 중요한 오디오 이벤트
__4. 오디오 로딩과 재생
__5. 캔버스에서 특성 출력
07-4 오디오 태그 없이 사운드 재생하기
__1. 자바스크립트를 사용하여 동적으로 오디오 요소 만들기
__2. 지원되는 오디오 형식 알아내기
__3. 사운드 재생하기
__4. 태그가 없어요!
07-5 캔버스 오디오 플레이어 만들기
__1. 캔버스에서 사용자 맞춤 컨트롤 만들기
__2. 버튼 로드하기
__3. 오디오 플레이어의 변수 값 설정하기
__4. 마우스 이벤트
__5. 재생 슬라이더
__6. 재생/일시정지 버튼: 선택 위치 검사법 이용
__7. 반복재생 토글 버튼
__8. 볼륨 슬라이더
07-6 오디오 애플리케이션: 스페이스 레이더스 게임
__1. 애플리케이션에서의 사운드 문제
__2. 여러 버전으로 구현
__3. 스페이스 레이더스 게임의 구조
__4. 버전 1: 하나의 객체로 사운드 재생하기
__5. 버전 2: 무제한적으로 동적 사운드 객체 만들기
__6. 버전 3: 사운드 풀 만들기
__7. 버전 4: 프리로드한 사운드 재사용하기
07-7 다음 내용 소개

CHAPTER 08 캔버스 게임의 핵심
08-1 HTML5에서의 게임
__1. 플래시와 캔버스 비교
__2. 캔버스에서 제공하는 기능
08-2 게임에 사용할 기본 HTML5 파일
08-3 게임 디자인
08-4 게임 그래픽: 패스 이용하기
__1. 필요한 자원
__2. 패스를 이용하여 게임의 주요 캐릭터 그리기
08-5 캔버스에 애니메이션 효과 넣기
__1. 게임 타이머 구현
__2. 플레이어 우주선의 상태 변경
08-6 게임 그래픽에 변환 적용하기
__1. 캔버스 스택
08-7 게임 그래픽 변환
__1. 플레이어 우주선의 중심을 기준으로 회전하기
__2. 플레이어 우주선에 투명도 적용
08-8 물리학을 적용하여 애니메이션 구현
__1. 플레이어 우주선의 이동 원리
__2. 키보드로 플레이어 우주선 제어하기
__3. 플레이어 우주선의 최대 속도 지정
08-9 기본적인 게임 프레임워크
__1. 게임 상태 기계
__2. 갱신/렌더링 반복
__3. FrameRateCounter 객체 프로토타입
08-10 게임 애플리케이션 구현
__1. 지오 블라스터 게임의 구조
__2. 지오 블라스터 게임의 전역 변수
08-11 플레이어 객체
08-12 지오 블라스터 게임 알고리즘
__1. 논리적 출력 객체의 배열
__2. 레벨 스위치
__3. 레벨과 게임의 끝
__4. 보너스 우주선
__5. 충돌 검사 적용
08-13 지오 블라스터 베이직 전체 코드
08-14 암석 객체 프로토타입
08-15 다음 내용 소개

CHAPTER 09 비트맵과 사운드 사용
09-1 지오 블라스터 확장판
__1. 지오 블라스터 타일 시트
__2. 다른 게임 객체 렌더링
__3. 사운드 추가
__4. 객체 인스턴스 풀링
__5. 스텝 타이머 추가
__6. 지오 블라스터 확장판 전체 코드
09-2 실행 중에 동적 타일 시트 만들기
09-3 간단한 타일 기반 게임
__1. 마이크로 탱크 미로 게임의 개요
__2. 게임에서 사용할 타일 시트
__3. 플레이필드
__4. 플레이어
__5. 적군
__6. 목표
__7. 폭발
__8. 턴 방식 게임의 흐름과 상태 기계
__9. 타일 이동 로직의 개요
__10. 렌더링 로직의 개요
__11. 마이크로 탱크 미로에서 사용하는 인공지능
__12. 마이크로 탱크 미로 전체 게임 코드
09-4 다음 내용 소개

CHAPTER 10 폰갭을 이용한 모바일 게임
10-1 가자, 모바일로!
__1. 폰갭 소개
__2. 예제 애플리케이션
__3. 전체 코드
__4. BSBingo.html 코드
__5. 게임 애플리케이션 코드
10-2 폰갭을 이용하여 iOS 애플리케이션 만들기
__1. Xcode 설치하기
__2. 폰갭 설치하기
__3. Xcode에서 BS 빙고 폰갭 프로젝트 만들기
__4. 시뮬레이터에서 테스트하기
__5. BS 빙고를 프로젝트로 통합하기
__6. 출력 방향 설정하기
__7. 배너와 아이콘 변경하기
__8. 시뮬레이터에서 테스트하기
__9. 아이폰에 "제스처" 추가하기
__10. index.html에 제스처 기능 추가하기
__11. 장비에서 테스트하기
__12. Xcode에서 테스트 장비 지정하기
10-3 캔버스와 모바일
10-4 다음 내용 소개

CHAPTER 11 그 밖의 기술
11-1 WebGL을 이용한 3D
__1. WebGL이란?
__2. WebGL의 지원 여부
__3. WebGL에 대한 정보
__4. WebGL 애플리케이션
__5. 전체 코드
__6. WebGL에 대한 그 밖의 정보
__7. WebGL 자바스크립트 라이브러리
11-2 ElectroServer 5를 이용한 다중 사용자 애플리케이션
__1. ElectroServer 설치하기
__2. 소켓 서버 애플리케이션의 기본 구조
__3. ElectroServer 애플리케이션의 기본 구조
__4. ElectroServer를 이용한 채팅 애플리케이션 만들기
__5. 구글 크롬에서 애플리케이션 테스트하기
__6. ElectroServer의 또 다른 활용
__7. 빙산의 일각
11-3 이 책을 마치며