Wasm을 사용하여 Cpp에서 Tic Tac Toe 게임 만들기

안녕하세요 여러분, WebAssembly를 사용하여 Cpp에서 Tic tac toe 게임을 빌드하고 브라우저에서 실행할 또 다른 광적인 블로그에 오신 것을 환영합니다.

시작하겠습니다.

1. 엠스크립튼 설치

Enscrypten은 C/C++ 코드를 JavaScript로 직접 변환하므로 .wasm 파일을 읽기 위해 글루 코드를 작성할 필요조차 없습니다. 이것은 구현보다는 논리에만 집중할 수 있는 충분한 유연성을 제공합니다.
둘째, C++ 파일에 작성된 함수를 JS 파일에 호출하는 측면에서 매우 직관적입니다. 코드를 자세히 살펴보면 이것을 볼 수 있습니다.

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

2. tic tac toe에 대한 로직 작성

우리는 3×3 tic-tac-toe 게임을 만들 것입니다. 당사의 게임 로직에는 다음이 포함됩니다.

ㅏ. 어떤 플레이어가 이겼는지 계산하기
비. 승자가 없는 경우 계산
씨. 보류 중인 이동 표시

프로그램은 다음과 같습니다.

#include <emscripten/bind.h>
#include <emscripten/val.h>


using namespace emscripten;

val tic_tac_toe() {
    val board_values = val::global("BoardValues");
    val moves_pending_label = val::global("movesPendingLabel");
    val no_winner_label = val::global("noWinnerLabel");
    val empty_block = val::global("emptyBlock");
    bool moves_pending = false;

    val solutions[8][3]= {
        { board_values[0][0], board_values[0][1], board_values[0][2]},
        { board_values[1][0], board_values[1][1], board_values[1][2]},
        { board_values[2][0], board_values[2][1], board_values[2][2]},
        { board_values[0][0], board_values[1][0], board_values[2][0]},
        { board_values[0][1], board_values[1][1], board_values[2][1]},
        { board_values[0][2], board_values[1][2], board_values[2][2]},
        { board_values[0][0], board_values[1][1], board_values[2][2]},
        { board_values[0][2], board_values[1][1], board_values[2][0]},
    };

    for ( int i = 0; i < 8; i++ ){
        if((solutions[i][0] != empty_block) && (solutions[i][1] != empty_block) && (solutions[i][2] != empty_block)&& (solutions[i][0] == solutions[i][1]) && ( solutions[i][1] == solutions[i][2] )) {
            return solutions[i][1];
        } else if((solutions[i][0] == empty_block) || (solutions[i][1] == empty_block) || (solutions[i][2] == empty_block)){
            moves_pending = true;
        }
   }

   if (moves_pending) {
       return moves_pending_label;
   }

    return no_winner_label;


}

EMSCRIPTEN_BINDINGS(my_module) {
    function("tic_tac_toe", &tic_tac_toe);
}

3. C++ 파일을 .wasm 및 .js 파일로 변환하기 위한 빌드 명령

emcc --bind -o tic_tac_toe.js tic_tac_toe.cpp

이제 index.html, tic_tac_toe.js 및 tic_tac_toe.wasm 파일이 생성됩니다.



Emscripten 모듈 개체에서 사용할 수 있는 Embind에 의해 노출된 tic_tac_toe() C++ 함수를 기억하십시오.

그러나 tic_tac_toe()는 완전히 로드된 후에만 호출할 수 있습니다. 즉, 런타임(.js 글루 코드 및 .wasm 파일)이 초기화됩니다. 이를 위해 런타임이 준비되면 실행되는 onRuntimeInitialized 콜백을 사용합니다.

이제 플레이어가 셀을 클릭할 때마다 C++ 함수를 Module.tic_tac_toe()로 호출하여 적절한 결과를 반환합니다.

4. Live Server를 설치하여 변경 사항을 배포하고 확인합니다.

npm install -g live-server

5. 프로젝트 열기

python3 -m http.server 8080

브라우저로 이동하여 localhost:8080 또는 http://127.0.0.1:8080/을 입력합니다.

따라서 우리의 게임은 브라우저에서 플레이할 준비가 되었습니다. 두 명의 플레이어가 함께 플레이할 수 있습니다.



WebAssembly는 정말 놀랍고 이전에는 불가능했던 일을 가능하게 해주었습니다. 이 게임은 wasm과 함께 작업하는 첫 번째 단계가 될 수 있습니다.

이전에 만든 프로젝트를 확인하십시오.

참조:

https://emscripten.org/

https://github.com/arwalokhandwala/tictactoe-game-wasm

https://github.com/Canop/wasm-tictactoe

https://blog.logrocket.com/first-game-in-webassembly/

https://github.com/tapio/live-server#readme

블로그와 관련된 아이디어와 제안을 댓글로 남기고 유용하다고 생각되면 공유해 주세요.
의견 섹션에 질문을 작성하면 오류를 해결하는 데 도움이 됩니다.