'클리커 게임(Clicker)' 토이 프로젝트

벌써 글 순서가 7번까지 왔습니다. 여기까지 따라오시느라 고생하셨습니다.

이번에는 단순히 이론을 공부하면서 코드를 따라치는 것을 넘어서 실제로 간단한 프로그램을 만들어보려고 합니다. 1장에서 설명드렸었던 홈페이지에서 구현하는 것도 방법이지만, 프로젝트를 진행하는 만큼 실제 개발자들이 많이 사용하는 프로그램 위에서 코드를 작성해봅시다. 이 글을 잘 따라오시면, 우리도 카페에 앉아서 개발자 티를 내는 것이 가능합니다.

이번 토이 프로젝트 주제는 클리커 게임(Clicker) 입니다. 여기에 필요한 이론은 이전 포스팅에서 설명했으니 목차를 보시고 생소하거나 잘 모르겠다는 주제가 있으면 한 번 검토하시고 계속해서 글을 읽어주시기 바랍니다.

이번 장에서 프로그래밍을 위해 설치할 프로그램은 VS Code(Visual Studio Code)라는 프로그램입니다. VS Code 공식 홈페이지에 들어가셔서 설치를 먼저 해주세요.

설치가 완료되었으면 본인이 원하는 위치에 clicker라는 폴더를 생성합니다. 그 다음에 VS Code를 실행한 뒤, 메뉴에서 File - Open을 클릭하면 파일 탐색창이 열립니다. 거기서 미리 만들어 놓은 cliker 폴더를 선택합니다. 그러면 VS Code가 cliker 폴더를 root 폴더, 즉 작업을 위한 가장 바깥 쪽에 위치한 범위로 인식합니다.

추가적으로 VS Code에서 HTML, CSS, JS를 이용한 결과물을 브라우저에서 확인하기 위해서는 플러그인을 설치해야 합니다.

위와 같은 화면에서 좌측에 여러 블록이 쌓여있는 아이콘을 클릭한 뒤, open in browser를 검색해서 install 버튼을 눌러 설치해줍니다. 그 뒤에, chrome으로 기본 설정을 위해 Ctrl + Shift + P(Window), Command⌘ + ⇧ + P를 입력하면 아래와 같은 입력 창이 나옵니다. 그 곳에 setting이라고 치면 여러개 선택지가 나오는데, 그 중에서 Preferences: Open User Settings를 선택합니다.

그러면 다음과 같은 화면이 나오는데, 거기에 open-in이라고 치고 사진과 동일하게 세팅합니다.

그러면 이제 프로젝트를 실행한 결과를 기본적으로 chrome에서 확인할 수 있게 됩니다. 실행 방법은

Windows: Alt + B
Mac: Option + B

입니다.

이번 토이프로젝트를 위해 우리에게 필요한 것은 3개의 파일입니다.

index.html
index.css
clicker.js

먼저 index.html은 우리의 화면에 문서를 출력하기 위한 파일입니다. 인터넷을 사용하면 글자나 이미지 등 여러 화면에 보이는 것들은 이 HTML 파일을 기본 바탕으로 구성됩니다. 두 번째 CSS 파일은 이 HTML문서를 꾸미는 역할을 합니다. 기왕 만드는 게임인데 단순히 검은 글자로 이루어진 텍스트만 나열되면 재미가 없으니까요! 마지막 세 번째 파일이 우리가 작업할 파일입니다. HTML과 CSS로 보이는 부분을 열심히 만들어도, 이 javascript 파일이 없으면 사용자의 입력에 대한 동작을 하지 않습니다.

우리는 지금 javascript 공부를 하고 있으니까, HTML과 CSS는 샘플로 제공하겠습니다. 디자인은 아주 간단하게 제가 직접 만들어 보았습니다. 예제니까 실제 게임같은 화면이 아니더라도 이해해주세요 :)

1. index.html 파일

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <script src="./cliker.js"></script>
    <title>My First Project, Cliker</title>
</head>

