이 책에서 만드는 마지막 게임은 두더지 잡기 게임이다. 두더지들이 실시간으로 무작위로 튀어나오고, 사용자는 정해진 시간 안에 두더지를 클릭해야 한다. 가끔 두더지 대신 폭탄이 튀어나오는데, 폭탄을 클릭하면 목숨이 하나 줄어든다. 목숨은 3개가 주어지고 목숨이 0개가 되면 게임이 끝난다. 60초 안에 얼마나 많은 두더지를 잡는지 경쟁하는 게임이다. 14.1 순서도 그리기 이벤트 리스너와 타이머 등의 비동기 코드가 많이 나오므로 순서를 정확히 지키도록 호출 스택과 이벤트 루프를 생각하며 코딩해야 한다. HTML 파일을 만들어 다음 코드를 작성한다. 0초 0점 시작 두더지 잡기도 언뜻 보면 3 X 3 표의 구조를 띄고 있다. table태그 대신해서 div태그를 사용했는데, table 태그는 원래 용도가 표를 ..
이번에는 2048 게임을 만들어본다. 게임은 4 × 4 표에서 진행된다. 매 턴마다 무작위 위치에 숫자 2가 생성된다. 사용자는 턴마다 한 번씩 표를 상하좌우 네 방향 중 한 방향으로 기울일 수 있는데, 기울인 방향으로 숫자들이 쏠려서 이동하게 된다. 이때 같은 두 숫자가 연이어 있으면 하나로 합쳐지면서 두 배의 숫자가 된다. 이렇게 표를 상하좌우로 기울이면서 숫자들을 합쳐서 2048을 만드는 게임이다. 컴퓨터 모니터를 상하좌우로 기울일 수는 없으니 마우스 드래그 방향이나 키보드의 화살표 키를 입력하는 것으로 대체한다. 13.1 순서도 그리기 2048 게임의 순서도를 먼저 그려 보자. 처음에 4 × 4 표를 그리고 무작위 위치에 숫자 2를 둔 상태로 시작한다. 마우스 또는 키보드 이벤트가 발생하면 어느 ..
마지막 세 개 장에서는 지금까지 배운 개념을 모두 활용해 지뢰 찾기 게임, 2048 게임, 두더지 잡기 게임을 만드는 시간을 가진다. 새로운 개념도 나온다. 하지만 지금까지 배운 개념을 확실히 익히지 않았다면 앞으로 게임을 만들 때 엄청나게 고생할 것이다. 또한, 앞으로는 코드를 그냥 따라서 작성하지 말고 직접 구현해 보면서 책에 나온 코드와 얼마나 일치하는지, 어떤 점이 다른지 비교해 보면 더욱 좋다. 이 장에서 만드는 게임은 지뢰 찾기이다. 표 모양의 칸을 만들고 폭탄을 무작위로 배치해야 한다. 그리고 칸을 클릭하면 주변에 있는 지뢰 개수를 표시하고, 주변 칸이 빈칸이면 한 번에 모든 칸을 여는 작업도 필요하다. 또한, 칸을 우클릭하면 물음표나 깃발도 표시되게 해 보자. 기능이 많아 코드가 길어질 텐..
이 장에서는 카드 짝 맞추기 게임을 만들며 비동기 코드를 더 깊게 들여보는 시간을 가진다. 짝 맞추기 게임은 다음과 같다. 12장의 카드가 있고, 두 장씩 서로 색이 같다. 모든 카드의 색을 보여 주며 잠깐 동안 카드 짝을 외울 수 있는 시간을 주고 나서, 카드를 다시 전부 뒤지은 뒤 짝을 맞추게 한다. 많은 카드를 실시간으로 뒤집어야 하는 만큼, 자바스크립트 코드가 돌아가는 순서를 정확하게 알아야 한다. 11.1 순서도 그리기 카드 짝 맞추기 게임의 순서도는 다음과 같다. 2장씩 카드를 뒤집어 2장의 카드 색이 같으면 완료 목록에 넣고, 다르면 다시 뒤집는다. 12장의 카드를 모두 맞추면 성공이다. 처음에 끝말잇기나 계산기, 숫자야구 게임을 만들 때는 철저하게 하나의 작업을 하나의 절차로 만들어서 나열..
이 장에서는 텍스트 RPG를 만들면서 클래스 문법을 배운다. 주인공과 몬스터, 보스, 레벨업도 하는 게임이다. 10.1 순서도 그리기 게임에는 크게 두 가지 모드가 있다. 모험, 휴식, 종료 중에서 선택하는 일반 모드와 모험을 떠나 적을 만나면 전투를 벌이는 전투 모드이다. 전투 모드에서는 적을 공격하거나 체력을 회복하거나 도망간다. 지금까지 만든 게임 중에 순서도가 가장 복잡하다. 일반 모드와 전투 모드, 두 가지 경우를 순서도로 만들었기 때문이다. 먼저 첫 화면을 만들어 사용자에게 주인공 이름을 입력받아 캐릭터를 만들어보자. 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 사용자가 주인공 이름을 입력하고 시작 버튼을 클릭하면 초기 화면을 일반 메뉴 화면으로 전환한다. 간단히 st..
이 장에서는 틱택토 게임을 만든다. 틱택토(tic-tac-toe) 게임은 오목의 축소판인 삼목이라고 보면 된다. 삼목은 바둑판이 아니라 3 x 3 표 위에서 진행한다. 표와 같은 삼목 데이터는 자바스크립트에서 이차원 배열로 표현한다. 틱택토를 만들면서 이차원 배열로 데이터를 관리하고, 배열 데이터를 HTML 하면에 그대로 표시하는 작업을 집중적으로 배워 보자. 9.1 순서도 그리기 바둑에 검은 돌과 흰 돌이 있듯이 틱택토에는 O와 X가 있다. 여기서는 혼자 번갈아 가며 O와 X를 넣는 방식으로 진행한다(컴퓨터와 게임을 하는 방법은 셀프체크에서 다룬다). 틱택토 게임의 순서도를 그려보자 9.2 이차원 배열 다루기_틱택토 왜 이차원 배열을 사용해야 하는지 틱택토의 형태를 보면 알 수 있다. 이와 같은 표를 ..
