Tic Tac Toe dalam Rust Webassembly-tutorial js-php.cn

Tic Tac Toe in Rust Webassembly

Helo semua, saya akan menunjukkan kepada anda cara mencipta permainan Tic-Tac-Toe yang mudah dalam Rust dengan Webassembly.

Mula-mula anda perlu memasang Rust anda boleh melakukannya dengan melawati tapak rasmi (https://www.rust-lang.org/tools/install)

Kemudian dalam Windows buka terminal atau Powershell dan pastikan anda menjalankannya sebagai pentadbir dan taip arahan berikut untuk mencipta fail dan folder yang diperlukan untuk kargo permainan Rust anda baharu nama yang anda inginkan untuk folder itu selepas itu navigasi ke lokasi folder anda menggunakan fail explorer di dalam folder src yang akan dibuat, anda akan menemui fail main.rs klik kanan dan namakan semula kepada lib.rs

Semasa anda berada di sana, anda boleh mengklik kanan fail untuk membukanya dalam editor pilihan anda, anda boleh menggunakan notepad yang boleh dimuat turun dari (https://notepad-plus-plus.org/downloads/) dan di sini ialah kod yang anda perlukan untuk fail 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]
        })
    }
}

Salin selepas log masuk

Selepas pastikan anda menyimpannya dan kemudian navigasi ke folder utama anda dan kali ini klik kanan dan edit fail Cargo.toml dan tampal kod ini di dalamnya betul-betul di hujung kod [pakej]:

[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

Salin selepas log masuk

Kemudian simpannya juga dan kali ini kita perlu kembali ke terminal atau Powershell kami dan pergi ke folder utama anda yang anda buat dengan arahan kargo pada mulanya dan pastikan anda berada di dalam folder utama anda dengan menaip cd kemudian anda nama folder kemudian taip arahan ini untuk mencipta fail web dan folder yang diperlukan:

pembinaan wasm-pack --sasarkan web

Selepas langkah itu, anda akan dapati bahawa Webassembly telah mencipta lebih banyak fail dan folder di dalam folder utama anda yang diperlukan untuk menjalankan kod Rust di web, pada ketika ini dari peneroka fail pergi ke folder utama anda kemudian buat fail baharu dengan klik kanan di mana-mana sahaja di ruang kosong di dalam folder utama yang anda buat dengan arahan baru kargo dan klik baru kemudian dokumen teks namakan semula fail baru index.html dan buka dalam editor kod dalam kes ini contohnya notepad hanya klik kanan dan pilih edit dengan notepad kemudian tampal kod HTML ini di dalamnya:

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <gaya>
        badan {
            font-family: 'Arial', sans-serif;
            paparan: flex;
            flex-direction: lajur;
            align-item: tengah;
            justify-content: pusat;
            ketinggian min: 100vj;
            margin: 0;
            latar belakang: kecerunan linear(ke kanan bawah, #6a11cb, #2575fc);
            warna: putih;
        }

        h1 {
            saiz fon: 2.5rem;
            margin-bawah: 10px;
            bayang teks: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        #status {
            saiz fon: 1.25rem;
            jidar bawah: 20px;
            padding: 10px;
            latar belakang: rgba(0, 0, 0, 0.2);
            jejari sempadan: 8px;
        }

        #board {
            paparan: grid;
            grid-template-columns: repeat(3, 100px);
            jurang: 10px;
        }

        .sel {
            lebar: 100px;
            ketinggian: 100px;
            latar belakang: rgba(255, 255, 255, 0.2);
            sempadan: 2px rgba pepejal(255, 255, 255, 0.5);
            jejari sempadan: 10px;
            paparan: flex;
            align-item: tengah;
            justify-content: pusat;
            saiz fon: 2rem;
            font-weight: tebal;
            warna: putih;
            bayang-kotak: 2px 2px 8px rgba(0, 0, 0, 0.3);
            peralihan: mengubah 0.2s, latar belakang 0.3s;
            kursor: penunjuk;
        }

        .cell.taken {
            kursor: tidak dibenarkan;
            latar belakang: rgba(255, 255, 255, 0.5);
            warna: hitam;
        }

        .cell:hover:not(.taken) {
            transform: skala(1.1);
            latar belakang: rgba(255, 255, 255, 0.4);
        }

        #reset {
            jidar atas: 20px;
            padding: 10px 30px;
            saiz fon: 1.25rem;
            font-weight: tebal;
            warna: #6a11cb;
            latar belakang: putih;
            sempadan: tiada;
            jejari sempadan: 5px;
            bayang-kotak: 2px 2px 5px rgba(0, 0, 0, 0.3);
            kursor: penunjuk;
            peralihan: latar belakang 0.3s, mengubah 0.2s;
        }

        #reset:hover {
            latar belakang: #f0f0f0;
            transform: skala (1.05);
        }

        #reset:active {
            transform: skala (0.95);
        }

        pengaki {
            jidar atas: 20px;
            saiz fon: 0.9rem;
            kelegapan: 1.0;
        }
    </style>
</head>
<badan>
    <h1>Tic Tac Toe</h1>
    <div>



<p>Pastikan sahaja dalam baris kod import init ini, { TicTacToe }daripada './pkg/taip nama fail javascript yang terletak dalam folder pkg di dalam folder utama anda.js'; di dalam folder utama anda perintah wasm mencipta folder bernama "pkg" di dalamnya anda akan menemui fail javascript berakhir dengan sambungan .js cuma pastikan anda menaip nama dengan betul dalam baris kod itu untuk menunjuk kepadanya, simpan dan tutup fail .</p>

<p>Kini permainan aplikasi web anda sedia untuk dilancarkan, hanya satu perkara terakhir yang kami perlukan untuk mencipta pelayan web untuk mengehoskannya dalam kes ini hanya kembali ke tetingkap terminal atau Powershell dan navigasi ke laluan folder anda pastikan anda berada di dalam folder menggunakan arahan cd dan mulakan pelayan dengan menaip arahan ini python -m http.server untuk memasang python ikut pautan ini (https://www.python.org/downloads/windows/).</p>

<p>Sekarang buka halaman pelayar web dan taip dalam medan alamat <br>
http://localhost:8000/ atau http://127.0.0.1:8000 untuk bermain permainan.</p>

<p>Saya harap anda menikmatinya dan memohon maaf atas catatan yang panjang.</p>

<p>Terima kasih banyak-banyak. Selamat mencuba!.</p>

Salin selepas log masuk

Atas ialah kandungan terperinci Tic Tac Toe dalam Rust Webassembly. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!