Tic Tac Toe in Rust Webassembly-js-Tutorial-php.cn

Tic Tac Toe in Rust Webassembly

Hallo zusammen, ich zeige euch, wie man mit Webassembly ein einfaches Tic-Tac-Toe-Spiel in Rust erstellt.

Zuerst müssen Sie Rust installieren. Besuchen Sie dazu die offizielle Website (https://www.rust-lang.org/tools/install)

Öffnen Sie dann in Windows ein Terminal oder Powershell und stellen Sie sicher, dass Sie es als Administrator ausführen und geben Sie den folgenden Befehl ein, um die benötigten Dateien und Ordner für Ihre Rust-Spielladung zu erstellen. Geben Sie dem Ordner nun einen neuen Namen und navigieren Sie dann zu Ihrem Ordnerspeicherort Wenn Sie den Datei-Explorer im src-Ordner verwenden, der erstellt wird, finden Sie die Datei „main.rs“, indem Sie mit der rechten Maustaste darauf klicken und sie in „lib.rs“ umbenennen

Während Sie dort sind, können Sie mit der rechten Maustaste auf die Datei klicken, um sie in einem Editor Ihrer Wahl zu öffnen. Sie können den Editor verwenden, der von (https://notepad-plus-plus.org/downloads/) und hier heruntergeladen werden kann ist der Code, den Sie für die lib.rs-Datei benötigen:

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

Nach dem Login kopieren

Stellen Sie anschließend sicher, dass Sie es speichern und dann zu Ihrem Hauptordner navigieren. Klicken Sie dieses Mal mit der rechten Maustaste, bearbeiten Sie die Datei Cargo.toml und fügen Sie diesen Code direkt am Ende des [Paket]-Codes ein:

[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

Nach dem Login kopieren

Dann speichern Sie es ebenfalls und dieses Mal müssen wir zu unserem Terminal oder Powershell zurückkehren und zu Ihrem Hauptordner gehen, den Sie zu Beginn mit dem Befehl „cargo“ erstellt haben, und sicherstellen, dass Sie sich in Ihrem Hauptordner befinden, indem Sie „cd“ und dann „Ihr“ eingeben Geben Sie den Ordnernamen ein und geben Sie dann diesen Befehl ein, um die benötigten Webdateien und Ordner zu erstellen:

wasm-pack build --target web

Nach diesem Schritt werden Sie feststellen, dass Webassembly weitere Dateien und Ordner in Ihrem Hauptordner erstellt hat, die zum Ausführen von Rust-Code im Web erforderlich sind. Gehen Sie an dieser Stelle vom Datei-Explorer zu Ihrem Hauptordner und erstellen Sie eine neue Datei, indem Sie irgendwo mit der rechten Maustaste klicken Klicken Sie an der leeren Stelle im Hauptordner, den Sie mit dem Befehl „cargo new“ erstellt haben, auf „Neu“ und dann auf „Textdokument“. Benennen Sie die neue Datei „index.html“ um und öffnen Sie sie im Code-Editor, in diesem Fall zum Beispiel im Editor. Klicken Sie einfach mit der rechten Maustaste darauf und wählen Sie „Mit Editor bearbeiten“ aus Fügen Sie diesen HTML-Code ein es:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <Stil>
        Körper {
            Schriftfamilie: „Arial“, serifenlos;
            Anzeige: Flex;
            Flexrichtung: Spalte;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Mindesthöhe: 100 Vh;
            Rand: 0;
            Hintergrund: linearer Farbverlauf (nach rechts unten, #6a11cb, #2575fc);
            Farbe: weiß;
        }

        h1 {
            Schriftgröße: 2,5rem;
            Rand unten: 10px;
            Textschatten: 2px 2px 5px rgba(0, 0, 0, 0,3);
        }

        #status {
            Schriftgröße: 1,25rem;
            Rand unten: 20px;
            Polsterung: 10px;
            Hintergrund: rgba(0, 0, 0, 0,2);
            Randradius: 8px;
        }

        #Planke {
            Anzeige: Raster;
            Rastervorlagenspalten: wiederholen(3, 100px);
            Lücke: 10px;
        }

        .cell {
            Breite: 100px;
            Höhe: 100px;
            Hintergrund: rgba(255, 255, 255, 0,2);
            Rand: 2px solid rgba(255, 255, 255, 0,5);
            Randradius: 10px;
            Anzeige: Flex;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Schriftgröße: 2rem;
            Schriftstärke: fett;
            Farbe: weiß;
            Box-Shadow: 2px 2px 8px rgba(0, 0, 0, 0,3);
            Übergang: Transformation 0,2 s, Hintergrund 0,3 s;
            Cursor: Zeiger;
        }

        .cell.taken {
            Cursor: nicht erlaubt;
            Hintergrund: rgba(255, 255, 255, 0,5);
            Farbe: Schwarz;
        }

        .cell:hover:not(.taken) {
            transformieren: Skala(1.1);
            Hintergrund: rgba(255, 255, 255, 0,4);
        }

        #zurücksetzen {
            Rand oben: 20px;
            Polsterung: 10px 30px;
            Schriftgröße: 1,25rem;
            Schriftstärke: fett;
            Farbe: #6a11cb;
            Hintergrund: weiß;
            Grenze: keine;
            Randradius: 5px;
            Box-Shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
            Cursor: Zeiger;
            Übergang: Hintergrund 0,3 s, Transformation 0,2 s;
        }

        #reset:hover {
            Hintergrund: #f0f0f0;
            transformieren: Skala(1.05);
        }

        #reset:aktiv {
            transform: Skala(0,95);
        }

        Fußzeile {
            Rand oben: 20px;
            Schriftgröße: 0,9rem;
            Deckkraft: 1,0;
        }
    </style>
</head>
<Körper>
    <h1>Tic Tac Toe</h1>
    <div>



<p>Stellen Sie einfach sicher, dass in dieser Codezeile init, { TicTacToe } importiert wird.von './pkg/geben Sie den Namen der Javascript-Datei ein, die sich im pkg-Ordner in Ihrem Hauptordner.js befindet'; In Ihrem Hauptordner hat der WASM-Befehl einen Ordner mit dem Namen „pkg“ erstellt. Darin finden Sie eine Javascript-Datei mit der Endung .js. Stellen Sie einfach sicher, dass Sie den Namen korrekt in diese Codezeile eingeben, um darauf zu verweisen, speichern Sie ihn und schließen Sie die Datei .</p>

<p>Jetzt ist Ihr Webanwendungsspiel startbereit. Als letztes müssen wir noch einen Webserver erstellen, um es zu hosten. Gehen Sie in diesem Fall einfach zurück zu Terminal Windows oder Powershell und navigieren Sie zu Ihrem Ordnerpfad. Stellen Sie sicher, dass Sie sich darin befinden Öffnen Sie den Ordner mit dem Befehl cd und starten Sie den Server, indem Sie diesen Befehl eingeben. python -m http.server Um Python zu installieren, folgen Sie diesem Link (https://www.python.org/downloads/windows/).</p>

<p>Öffnen Sie nun eine Webbrowser-Seite und geben Sie das Adressfeld ein <br>
http://localhost:8000/ oder http://127.0.0.1:8000, um das Spiel zu spielen.</p>

<p>Ich hoffe, es gefällt euch und entschuldige mich für den langen Beitrag.</p>

<p>Vielen Dank. Viel Spaß!.</p>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTic Tac Toe in Rust Webassembly. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!