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]
        })
    }
}

</string></string></string></string>

确保保存后，然后导航到主文件夹，这次右键单击并编辑 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 id="井字棋">井字棋</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中文网其他相关文章！