HTML5 캔버스

HTML5, CSS, JavaScript를 함께 배우는 게임 학습서

임정훈 지음

비제이퍼블릭 2017년 03월 07일 출간 종이책 : 2016년 11월 09일 출간

작품소개

책소개

HTML5, CSS, JavaScript를 함께 배우는 게임 학습서!

[HTML5 캔버스]는 2014년 표준안이 확정된 월드 와이드 웹(WWW)의 핵심 마크업 언어인 HTML5와 CSS, JavaScript를 아울러 다루고 있다. 각 단계 별 예제를 보고 쉽게 따라서 할 수 있도록 안내하고 있으며, HTML5, CSS, JavaScript의 기본적인 내용부터 jQuery를 사용한 고급 기능까지 응용하여 하나의 완성된 게임을 만들어 보는 과정으로 구성되었다.

목차

1장. 이 책을 시작하기 전에
- 개발환경 구축하기
- 웹 브라우저 설치하기
- Autoset9 설치하기
- 에디터 Aptana Studio 설치하기

2장. HTML, CSS, JavaScript
- HTML
- CSS
- JavaScript
- 커스텀 비디오 플레이어 만들기
- jQuery

3장. Canvas의 기초
- 선, 사각형, 원 그리기
- 내부 채우기
- 이미지 그리기
- 글씨 쓰기
- 그림자 그리기
- 이동, 회전, 스케일, 변형하기
- 색상 보정하기
- 합성하기
- 애니메이션 만들기
- 클릭한 곳에 사각형 그리기
- 백그라운드 이미지 애니메이션 만들기
- 이미지를 키보드로 움직이기
- JSON 객체와 배열 처리하기
- 마우스 충돌 체크하기
- 슈팅 충돌 체크하기
- 파티클 만들기
- 간단한 불꽃 파티클 만들기
- 오디오 스펙트럼 만들기

4장. 두더지 잡기

- 배경 만들기
- 구멍 배치하기
- 화면에 구멍 6개 배치하기
- 두더지 배치하기
- 해머로 마우스 커서 변경하기
- 이미지의 애니메이션을 위해 소스 수정하기
- 마우스의 해머 이미지를 타격하는 이미지로 변경하기
- 해머와 두더지의 충돌 체크하기
- 효과음 넣기
- 점수와 시간 표시하기
- 시작 화면 만들기

5장. 꿀벌의 여행
- 게임 개발 과정

6장. 스페이스 슈팅 게임 만들기
- 게임 개발 과정

7장. 이솝우화: 여우와 포도
- 게임 개발 과정

8장. 선 이어 그리기
- 시작 화면 만들기
- 이미지 불러오기
- 이미지 위에 첫 선 그리기
- 번호를 적을 곳에 원 그리기
- 그림 완성하기
- 그리기 완료하기

9장. JavaScript로 SQLite 게시판 만들기
- 데이터베이스 생성하기
- 임시 데이터 넣기
- 리스트 출력하기
- 데이터 입력하기
- 데이터 수정하기
- 데이터 삭제하기
- 테이블 삭제하기
- 글 지우기

출판사 서평

이 책에서 다루는 내용

- HTML5, CSS, JavaScript 기초
- jQuery, JSON의 기본적인 사용법 이해
- HTML5 Canvas 기초
- 다양한 게임을 만들며 Canvas 익히기

독자대상
초중급

이 책의 전반부에는 HTML5를 처음 접하는 분들을 위한 기본 내용들과 쉬운 예제들이 체계적으로 수록되어 있으며, 후반부에서는 간단한 게임들을 만드는 구조를 통하여 독자들이 실제 게임 개발의 흐름을 파악하고 실습할 수 있도록 구성되어 있다. 새로운 웹 표준을 준수하는 기초 개발 이론과 예제들을 습득하여 웹 프로그래밍의 기본을 확립해 보자.

직접 게임을 만들어보자!

- 두더지 잡기
- 꿀벌의 여행
- 스페이스 슈팅 게임
- 이솝 우화를 간단한 RPG로 만들기
- JavaScript로 SQLite 게시판 만들기

작가정보

저자(글) 임정훈

저자 임정훈은 잉그리워드(engryword.com)라는 영어 교육 콘텐츠 사이트를 개발, 운영하고 있는 프리랜서 개발자. 새로운 기술과 게임 엔진에 관심이 많아 현재는 unity3D와 unreal engine에도 많은 애정을 쏟고 있다. 개인 블로그(http://blog.naver.com/liokingim)를 운영하면서 취미 삼아 일본 소설 번역을 하고 있다.