皆さん、こんにちは。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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
