P5.js 게임 기초편

누구나 코딩 아티스트 14

김성일 지음

코딩북스 2025년 01월 10일 출간

작품소개

책소개

총 32개(=기초편:16개, 객체편:16개)의 다양한 게임 제작으로 누구나 P5.js 게임 개발 전문가!

p5.js는 자바스크립트(웹프로그래밍의 가장 대중적인 언어) 기반의 오픈소스 라이브러리로, 직관적이고 사용하기 쉬운 문법을 통해 누구나 쉽게 게임 개발을 시도해 볼 수 있게 해줍니다. 특히, 웹 환경에서 바로 실행되는 특성 덕분에 결과를 빠르게 확인하고 수정할 수 있는 점은 p5.js만의 매력 중 하나입니다. 그러므로 p5.js는 코딩 및 게임 개발의 입문자가 게임 개발에 쉽게 접근할 수 있는 매우 적합한 도구라고 할 수 있습니다.

게임은 많은 이들에게 단순한 오락을 넘어 상상력을 자극하고 창의성을 표현하는 수단이 되었습니다. 특히, 게임 개발은 창의성과 기술의 융합으로 이루어지는 흥미로운 분야입니다. 많은 사람들이 게임을 즐기고 있지만 자신이 직접 게임을 개발해 본 경험을 가진 사람은 많지 않습니다. 본서는 게임 개발의 첫걸음을 떼는 입문자들을 위해 32개의 다양한 게임 제작 과정을 상세히 안내하는 길잡이입니다. 각 게임별로 순차적 단계를 거쳐 게임을 완성하면서 자연스럽게 코딩의 기초를 탄탄하게 다질 수 있습니다.

본서의 목표는 간단합니다. 여러분이 p5.js(자바스크립트)를 활용하여 다양한 종류의 게임을 직접 개발할 수 있도록 돕는 것입니다. 본서는 p5.js의 기초적인 코딩 실습에서 시작해 모듈화된 객체지향 코딩까지 다루며, 여러분들이 자신만의 게임을 완성하는 데 필요한 과정을 단계별로 안내합니다. 본서의 Ⅰ부에서는 게임 개발을 위한 p5.js 코딩의 기본을 연습합니다. Ⅱ부에서는 게임 개발을 위한 필수 요소를 배우고, Ⅲ부에서는 객체를 사용하지 않고 16가지 종류의 다양한 게임을 만들어 봅니다. Ⅳ부에서는 객체지향 프로그래밍의 핵심을 학습하고 Ⅴ부에서는 16가지 종류의 객체 기반의 다양한 게임을 구현해 봅니다. 마지막 Ⅵ부에서는 p5.js와 아두이노의 연동을 통해 게임을 하드웨어로 제어해 봅니다.

목차

Ⅰ P5.js 기본

01 P5.js: 시작
1.1 p5.js란? 19
1.2 웹에디터에서 코딩 21
1.3 비주얼 스튜디오 코드에서 코딩 26
1.4 기본 표현: 캔버스 31
1.5 기본 표현: 점과 선 33
1.6 기본 표현: 원과 사각형 35
1.7 기본 표현: 문자 36
1.8 기본 표현: 색상 37
【심화1.1】 2진수 & 16진수 38
1.9 기본 표현: 원호 및 사용자 정의 도형 43

02 P5.js: 변수
2.1 변수 선언, 초기화 및 연산 49
【심화2.1】 콘솔창 사용 55
【심화2.2】 콘솔창 사용 시 유의점 및 사용 예 57
【심화2.3】 유니코드(Unicode) & 아스키코드(ASCII Code) 59
【심화2.4】 데이터형 총정리 61
2.2 변수 기반 움직임 표현 64
2.3 전역변수와 지역변수 70

03 P5.js: 조건, 반복
3.1 조건: if문, if-else문, <if-else if>문 74
【심화3.1】 비교 연산자 보충 76
3.2 조건: switch문 81
3.3 반복: for문, 중첩 for문 83

04 P5.js: 배열, 함수
4.1 1차원 배열 90
4.2 2차원 배열 98
4.3 함수유형1,2 101
4.4 함수유형3,4 106

Ⅱ 게임의 기초

05 다양한 충돌 조건
5.1 마우스와 원의 충돌 판단 115
5.2 마우스와 사각형의 충돌 판단 116
5.3 두 원의 충돌 판단 119
5.4 두 사각형의 충돌 판단 120

06 다양한 움직임 구현
6.1 마우스의 움직임 표현 125
6.2 속도 126
6.3 가속도 128
6.4 마찰 130
6.5 진동 131
6.6 회전 운동 133
6.7 불규칙 운동 135

