황 동윤 저 
 2013 년 06 월 03 일 리뷰 총점 7 . 0 정보 더 보 기 / 감추 기 
 32 , 400 원 롯데카드 ( 10 % 청구 할 인 , 5 만 원 ↑, 할 인결 제 선택 시 , 한도 1 만 원 ) 33 , 000 원 BC 체크카드 ( 3 , 000 원 할인 , 쿠폰 , 3 만 원 ↑) 35 , 500 원 페이 코 ( 500 원 할인 , 3 천 원 ↑, 최대 3 회 ) 26 , 000 원 예스 24 하나 카드 ( 40 % 할인 , 월 한도 1 만 원 ) 
 2013 년 06 월 03 일 쪽수 , 무게 , 크기 716 쪽 | 1610 g | 183 * 235 * 40 mm ISBN 13 
 8968480222 	 국내 도서 > IT 모바일 > 웹 사이트 > HTML / JavaScript / CSS / jQuery 2 여름 을 여름 답 게 ! 포켓몬 비치 볼 + 섬머 비치백 증정 
 HTML 5 와 자바 스크립트 로 배우 는 멀티 플랫 폼 게임 프로그래밍 HTML 5 와 자바 스크립트 로 PC 와 스마트폰 용 멀티 플랫 폼 게임 을 한 번 에 개발 하 는 방법 을 안내 한다 . HTML 5 와 자바 스크립트 를 몰라도 차근차근 따라 하 기 만 하 면 누구 나 달리 기 게임 을 제작 할 수 있 도록 구성 했 다 . 복잡 한 내용 은 빼 고 HTML 5 와 자바 스크립트 의 필수 적 인 요소 만 설명 한 뒤 , 나머지 는 게임 제작 에 만 투자 했 다 . 화면 을 움직이 는 방법 , 캐릭터 가 움직이 는 방법 , 캐릭터 가 점프 하 는 방법 , 장애물 을 처리 하 는 방법 , 코인 아이템 을 습득 하 는 방법 등 달리 기 게임 을 만들 기 위해 알 아야 할 것 들 을 단계 별 로 제작 해 가 며 설명 하 고 구현 했 다 . 
 괴혼 의 아버지 로 알려진 다카하시 케이타 ( Takahashi Keita ) 를 존경 하 며 국제 게임 공모전 인 IGF 와 인디 케이드 에 참가 하 고 싶 은 평범 한 게임 개발자 다 . 수년 간 게임 , 웹 , 모바일 등 다양 한 분야 에서 프리랜서 로 일 했으며 , 랜스 군 의 게임 공작소 ( lancekun . com ) 를 운영 하 면서 게임 프로그래밍 관련 이슈 들 을 다루 고 있 다 . 저서 로 한빛 미디어 에서 펴낸 『 만들 면서 배우 는 안드로이드 게임 프로그래밍 』, 『 만들 면서 배우 는 HTML 5 게임 프로그래밍 』 이 있 다 . 
 1 장 HTML 5 소개 1 . 1 HTML 5 개발 환경 1 . 2 개발 환경 구성 하 기 1 . 2 . 1 웹 브라우저 설치 하 기 1 . 2 . 2 앱 태 나 설치 하 기 1 . 2 . 3 앱 태 나 스튜디오 둘러보 기 2 장 기본기 배우 기 2 . 1 HTML 5 와 자바 스크립트 2 . 1 . 1 HTML 5 둘러보 기 2 . 1 . 2 자바 스크립트 둘러보 기 2 . 2 이미지 띄우기 2 . 2 . 1 캔버스 란 ? 2 . 2 . 2 캔버스 추가 하 기 2 . 2 . 3 이미지 출력 하 기 2 . 2 . 4 배우 면서 게임 만들 기 1 단계 2 . 3 입력 처리 2 . 3 . 1 이벤트 를 이용 한 키 입력 처리 2 . 3 . 2 이벤트 를 이용 한 마우스 입력 처리 2 . 3 . 3 배우 면서 게임 만들 기 2 단계 2 . 4 타이머 처리 2 . 4 . 1 타이머 를 이용 한 레벨 업 애플리케이션 2 . 4 . 2 배우 면서 게임 만들 기 3 단계 2 . 5 사운드 처리 2 . 5 . 1 HTMLAudioElement 를 이용한 사운드 재생 하 기 2 . 5 . 2 배우 면서 게임 만들 기 4 단계 와 마무리 3 장 게임 프레임워크 만들 기 3 . 1 게임 루프 생성 3 . 1 . 1 프레임 측정기 구현 3 . 1 . 2 고정 프레임 게임 루프 3 . 1 . ... 1 장 HTML 5 소개 1 . 1 HTML 5 개발 환경 1 . 2 개발 환경 구성 하 기 1 . 2 . 1 웹 브라우저 설치 하 기 1 . 2 . 2 앱 태 나 설치 하 기 1 . 2 . 3 앱 태 나 스튜디오 둘러보 기 2 장 기본기 배우 기 2 . 1 HTML 5 와 자바 스크립트 2 . 1 . 1 HTML 5 둘러보 기 2 . 1 . 2 자바 스크립트 둘러보 기 2 . 2 이미지 띄우기 2 . 2 . 1 캔버스 란 ? 2 . 2 . 2 캔버스 추가 하 기 2 . 2 . 3 이미지 출력 하 기 2 . 2 . 4 배우 면서 게임 만들 기 1 단계 2 . 3 입력 처리 2 . 3 . 1 이벤트 를 이용 한 키 입력 처리 2 . 3 . 2 이벤트 를 이용 한 마우스 입력 처리 2 . 3 . 3 배우 면서 게임 만들 기 2 단계 2 . 4 타이머 처리 2 . 4 . 1 타이머 를 이용 한 레벨 업 애플리케이션 2 . 4 . 2 배우 면서 게임 만들 기 3 단계 2 . 5 사운드 처리 2 . 5 . 1 HTMLAudioElement 를 이용한 사운드 재생 하 기 2 . 5 . 2 배우 면서 게임 만들 기 4 단계 와 마무리 3 장 게임 프레임워크 만들 기 3 . 1 게임 루프 생성 3 . 1 . 1 프레임 측정기 구현 3 . 1 . 2 고정 프레임 게임 루프 3 . 1 . 3 가변 프레임 게임 루프 3 . 2 입력 처리 시스템 구현 3 . 3 사운드 시스템 구현 3 . 4 게임 상태 의 이해 와 게임 상태 기반 구현 3 . 4 . 1 게임 상태 의 이해 3 . 4 . 2 게임 상태 기반 구현 3 . 5 게임 에 사용 할 프레임워크 의 부 가 요소 제작 3 . 5 . 1 게임 에 그림 을 표시 하 는 GraphicObject 3 . 5 . 2 게임 에 움직임 을 표현 하 는 SpriteAnimation 3 . 6 리소스 프리 로더 의 구현 3 . 7 디버그 시스템 의 구현 3 . 8 프레임워크 의 부 가 요소 3 . 8 . 1 타이머 구현 3 . 8 . 2 프레임 스키퍼 3 . 8 . 3 화면 전환 효과 구현 하 기 3 . 9 프레임워크 개발 마무리 3 . 9 . 1 프레임워크 정리 하 기 3 . 9 . 2 프레임워크 를 이용 한 총알 피하 기 게임 제작 4 장 실제 게임 개발 하 기 4 . 1 타이틀 구성 하 기 4 . 2 배경 조작 4 . 3 지형 과 장애물 구현 하 기 4 . 4 플레이어 구현 하 기 4 . 5 아이템 구현 하 기 4 . 6 마무리 4 . 6 . 1 HTML 페이지 꾸며 주 기 4 . 6 . 2 타이틀 화면 이미지 교체 4 . 6 . 3 점프 시 플레이어 이미지 교체 4 . 6 . 4 다양 한 재미 요소 추가 하 기 5 장 Node . js 를 이용 한 멀티 유저 게임 개발 하 기 5 . 1 Node . js 소개 5 . 2 Node . js 개발 환경 구축 하 기 5 . 3 Socket . IO 연결 하 기 5 . 4 서버 와 클라이언트 의 메시지 통신 5 . 5 Socket . IO 를 프레임워크 요소 로 추가 하 기 5 . 6 멀티 유저 게임 개발 하 기 6 장 게임 배포 하 기 6 . 1 게임 최적 화 하 기 6 . 2 자체 적 인 서비스 6 . 3 페이스북 과 의 연동 6 . 4 모바일 애플리케이션 6 . 4 . 1 모바일 환경 지원 하 기 6 . 4 . 2 폰 갭 빌드 를 이용 한 앱 형태 배포 6 . 5 크롬 웹 스토어 에 배포 하 기 6 . 6 마치 면서 부록 A 자바 스크립트 키 코드 
 2010 년 중순 『 만들 면서 배우 는 안드로이드 게임 프로그래밍 』 의 집필 을 마무리 하 던 중 HTML 5 를 알 게 되 었 습니다 . 플러그인 을 사용 하 는 플래시 없이 도 HTML 5 에서 는 순수 웹 기술 만 으로 게임 을 만들 수 있 다는 사실 에 흥분 했 습니다 . 그러나 2010 년 에 는 HTML 5 를 지원 하 는 웹 브라우저 도 널리 보급 되 지 않 았 고 , 웹 게임 제작 에 주로 쓰이 는 플래시 보다 성능 이 매우 낮 다는 문제 가 있 었 습니다 . 그럼에도 HTML 5 기술 이 발달 하 면 HTML 5 가 게임 개발 의 주축 이 되 는 시대 가 오리 라 예상 하 고 있 었 습니다 . HTML 5 게임 개발 기술 을 준비 하 는 시간 이 필요 하 다고 생각 했 고 , 어느덧 주변 환경 을 보 면 HTML 5 의 시대 가 다가오 고 있 음 을 느낍니다 . HTML 5 게임 개발 은 아직 정형 화 된 개발 방법 이 없 습니다 . 그렇 기에 누구 나 게임 을 개발 할 수 있 는 게임 프레임워크 를 제작 하 고 , 개발 자 가 아니 어도 누구 나 쉽 게 이해 하 며 HTML 5 게임 을 개발 할 수 있 게 하 자는 의도 로 집필 을 진행 했 습니다 . 개인 적 인 경험 을 토대 로 모든 내용 을 작성 하 다 보 니 책 의 내용 구성 상 체계 적 이 지 못하 게 기술 한 부분 이 있 으리라 생각 합니다 . 하 지만 번 역서 가 아닌 집필 서로 HTML 5 게임 개발 을 다룬 만큼 , 다른 HTML 5 . .. 2010 년 중순 『 만들 면서 배우 는 안드로이드 게임 프로그래밍 』 의 집필 을 마무리 하 던 중 HTML 5 를 알 게 되 었 습니다 . 플러그인 을 사용 하 는 플래시 없이 도 HTML 5 에서 는 순수 웹 기술 만 으로 게임 을 만들 수 있 다는 사실 에 흥분 했 습니다 . 그러나 2010 년 에 는 HTML 5 를 지원 하 는 웹 브라우저 도 널리 보급 되 지 않 았 고 , 웹 게임 제작 에 주로 쓰이 는 플래시 보다 성능 이 매우 낮 다는 문제 가 있 었 습니다 . 그럼에도 HTML 5 기술 이 발달 하 면 HTML 5 가 게임 개발 의 주축 이 되 는 시대 가 오리 라 예상 하 고 있 었 습니다 . HTML 5 게임 개발 기술 을 준비 하 는 시간 이 필요 하 다고 생각 했 고 , 어느덧 주변 환경 을 보 면 HTML 5 의 시대 가 다가오 고 있 음 을 느낍니다 . HTML 5 게임 개발 은 아직 정형 화 된 개발 방법 이 없 습니다 . 그렇 기에 누구 나 게임 을 개발 할 수 있 는 게임 프레임워크 를 제작 하 고 , 개발 자 가 아니 어도 누구 나 쉽 게 이해 하 며 HTML 5 게임 을 개발 할 수 있 게 하 자는 의도 로 집필 을 진행 했 습니다 . 개인 적 인 경험 을 토대 로 모든 내용 을 작성 하 다 보 니 책 의 내용 구성 상 체계 적 이 지 못하 게 기술 한 부분 이 있 으리라 생각 합니다 . 하 지만 번 역서 가 아닌 집필 서로 HTML 5 게임 개발 을 다룬 만큼 , 다른 HTML 5 책 에서 는 얻 을 수 없 는 무언가 를 독자 가 얻 어 갈 수 있 는 책 이 되 면 좋 겠 습니다 . 이 책 은 HTML 5 와 자바 스크립트 로 게임 을 개발 하 지만 , 내용 의 대부분 은 게임 프로그래밍 의 기본 원리 를 설명 하 는 데 할애 했 습니다 . 이 책 을 따라 하 면서 HTML 5 와 자바 스크립트 로 게임 프레임워크 를 개발 하 고 , 이 프레임워크 를 이용 해 게임 을 개발 하 는 실습 과정 을 경험 한다면 다른 언어 와 다른 환경 에서 게임 을 개발 하 더라도 스스로 게임 프레임워크 제작 과 게임 개발 을 할 수 있 는 응용 력 을 키울 수 있 다고 생각 합니다 . 책 의 내용 중 궁금 한 사항 이나 잘못 된 점 이 있 다면 이메일 을 보내 주 시 기 바랍니다 . 지구 상 에서 이 책 을 찾 을 수 없 을 때 까지 답변 을 남겨 드리 겠 습니다 . 단 , 개인 사정 에 따라 답변 이 늦 어 질 수 있 다는 점 은 미리 양해 를 부탁드립니다 . 낳 아 주 시 고 키워 주 신 부모 님 과 이렇게 부족 한 저 에게 집필 을 맡겨 주 신 한동훈 과장 님 과 한빛 미디어 관계자 분 들 , 언제나 저 를 격려 해 주 시 는 많 은 분 , 모두 에게 감사 드립니다 . HTML 5 게임 개발 에 처음 입문 하 는 독자 가 이 책 을 통해 게임 개발 에 흥미 를 느끼 고 , 자신 만 의 세계 와 생각 을 게임 으로 만드 는 데 이 책 이 조금 이 라도 도움 이 되 기 를 희망 합니다 . 지은이 _ 황동 윤 
 HTML 5 와 자바 스크립트 로 PC 와 스마트폰 용 멀티 플랫 폼 게임 을 한 번 에 개발 하 는 방법 나 도 윈드 러너 같 은 달리기 게임 을 만들 고 싶 다 ! 윈드 러너 같 은 달리기 게임 을 제작 하 는 방법 을 설명 한다 . HTML 5 를 모르 고 , 자바 스크립트 를 몰라도 차근차근 따라 하 기 만 하 면 누구 나 달리 기 게임 은 제작 할 수 있 게 했 다 . HTML 5 를 설명 할 생각 도 , 자바 스크립트 를 설명 할 생각 도 없 다 . 딱 게임 제작 에 필요 한 HTML 5 와 자바 스크립트 만 설명 하 고 , 나머지 는 게임 제작 에 만 투자 했 다 . 화면 을 움직이 는 방법 , 캐릭터 가 움직이 는 방법 , 캐릭터 가 점프 하 는 방법 , 장애물 을 처리 하 는 방법 , 코인 아이템 을 습득 하 는 방법 등 을 단계 별 제작 을 통해 설명 하 고 구현 하 면서 완성 했 다 . 최초 로 공개 하 는 대전 게임 제작 의 원리 서버 가 필요 한 게임 제작 이나 대전 게임 을 제작 하 려면 C ++ 언어 로 개발 한 서버 가 필요 하 다는 생각 이 지배 적 이 다 . 여기 서 는 자바 스크립트 와 Node . js 를 사용 해 서버 를 구현 하 고 , 두 사람 이 즐길 수 있 는 대전 게임 을 직접 구현 하 면서 게임 서버 와 대전 게임 제작 의 원리 를 설명 했 다 . 멀티 플랫 폼 게임 개발 을 최초 로 보여준다 HTML 5 는 플랫 폼 이 다 . 운영 체제 에 종속 된 API 에 기반 한 프로그래밍 을 벗어나 HTML 5 플랫폼 에 기반 한 개발 의 시대 로 전환 하 고 있 다 . HTML 5 플랫폼 에서 개발 하 면 PC , 태블릿 , 스마트폰 어디 서 나 동작 할 수 있 다 . 게임 화면 을 디바이스 의 크기 에 따라 조절 하 는 방식 을 보여 주 고 , 마우스 클릭 과 터치 이벤트 를 동시 에 처리 하 는 입력 처리 시스템 을 어떻게 개발 하 는지 설명 했 다 . HTML 5 와 자바 스크립트 로 배우 는 멀티 플랫 폼 게임 프로그래밍 - 게임 프레임워크 제작 으로 배우 는 기초 원리 어떤 게임 을 제작 하 더라도 게임 이 라면 갖춰야 할 요소 를 프레임워크 로 정리 했 다 . 게임 루프 생성 , 키보드 와 마우스 를 위한 입력 처리 시스템 , 스마트폰 환경 을 위한 터치 입력 시스템 , 사운드 시스템 , 게임 상태 전환 , 그래픽 객체 와 애니메이션 관리자 , 리소스 프리 로 더 , 프레임 스키퍼 , 디버깅 시스템 을 단계 별 로 완성 하 며 게임 의 기초 원리 를 완벽 하 게 학습 한다 . - 단계 별 완성 으로 배우 는 게임 프로그래밍 자바 스크립트 기초 문법 부터 시작 해서 총알 피하 기 게임 제작 , 게임 만들 기 의 기반 이 되 는 게임 프레임워크 개발 . .. HTML 5 와 자바 스크립트 로 PC 와 스마트폰 용 멀티 플랫 폼 게임 을 한 번 에 개발 하 는 방법 나 도 윈드 러너 같 은 달리기 게임 을 만들 고 싶 다 ! 윈드 러너 같 은 달리기 게임 을 제작 하 는 방법 을 설명 한다 . HTML 5 를 모르 고 , 자바 스크립트 를 몰라도 차근차근 따라 하 기 만 하 면 누구 나 달리 기 게임 은 제작 할 수 있 게 했 다 . HTML 5 를 설명 할 생각 도 , 자바 스크립트 를 설명 할 생각 도 없 다 . 딱 게임 제작 에 필요 한 HTML 5 와 자바 스크립트 만 설명 하 고 , 나머지 는 게임 제작 에 만 투자 했 다 . 화면 을 움직이 는 방법 , 캐릭터 가 움직이 는 방법 , 캐릭터 가 점프 하 는 방법 , 장애물 을 처리 하 는 방법 , 코인 아이템 을 습득 하 는 방법 등 을 단계 별 제작 을 통해 설명 하 고 구현 하 면서 완성 했 다 . 최초 로 공개 하 는 대전 게임 제작 의 원리 서버 가 필요 한 게임 제작 이나 대전 게임 을 제작 하 려면 C ++ 언어 로 개발 한 서버 가 필요 하 다는 생각 이 지배 적 이 다 . 여기 서 는 자바 스크립트 와 Node . js 를 사용 해 서버 를 구현 하 고 , 두 사람 이 즐길 수 있 는 대전 게임 을 직접 구현 하 면서 게임 서버 와 대전 게임 제작 의 원리 를 설명 했 다 . 멀티 플랫 폼 게임 개발 을 최초 로 보여준다 HTML 5 는 플랫 폼 이 다 . 운영 체제 에 종속 된 API 에 기반 한 프로그래밍 을 벗어나 HTML 5 플랫폼 에 기반 한 개발 의 시대 로 전환 하 고 있 다 . HTML 5 플랫폼 에서 개발 하 면 PC , 태블릿 , 스마트폰 어디 서 나 동작 할 수 있 다 . 게임 화면 을 디바이스 의 크기 에 따라 조절 하 는 방식 을 보여 주 고 , 마우스 클릭 과 터치 이벤트 를 동시 에 처리 하 는 입력 처리 시스템 을 어떻게 개발 하 는지 설명 했 다 . HTML 5 와 자바 스크립트 로 배우 는 멀티 플랫 폼 게임 프로그래밍 - 게임 프레임워크 제작 으로 배우 는 기초 원리 어떤 게임 을 제작 하 더라도 게임 이 라면 갖춰야 할 요소 를 프레임워크 로 정리 했 다 . 게임 루프 생성 , 키보드 와 마우스 를 위한 입력 처리 시스템 , 스마트폰 환경 을 위한 터치 입력 시스템 , 사운드 시스템 , 게임 상태 전환 , 그래픽 객체 와 애니메이션 관리자 , 리소스 프리 로 더 , 프레임 스키퍼 , 디버깅 시스템 을 단계 별 로 완성 하 며 게임 의 기초 원리 를 완벽 하 게 학습 한다 . - 단계 별 완성 으로 배우 는 게임 프로그래밍 자바 스크립트 기초 문법 부터 시작 해서 총알 피하 기 게임 제작 , 게임 만들 기 의 기반 이 되 는 게임 프레임워크 개발 하 기 , 게임 프레임워크 에 기반 한 러너 게임 을 단계 별 로 완성 해본다 . 러너 게임 을 완성 한 이후 에 는 Node . js 를 이용 해 네트워크 대전 게임 을 제작 한다 . - 실시간 네트워크 대전 게임 제작 자바 스크립트 로 서버 프로그래밍 을 할 수 있 는 Node . js 를 활용 해 실시간 대전 게임 을 구현 해본다 . Node . js 와 기본 사용법 과 Socket . IO 를 살펴보 고 이 를 게임 프레임워크 에 통합 하 는 과정 도 설명 한다 . 이 를 토대 로 러너 게임 을 네트워크 대전 게임 으로 발전 시켜 보 게 했 다 . - 멀티 플랫폼 으로 배포 하 기 HTML 5 와 자바 스크립트 를 지원 하 는 웹 브라우저 만 있 으면 어디 서 나 게임 을 실행 할 수 있 다는 이점 을 활용 해 다양 한 플랫폼 으로 게임 을 배포 할 수 있 다 . 아이폰 , 안드로이드 , 윈도 폰 용 앱 으로 변환 하 는 과정 을 설명 하 고 , PC 환경 을 위해서 는 페이스북 과 크롬 웹 스토어 에 배포 하 는 과정 을 설명 한다 . ※ 상품 설명 에 반품 / 교환 과 관련 한 안내 가 있 는 경우 아래 내용 보다 우선 합니다 . ( 업체 사정 에 따라 달라질 수 있 습니다 )