Rust WebAssembly 中的 Tic Tac Toe

大家好，我將向您展示如何使用 Webassemble 在 Rust 中創建一個簡單的 Tic-Tac-Toe 遊戲。

首先您需要安裝 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 文件，並將此程式碼貼到 [package] 程式碼末尾：

[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 並轉到您在開始時使用Cargo 命令創建的主資料夾，並透過輸入cd 然後輸入您的命令來確保您位於主文件夾中資料夾名稱，然後鍵入此命令來建立所需的Web 檔案和資料夾：

wasm-pack build --target web

在這一步驟之後，您會注意到WebAssembly 在您的主資料夾中建立了更多在Web 上執行Rust 程式碼所需的檔案和資料夾，此時從檔案總管轉到您的主資料夾，然後透過右鍵單擊任意位置建立新檔案在使用Cargo new命令建立的主資料夾內的空白處，按一下“新建”，然後按一下“文字文件”，將新檔案重新命名為“index.html”，並在程式碼編輯器中開啟它（在本例中為記事本），只需右鍵單擊它並選擇“使用記事本編輯”，然後將此HTML 程式碼貼到它：

    
    
    井字遊戲
    
        身體 {
            字體系列：'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；
        }

        ＃木板 {
            顯示：網格；
            網格模板列：重複（3、100px）；
            間隙：10px；
        }

        。細胞 {
            寬度：100px；
            高度：100px；
            背景：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.2s，背景0.3s；
            遊標：指針；
        }

        .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.3s，變換0.2s；
        }

        #重置：懸停{
            背景：#f0f0f0；
            變換：縮放（1.05）；
        }

        #重置：活動{
            變換：縮放（0.95）；
        }

        頁尾 {
            上邊距：20px；
            字體大小：0.9rem；
            不透明度：1.0；
        }
    風格>
頭>

    <h1>井字棋</h1>
    <div>



<p>只需確保在這行程式碼中導入 init, { TicTacToe }from './pkg/type the name of javascript file located in pkg folder inside your mainfolder.js';在你的主資料夾中，wasm 指令建立了一個名為「pkg」的資料夾，你會發現一個以.js 副檔名結尾的javascript 文件，只需確保在該行程式碼中正確輸入名稱以指向它，儲存並關閉檔案.</p>

<p>現在您的Web 應用程式遊戲已準備好啟動，我們需要建立一個Web 伺服器來託管它的最後一件事，在這種情況下，只需返回終端視窗或Powershell 並導航到您的資料夾路徑，確保您位於其中使用cd 命令進入資料夾並通過鍵入此命令python -m http.server 啟動伺服器來安裝python，請遵循此鏈接(https://www.python.org/downloads/windows/)。 </p>

<p>現在打開網頁瀏覽器頁面並在位址欄位中輸入<br>
http://localhost:8000/ 或 http://127.0.0.1:8000 玩遊戲。 </p>

<p>希望您喜歡它，並對這麼長的帖子表示歉意。 </p>

<p>非常感謝。享受吧！ .</p>


          </div>

            
        

以上是Rust WebAssembly 中的 Tic Tac Toe的詳細內容。更多資訊請關注PHP中文網其他相關文章！