07 키보드/마우스 제어
7.1 키보드 및 마우스 누름 제어 139
7.2 키보드상의 특정키로 제어 141
7.3 키보드상의 방향키로 제어 142
7.4 마우스의 좌우 버튼으로 제어 144
7.5 이벤트함수 147

08 사운드/이미지 파일 다루기
8.1 사운드/이미지 파일 준비 155
8.2 사운드 재생 157
8.3 이미지 출력 162
【심화8.1】 콜백함수(Callback Function) 165

Ⅲ 게임의 구현

09 낙하하는 목표물 잡기
9.1 [1단계] 마우스로 플레이어 좌우 이동 168
9.2 [2단계] 낙하하는 목표물 만들기 169
9.3 [3단계] 낙하하는 목표물을 잡으면 점수 획득 171
9.4 [4단계] 게임 종료 시 키를 눌러 재시작 173
9.5 [완성] 낙하하는 목표물 잡기 175
【심화9.1】 게임 화면 분리 182
【심화9.2】 캔버스 화면 크기 최대 설정 185

10 랜덤 출현 목표물 맞추기
10.1 [1단계] 매초 랜덤 위치로 변경되는 목표물 189
10.2 [2단계] 매초 랜덤 위치로 변경되는 목표물 맞추기 191
10.3 [완성] 랜덤 출현 목표물 맞추기 195
【심화10.1】 시간 측정의 다양한 방법 199

11 랜덤 이동 목표물 맞추기
11.1 [1단계] 랜덤 이동 목표물 만들기 206
11.2 [2단계] 마우스로 랜덤 이동 목표물 맞추기 209
11.3 [3단계] 랜덤 이동 목표물 맞추면 점수 증가, 크기 감소 210
11.4 [4단계] 제한시간을 사각형 진행바로 표시 212
11.5 [완성] 랜덤 이동 목표물 맞추기 215
【심화11.1】 타이머(Timer)의 시각화 219

12 직선 이동 후 목표물 획득
12.1 [1단계] 방향키로 플레이어 상하좌우 이동 225
12.2 [2단계] 방향키로 플레이어 이미지 이동 228
12.3 [3단계] 플레이어의 이동 시 가속도와 마찰율 적용 231
12.4 [4단계] 플레이어를 직선 이동 후 목표물 획득 233
12.5 [완성] 플레이어를 직선 이동 후 목표물 획득 235

13 회전 이동 후 목표물 획득
13.1 [1단계] 방향키로 플레이어 회전 이동 241
13.2 [2단계] 방향키로 플레이어 회전 이동 후 목표물 획득 246
13.3 [완성] 플레이어를 회전 이동 후 목표물 획득 249

14 장애물 뛰어넘기
14.1 [1단계] 끊임없이 이동하는 장애물 만들기 255
14.2 [2단계] 플레이어 제자리 점프 257
14.3 [3단계] 장애물 뛰어넘어 점수 획득 261
14.4 [완성] 장애물 뛰어넘기 263

15 포물선 이동 목표물 맞추기
15.1 [1단계] 포물선 이동하는 목표물 269
15.2 [2단계] 목표물 맞추면 점수 상승 274
15.3 [3단계] 조준경 및 목표물 폭발 효과 표시 278
15.4 [완성] 포물선 이동 목표물 맞추기 282

16 중력/마찰 기반 목표물 맞추기
16.1 [1단계] 마우스를 따라 움직이는 플레이어 290
16.2 [2단계] 낙하→반사→감쇄하는 볼 만들기 292
16.3 [3단계] 중력/마찰 기반 볼 치기 294
16.4 [4단계] 볼을 쳐서 목표물 맞추기 297
16.5 [완성] 중력/마찰 기반 목표물 맞추기 299

17 추적자를 피해 목표물 획득
17.1 [1단계] 추적자 만들기 (마우스로 플레이어 이동) 305
17.2 [2단계] 추적자를 피해 목표물 획득 (마우스로 플레이어 이동) 308
17.3 [3단계] 추적자를 피해 목표물 획득 (방향키로 플레이어 이동) 311
17.4 [완성] 추적자를 피해 목표물 획득 313

18 주사위 놀이-1: 경주
18.1 [1단계] 랜덤 주사위값 출력 320
18.2 [2단계] 배열 기반 랜덤 주사위값 출력 322
18.3 [3단계] 배열 기반 두 개의 랜덤 주사위값 출력 324
18.4 [4단계] 두 개의 이모지 경주 게임 326
18.5 [완성] 주사위 놀이-1: 경주 328

