大家好，我将向您展示如何使用 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 代码粘贴到它：
<html lang="zh-cn">
<头>
井字游戏
身体 {
字体系列：'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中文网其他相关文章！
