Rust Webassembly での三目並べ

皆さん、こんにちは。Webassembly を使用して Rust で簡単な三目並べゲームを作成する方法を説明します。

最初に Rust をインストールする必要があります。これは公式サイト (https://www.rust-lang.org/tools/install) にアクセスして行うことができます

次に、Windows でターミナルまたは Powershell を開き、必ず管理者として実行し、次のコマンドを入力して Rust ゲームに必要なファイルとフォルダーを作成します。新しいフォルダーに名前を付けた後、フォルダーの場所に移動します。作成される src フォルダー内でファイル エクスプローラーを使用すると、main.rs ファイルを見つけて右クリックし、名前を lib.rs

に変更します。

そこにいる間、ファイルを右クリックして、選択したエディターで開くことができます。(https://notepad-plus-plus.org/downloads/) およびここからダウンロードできるメモ帳を使用することもできます。 lib.rs ファイルに必要なコードです:

use wasm_bindgen::prelude::*;
use serde::Serialize;

#[wasm_bindgen]
pub struct TicTacToe {
    board: Vec<String>,
    current_player: String,
    game_over: bool,
    winner: Option<String>,
}

#[derive(Serialize)]
struct GameState {
    board: Vec<String>,
    current_player: String,
    game_over: bool,
    winner: Option<String>,
}

#[wasm_bindgen]
impl TicTacToe {
    #[wasm_bindgen(constructor)]
    pub fn new() -> TicTacToe {
        TicTacToe {
            board: vec!["".to_string(); 9],
            current_player: "X".to_string(),
            game_over: false,
            winner: None,
        }
    }

    /// Handles a player's turn and returns the updated game state as a JSON string.
    pub fn play_turn(&mut self, index: usize) -> String {
        if self.game_over || !self.board[index].is_empty() {
            return self.get_state();
        }

        self.board[index] = self.current_player.clone();
        if self.check_winner() {
            self.game_over = true;
            self.winner = Some(self.current_player.clone());
        } else if !self.board.contains(&"".to_string()) {
            self.game_over = true; // Draw
        } else {
            self.current_player = if self.current_player == "X" {
                "O".to_string()
            } else {
                "X".to_string()
            };
        }

        self.get_state()
    }

    /// Resets the game to its initial state and returns the game state as a JSON string.
    pub fn reset(&mut self) -> String {
        self.board = vec!["".to_string(); 9];
        self.current_player = "X".to_string();
        self.game_over = false;
        self.winner = None;
        self.get_state()
    }

    /// Returns the current game state as a JSON string.
    pub fn get_state(&self) -> String {
        let state = GameState {
            board: self.board.clone(),
            current_player: self.current_player.clone(),
            game_over: self.game_over,
            winner: self.winner.clone(),
        };
        serde_json::to_string(&state).unwrap()
    }

    fn check_winner(&self) -> bool {
        let win_patterns = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
            [0, 4, 8], [2, 4, 6],           // Diagonals
        ];
        win_patterns.iter().any(|&line| {
            let [a, b, c] = line;
            !self.board[a].is_empty()
                && self.board[a] == self.board[b]
                && self.board[b] == self.board[c]
        })
    }
}

必ず保存してメインフォルダーに移動し、今度は Cargo.toml ファイルを右クリックして編集し、このコードを [パッケージ] コードの最後に貼り付けます。

[dependencies]
wasm-bindgen = "0.2" # Enables Wasm interop
serde = { version = "1.0", features = ["derive"] } # For serialization/deserialization
serde_json = "1.0" # Optional, if you use JSON in your app

[lib]
crate-type = ["cdylib"] # Required for WebAssembly

[features]
default = ["wee_alloc"]

[profile.release]
opt-level = "z" # Optimize for size, which is ideal for WebAssembly.

[dependencies.wee_alloc]
version = "0.4.5" # Optional, for smaller Wasm binary size
optional = true

[dev-dependencies]
wasm-bindgen-test = "0.3" # Optional, for testing in Wasm

それから同様に保存します。今度はターミナルまたは Powershell に戻り、最初にカーゴ コマンドで作成したメイン フォルダーに移動し、cd と入力してメイン フォルダー内にいることを確認してから、フォルダー名を入力し、次のコマンドを入力して必要な Web ファイルとフォルダーを作成します:

wasm-pack build --target web

このステップの後、Webassembly が Web 上で Rust コードを実行するために必要な、メイン フォルダー内にさらに多くのファイルとフォルダーを作成したことがわかります。この時点で、ファイル エクスプローラーからメイン フォルダーに移動し、任意の場所を右クリックして新しいファイルを作成します。カーゴ新しいコマンドで作成したメインフォルダー内の空のスペースで、「新規」をクリックし、テキストドキュメントの名前を新しいファイルに変更します。index.html そして、コードエディターで開きます。この場合は、たとえばメモ帳で右クリックし、「メモ帳で編集」を選択します。このHTMLコードを貼り付けてくださいその中に:

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

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>三目並べ</title>
    
        体 {
            フォントファミリー: 'Arial'、サンセリフ;
            ディスプレイ: フレックス;
            フレックス方向: 列;
            整列項目: 中央;
            コンテンツの位置揃え: 中央;
            最小高さ: 100vh;
            マージン: 0;
            背景: 線形グラデーション(右下へ、#6a11cb、#2575fc);
            色: 白;
        }

        h1 {
            フォントサイズ: 2.5rem;
            マージン-ボトム: 10px;
            テキストシャドウ: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        ＃状態 {
            フォントサイズ: 1.25rem;
            マージン-ボトム: 20px;
            パディング: 10px;
            背景: rgba(0, 0, 0, 0.2);
            境界半径: 8px;
        }

        ＃ボード {
            表示: グリッド;
            グリッドテンプレート列:repeat(3, 100px);
            ギャップ: 10px;
        }

        .cell {
            幅: 100ピクセル;
            高さ: 100ピクセル;
            背景: rgba(255, 255, 255, 0.2);
            ボーダー: 2px ソリッド rgba(255, 255, 255, 0.5);
            境界半径: 10px;
            ディスプレイ: フレックス;
            整列項目: 中央;
            コンテンツの位置揃え: 中央;
            フォントサイズ: 2rem;
            フォントの太さ: 太字;
            色: 白;
            ボックスシャドウ: 2px 2px 8px rgba(0, 0, 0, 0.3);
            トランジション: トランスフォーム 0.2 秒、バックグラウンド 0.3 秒。
            カーソル: ポインタ;
        }

        .cell.taken {
            カーソル: 許可されていません。
            背景: rgba(255, 255, 255, 0.5);
            色: 黒;
        }

        .cell:hover:not(.taken) {
            変換: スケール(1.1);
            背景: rgba(255, 255, 255, 0.4);
        }

        #リセット {
            マージントップ: 20px;
            パディング: 10px 30px;
            フォントサイズ: 1.25rem;
            フォントの太さ: 太字;
            色: #6a11cb;
            背景: 白;
            境界線: なし。
            境界半径: 5px;
            ボックスシャドウ: 2px 2px 5px rgba(0, 0, 0, 0.3);
            カーソル: ポインタ;
            トランジション: バックグラウンド 0.3 秒、トランスフォーム 0.2 秒。
        }

        #リセット:ホバー {
            背景: #f0f0f0;
            変換: スケール(1.05);
        }

        #リセット:アクティブ {
            変換: スケール(0.95);
        }

        フッター {
            マージントップ: 20px;
            フォントサイズ: 0.9rem;
            不透明度: 1.0;
        }
    </スタイル>
