Search

대학에서 다년간 학생을 가르친 저자가 학생들에게 즐겁게 프로그램을 배울 수 있도록 가르친 노하우를 녹여낸 책이다. 누구나 즐길 수 있는 간단한 웹 게임으로 프로그램에 관심을 갖고 쉽게 접근할 수 있다. 처음부터 전체 코드를 보는 것이 아닌 간단한 코드를 가지고 복잡한 코드까지 서서히 늘려가면서 부담을 줄이고 이해를 높일 수 있다. 전체에서 반복적으로 코드를 설명해서 복습시킨다. 처음부터 전체 코드를 보는 것이 아닌 간단한 코드를 가지고 복잡한 코드까지 서서히 늘려가면서 부담을 줄이고 이해를 돕는다.

간단한 게임을 만들면서 HTML5와 자바스크립트를 배우고 단계별로 코드에 살을 붙여가며 응용력을 높인다.

- 프로그램은 어렵다는 선입견을 버리자
대학에서 다년간 학생을 가르친 저자가 학생들에게 즐겁게 프로그램을 배울 수 있도록 가르친 노하우를 녹여낸 책이다. 누구나 즐길 수 있는 간단한 웹 게임으로 프로그램에 관심을 갖고 쉽게 접근할 수 있다.

- 단계별 코드로 응용력을 높이자
처음부터 전체 코드를 보는 것이 아닌 간단한 코드를 가지고 복잡한 코드까지 서서히 늘려가면서 부담을 줄이고 이해를 높일 수 있다. 전체에서 반복적으로 코드를 설명해서 복습시킨다.

- 단계별 코드로 응용력을 높이자
처음부터 전체 코드를 보는 것이 아닌 간단한 코드를 가지고 복잡한 코드까지 서서히 늘려가면서 부담을 줄이고 이해를 돕는다. 전체에서 반복적으로 코드를 설명해서 복습시킨다.

어떤 독자를 위한 책인가?

- HTML5와 자바스크립트를 배우려는 초보자
- 동적 웹사이트 프로그램을 배우려는 초보자
- 동적 웹사이트의 원리가 궁금한 웹 디자이너나 사이트 운영자

저자 서문

예전부터 HTML5의 새 기능에 대한 상당한 열망이 있었고 다른 기술을 전혀 사용하지 않고도 역동적이고 멋진 대화형 웹사이트를 제작할 수 있는 가능성이 있었습니다. HTML5의 새 기능은 어쩌면 좀 과장일 수도 있지만, 관심을 끌만한 것임은 분명합니다. 이제는 HTML5, CSS, 자바스크립트만 가지고 화면에 직선, 호, 원, 타원을 그리거나 이벤트와 이벤트 처리를 지정하여 애니메이션을 구현하고 사용자 행동에 반응하게 할 수 있습니다. 자신의 웹사이트에 표준 컨트롤로 동영상이나 사운드를 삽입할 수 있고, 프로그램의 원하는 부분에 정확히 동영상이나 사운드를 배치할 수 있습니다. 입력 내용이 올바른지 검사해서 사용자에게 즉각적인 피드백을 주는 폼을 생성할 수도 있습니다. 쿠키와 비슷한 기능을 이용하여 사용자의 컴퓨터에 정보를 저장할 수 있으며, header나 footer 같은 새 요소를 사용해서 문서 구조를 명확하게 작성할 수 있습니다.
이 책은 필자의 강의 경험과 이제까지 집필해온 자료를 토대로 만들었습니다. 기술의 기능이나 프로그래밍 개념 등은 필요성을 느껴야만 빨리 배울 수 있습니다. 그러므로 이 책의 각 장을 많이 알려진 간단한 게임을 골라서 따라 해볼 수 있게 실습 예제로 구성했습니다. 이런 흥미롭고 실질적인 예제로 독자는 필요성과 동기를 느끼고 지루한 설명보다 효과적으로 많은 것을 쉽게 이해할 수 있습니다. 새 프로그래밍 언어를 배울 때 필자는 제일 먼저 크랩스 게임부터 프로그래밍해봅니다. 슬링샷 게임 같은 애니메이션을 이용한 탄도 시뮬레이션을 제작하고 특정 상황이 발생했을 때 동영상이나 사운드 클립이 재생되게 할 수 있다면 스스로 큰 만족감을 얻을 수 있기 때문입니다. 직접 미로 벽과 행맨의 단두대를 그리고, 컴퓨터에 게임 정보를 저장하고 나면 굉장히 기쁠 것입니다.

옮긴이의 말_ 김지원

저자 서문_ 지닌 마이어

저자 소개

대상 독자

책의 구성

소스 코드 규칙

감사의 글



1장 기초 학습

1-1 소개

1-2 사전 준비

