Создание игры Tic Tac Toe на Cpp с использованием Wasm

Привет, друзья, добро пожаловать в очередной фанатский блог, в котором мы создадим игру Tic tac toe на Cpp с использованием WebAssembly и запустим ее в браузере.

Итак, давайте приступим.

1. Установите Emscripten

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. Напишите логику для игры в крестики-нолики

Мы будем создавать игру «Крестики-нолики» 3×3. Логика нашей игры включает в себя:

a. Вычисление того, кто из игроков выиграл
b. Вычисление, если победителя нет
c. Индикация ожидающих ходов

Вот программа:

#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. Команда Build для преобразования файлов C++ в файлы .wasm & .js

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

Теперь файл index.html, tic_tac_toe.js & tic_tac_toe.wasm будет сгенерирован.

Вспомните нашу функцию tic_tac_toe() C++, которая была открыта Embind, теперь она доступна на объекте модуля Emscripten.

Однако мы можем вызвать нашу функцию 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.

Посмотрите наши ранее созданные проекты:

1. Конвертер видео в gif с использованием Wasm
2. Приложение для распознавания изображений с использованием GoLang | Tensorflow | WasmEdge | Dapr | Docker

Ссылки:

1. https://emscripten.org/
2. https://github.com/arwalokhandwala/tictactoe-game-wasm
3. https://github.com/Canop/wasm-tictactoe
4. https://dev.to/dystroy/an-exploration-or-rust-wasm50gpgame-blazor-webassembly
5. https://blog.logrocket.com/first-game-in-webassembly/
6. https://github.com/tapio/live-server#readme

Оставляйте свои идеи и предложения, связанные с этим блогом, и делитесь, если вы нашли его полезным.
Пишите свои вопросы в разделе комментариев, мы поможем вам решить ваши ошибки.