<body>
    <div class="container">
        <div class="clicker">
            <div class="row">
                <div class="col characterInfo">
                    <div class="subTitle">내 캐릭터</div>
                    <div class="subBox">
                        <div class="subCol">
                            <img src="https://user-images.githubusercontent.com/27988544/78903168-b86c5c80-7ab5-11ea-9f30-42a1b6583ae2.jpg"
                                id="swordIcon" class="icon" width="100" alt="swordIcon" />
                            <div id="power">0</div>
                        </div>
                        <div class="subCol">
                            <img src="https://user-images.githubusercontent.com/27988544/78900715-33337880-7ab2-11ea-9edf-fc3e7c8f4d6f.png"
                                id="moneyIcon" class="icon" width="100" alt="moneyIcon" />
                            <div id="money">0</div>
                        </div>
                    </div>
                </div>
                <div class="col upgradeBoard">
                    <div class="subTitle">upgrade board</div>
                    <div class="subBox">
                        <div class="subCol">
                            <div class="btn" id="powerUpgrade" onclick="upgrade(event)">공격력 강화</div>
                        </div>
                        <div class="subCol">
                            <div class="btn" id="moneyUpgrade" onclick="upgrade(event)">자본 증가</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

2. index.css 파일

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.clicker {
    width: 840px;
    height: 550px;
    border: 1px solid #444;
    font-weight: bold;
    font-size: 2.1rem;
}

.row {
    height: 100%;
}

.col {
    width: 50%;
    height: 100%;
    float: left;
}

.characterInfo {
    background-color: #444;
    color: white;
    text-align: center;
}

.subTitle {
    margin: 25px 0;
}

.icon {
    filter: invert(100%);
}

.subBox {
    height: 460px;
}

.upgradeBoard {
    text-align: center;
}

.subCol {
    display: grid;
    float: left;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

.btn {
    padding: 8px 15px;
    border-radius: 15px;
    border: 3px solid black;
    user-select: none;
}

.btn:hover {
    background-color: #444;
    color: white;
    cursor: pointer;
}

.btn:active {
    background-color: #333;
    border: 4px solid white;
    color: white;
    cursor: pointer;
}

3. cliker.js 파일

const addPower = () => {
    const power = document.querySelector("#power");
    power.innerHTML = Number(power.innerHTML) + 1;
}

const addMoney = () => {
    const money = document.querySelector("#money");
    money.innerHTML = Number(money.innerHTML) + 1;
}

const upgrade = (event) => {
    alert(event.target.id);
}

이렇게 세 개의 파일을 작성한 뒤에 실행시키면 결과는 다음과 같습니다.

위의 코드를 실행시켰을 때 alert 창을 보시면 버튼을 누를 때 마다 어떤 버튼이 눌러졌는지 출력되고 있습니다. index.html 파일을 보시면 아래 쪽에 '공격력 강화'와 '자본 증가' 글씨가 보이실 겁니다. 거기 옆에 보시면 onclick="upgrade(event)"라고 적혀 있는 코드를 보실 수 있습니다. 이 코드의 의미는 이 영역에 대해서 클릭이 일어났을 때 'upgrade'라는 함수를 호출하고, 그 파라미터로 event를 넘기겠다는 의미입니다. 그래서 cliker.js 안에 있는 upgrade 함수가 실행되는 것이죠.

이러한 동작 방식을 자바스크립트에서는 이벤트 핸들러라고 합니다. 사용자로부터 어떤 행위가 일어났을 경우, 그 분류에 따라 다양한 동작을 가능하게 만들어주는 기능이죠. 이에 대해서는 다른 글에서 다룰 예정이고, 이해가 안되더라도 그냥 '아 이 버튼을 누르면 upgrade 함수가 호출된다!'라는 것만 기억하시면 됩니다.

자, 여기까지 잘 따라오셨으면 이제 프로젝트 세팅이 완료된 것입니다. 여러분들이 하실 것은 cliker.js 안에 있는 upgrade 함수를 이용해서 사용자로부터 클릭이 들어왔을 때 왼쪽에 보이는 숫자가 증가되도록 하는 클리커 게임이 되도록 구현하는 것입니다.

우리가 구현해야할 내용을 정리하자면