19 주사위 놀이-2: 폭탄 찾기
19.1 [1단계] 배열요소 중 하나를 폭탄 이모지로 랜덤 변경 334
19.2 [2단계] 배열에 숨겨진 폭탄 찾기 336
19.3 [3단계] 배열에 숨겨진 폭탄을 찾으면 게임 종료 338
【심화19.1】 다양한 배열 초기화 방법 340
19.4 [완성] 주사위 놀이-2: 폭탄 찾기 342

20 이동 목표물 잡기
20.1 [1단계] 방향키로 플레이어 상하 이동 제어 346
20.2 [2단계] 배열 기반 이동하는 목표물 348
20.3 [3단계] 객체 리터럴 기반 이동하는 목표물과 적 349
【심화20.1】 배열 & 객체 리터럴 353
20.4 [4단계] 일정 시간마다 생성, 이동, 제거되는 목표물과 적 355
20.5 [5단계] 배경 이미지의 좌우 이동 360
20.6 [완성] 이동 목표물 잡기 363

21 낙하 목표물 슈팅-1
21.1 [1단계] 방향키로 플레이어 좌우 이동 369
21.2 [2단계] 레이저빔 슈팅 372
21.3 [3단계] 낙하하는 목표물 375
21.4 [4단계] 일정 시간마다 목표물 생성, 낙하, 제거 377
21.5 [5단계] 낙하 목표물 슈팅 378
21.6 [6단계] 배경 이미지의 상하 이동 381
21.7 [완성] 낙하 목표물 슈팅 383

22 낙하 목표물 슈팅-2
22.1 [1단계] 방향키로 플레이어 상하좌우 이동 390
22.2 [2단계] 총알 슈팅 392
22.3 [3단계] 낙하 목표물 슈팅 394
22.4 [완성] 낙하 목표물 슈팅 397

23 벽돌 깨기
23.1 [1단계] 방향키로 플레이어 좌우 이동 404
23.2 [2단계] 볼 상하좌우 반사 405
23.3 [3단계] 플레이어로 볼 치기 408
23.4 [4단계] 2차원 배열 기반 벽돌 만들기 412
23.5 [완성] 벽돌 깨기 414

24 미로 탈출
24.1 [1단계] 미로 만들기-기초1 422
24.2 [2단계] 미로 만들기-기초2 424
24.3 [3단계] 미로 만들기-기초3 426
24.4 [4단계] 랜덤 미로 만들기 428
24.5 [5단계] 방향키로 플레이어 이동 433
24.6 [6단계] 미로상에서 플레이어 이동 434
24.7 [완성] 미로 탈출 438

마무리
마무리 445

출판사 서평

[1] 총 32개의 다양한 게임 제작
<기초편>에서 16개, <객체편>에서 16개의 게임을 합쳐 총 32개의 다양한 게임을 만들면서 새로운 아이디어 및 실전 스킬을 습득합니다.

[2] 코딩과 게임의 기초부터 응용까지 단계별로 습득
자바스크립트 기반의 p5.js 코딩의 핵심을 기초부터 객체지향 프로그래밍(OOP: Object-Oriented Programming)까지 게임 제작을 통해 자연스럽게 습득합니다. 각 게임별로 쉬운 단계에서 완성 단계까지 순차적으로 단계별(예: 1단계>>2단계>>...>>완성) 진행으로 완성합니다.

[3] 쉬운 코딩 환경, 간결한 코딩 문법
p5.js의 쉬운 코딩 환경과 간결한 문법을 통해 게임 제작을 보다 쉽고 간편있게 구현함으로써 코딩하는 재미가 있습니다. p5.js로 개발한 게임은 별도의 S/W 설치 없이 웹브라우저에서 바로 실행되고, 운영체제에 구애받지 않고 다양한 O/S 환경에서 실행할 수 있습니다.

[4] 실전 코딩이 우선, 이론은 따라오는 것
기존 대다수의 코딩 서적들이 따르는 방식인 이론 설명 후 코드를 소개하는 방식이 아니라, 우선 [질문]의 기본 예제를 실행해 보고, [설명]으로 코드의 의미를 확인한 후, 예제를 [수정]해 보며 코딩의 원리를 재확인할 수 있도록 설계하였습니다. 즉, [질문]→[설명]→[수정] 순으로 이야기를 풀어나가면서 필요한 팁은 [참고], 좀 더 깊은 이야기는 [심화]로 다루었습니다.

소스코드 다운로드: www.codingbooks.co.kr
관련 동영상: YouTube “코딩아티스트”

작가정보

저자(글) 김성일

자연언어(일본어, 중국어, 영어, 한국어)와 컴퓨터언어(C, C++, Java, JavaScript, Python, Processing, P5.js 등), 그리고 S/W와 H/W 연계 교육에 관심이 많습니다. 음성인식 관련 논문으로 박사 학위를 받았으며 현재 경남대학교 전자SW공학과에 재직 중입니다.