</head>

    <h1>三目並べ</h1>
    <div>



<p>このコード行で、init、{ TicTacToe } をインポートしていることを確認してください。from './pkg/メインフォルダー内の pkg フォルダーにある JavaScript ファイルの名前を入力します。js';メインフォルダー内に wasm コマンドにより「pkg」という名前のフォルダーが作成され、その中に .js 拡張子で終わる JavaScript ファイルが見つかります。コード行にそのファイルを指す名前を正しく入力して、保存してファイルを閉じてください。 .</p>

<p>これで、Web アプリケーション ゲームを起動する準備が整いました。最後に、それをホストする Web サーバーを作成する必要があります。この場合は、ターミナル ウィンドウまたは Powershell に戻り、フォルダー パスに移動して、その中にいることを確認してください。 cd コマンドを使用してフォルダーに移動し、次のコマンドを入力してサーバーを起動します。 python -m http.server Python をインストールするには、このリンク (https://www.python.org/downloads/windows/) に従ってください。</p>

<p>Web ブラウザ ページを開いてアドレス フィールドに入力します <br>
ゲームをプレイするには http://localhost:8000/ または http://127.0.0.1:8000。</p>

<p>楽しんでいただければ幸いです。長文になってしまい申し訳ありません。</p>

<p>本当にありがとうございます。お楽しみください!</p>


          </div>

            
        

以上がRust Webassembly での三目並べの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。