1-3 HTML5, CSS, 자바스크립트의 기능

HTML의 기본 구조와 태그

자바스크립트 사용법

1-4 프로그램 구현과 응용

1-5 검사해서 올리기

1-6 1장을 한 눈에

2장 주사위 게임

2-1 소개

2-2 사전 준비

2-3 HTML5, CSS, 자바스크립트의 기능

의사 난수 처리와 수식

변수와 대입문

사용자 정의 함수

조건문 i f와 switch

캔버스에 그리기

2-4 프로그램 구현과 응용

주사위 한 개 던지기

주사위 두 개 던지기

완성된 크랩스 게임

2-5 검사해서 올리기

2-6 2장을 한 눈에

3장 공 튀기기

3-1 소개

3-2 사전 준비

3-3 HTML5, CSS, 자바스크립트의 기능

공, 그림, 그레이디언트 그리기

3-4 프로그램 구현과 응용

3-5 검사해서 올리기

3-6 3장을 한 눈에

4장 캐논볼과 슬링샷

4-1 소개

4-2 사전 준비

4-3 HTML5, CSS, 자바스크립트의 기능

배열과 사용자 정의 객체

그림의 회전과 평행이동

선분 그리기

새총을 당길 때의 마우스 이벤트

표시 항목 변경을 위해 배열의 splice 함수 사용

점 간의 거리

4-4 프로그램 구현과 응용

캐논볼: 대포, 각도, 속도

슬링샷: 마우스 이벤트 값을 비행 매개변수에 할당

4-5 검사해서 올리기

4-6 4장을 한 눈에

5장 짝맞추기 게임

5-1 소개

5-2 사전 준비

5-3 HTML5, CSS, 자바스크립트의 기능

카드 보여주기

Date를 이용한 시간 측정

일시 정지 효과 넣기

글자 그리기

다각형 그리기

카드 섞기

카드 클릭 기능 구현

부정행위 방지

5-4 프로그램 구현과 응용

5-5 검사해서 올리기

5-6 5장을 한 눈에

6장 퀴즈

6-1 소개

6-2 사전 준비

6-3 HTML5, CSS, 자바스크립트의 기능

배열에 정보 저장하기와 가져오기

프로그램 실행 중에 동적으로 HTML 생성하기

자바스크립트 코드로 CSS를 수정해서 요소 변화시키기

form과 input 요소로 글자 피드백 구현

동영상 보여주기

6-4 프로그램 구현과 응용

6-5 검사해서 올리기

6-6 6장을 한 눈에

7장 미로

7-1 소개

7-2 사전 준비

7-3 HTML5, CSS, 자바스크립트의 기능

벽과 토큰 표시

벽을 그리고 배치하는 마우스 이벤트

화살표 키 감지

토큰과 벽의 충돌 감지

로컬 저장소 이용

로컬 저장소에 저장할 데이터 인코딩

라디오 버튼

7-4 프로그램 구현과 응용

미로 2탄 제작

7-5 검사해서 올리기

7-6 7장을 한 눈에

8장 가위바위보

8-1 소개

8-2 사전 준비

8-3 HTML5, CSS, 자바스크립트의 기능

게임 참여자가 선택할 수 있는 그림 버튼 넣기

컴퓨터 측 동작 생성

프로그램 시동

8-4 프로그램 구현과 응용

8-5 검사해서 올리기

8-6 8장을 한 눈에

9장 행맨

9-1 소개

9-2 사전 준비

9-3 HTML5, CSS, 자바스크립트의 기능

단어 목록을 외부 스크립트 파일에 정의된 배열로 저장

HTML 요소를 생성하고 배치한 후 버튼처럼 만들고 불용화하기

캔버스에 단계적으로 그림을 생성

게임 상태 유지와 승패 판단

알아맞힌 알파벳을 검사하고 textContent를 할당해서 문제 단어의 알파벳 공개하기

9-4 프로그램 구현과 응용

9-5 검사해서 올리기

9-6 9장을 한 눈에

10장 블랙잭

10-1 소개

10-2 사전 준비

10-3 HTML5, CSS, 자바스크립트의 기능

카드 앞면 그림의 출처, Image 객체 설정

카드 사용자 정의 객체 생성

패 돌리기

카드 섞기

키 눌림 감지

header와 footer 요소

10-4 프로그램 구현과 응용

10-5 검사해서 올리기

10-6 10장을 한 눈에

부록 사례로 보는 HTML5 게임

1 Pacman

2 Pirates Love Daisies

3 VIRION

4 Biolab Disaster

5 Robot Are People Too

6 Mo-Jump

7 jQuery Racing

8 벽돌깨기

9 Touch Solita

10 Etchaphysics

11 Quake 2

12 요약

Index