Tic Tac Toe dans Rust Webassembly-js tutoriel-php.cn

Tic Tac Toe in Rust Webassembly

Bonjour à tous, je vais vous montrer comment créer un jeu simple de Tic-Tac-Toe dans Rust avec Webassembly.

Vous devez d'abord installer Rust, vous pouvez le faire en visitant le site officiel (https://www.rust-lang.org/tools/install)

Ensuite, sous Windows, ouvrez un terminal ou Powershell et assurez-vous de l'exécuter en tant qu'administrateur et tapez la commande suivante pour créer les fichiers et dossiers nécessaires pour votre jeu Rust. Nouveau nom que vous souhaitez pour le dossier, puis accédez à l'emplacement de votre dossier. en utilisant l'explorateur de fichiers dans le dossier src qui sera créé, vous trouverez le fichier main.rs faites un clic droit et renommez-le en lib.rs

Pendant que vous y êtes, vous pouvez cliquer avec le bouton droit sur le fichier pour l'ouvrir dans un éditeur de votre choix, vous pouvez utiliser le bloc-notes qui peut être téléchargé depuis (https://notepad-plus-plus.org/downloads/) et ici est le code dont vous avez besoin pour le fichier 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]
        })
    }
}

Copier après la connexion

Après, assurez-vous de l'enregistrer, puis accédez à votre dossier principal et cette fois, faites un clic droit et modifiez le fichier Cargo.toml et collez ce code dedans juste à la fin du code [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

Copier après la connexion

Ensuite, enregistrez-le également et cette fois, nous devons revenir à notre terminal ou Powershell et accéder à votre dossier principal que vous avez créé avec la commande cargo au début et assurez-vous que vous êtes dans votre dossier principal en tapant cd puis votre nom du dossier, puis tapez cette commande pour créer les fichiers Web et les dossiers nécessaires :

wasm-pack build --target web

Après cette étape, vous remarquerez que Webassembly a créé plus de fichiers et de dossiers dans votre dossier principal nécessaires pour exécuter le code Rust sur le Web. À ce stade, depuis l'explorateur de fichiers, accédez à votre dossier principal puis créez un nouveau fichier en cliquant avec le bouton droit n'importe où. dans l'espace vide à l'intérieur du dossier principal que vous avez créé avec la nouvelle commande cargo et cliquez sur nouveau puis sur le document texte, renommez le nouveau fichier index.html et ouvrez-le dans l'éditeur de code dans ce cas, par exemple le bloc-notes, faites un clic droit dessus et choisissez modifier avec le bloc-notes puis collez ce code HTML dans ça :

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <titre>Tic Tac Toe</titre>
    <style>
        corps {
            famille de polices : « Arial », sans empattement ;
            affichage : flexible ;
            direction flexible : colonne ;
            aligner les éléments : centre ;
            justifier-contenu : centre ;
            hauteur min : 100vh ;
            marge : 0 ;
            arrière-plan : dégradé linéaire (en bas à droite, #6a11cb, #2575fc) ;
            couleur : blanc ;
        }

        h1 {
            taille de police : 2,5rem ;
            marge inférieure : 10 px ;
            texte-ombre : 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        #statut {
            taille de police : 1,25rem ;
            marge inférieure : 20 px ;
            remplissage : 10 px ;
            arrière-plan : rgba(0, 0, 0, 0,2) ;
            rayon de bordure : 8 px ;
        }

        #conseil {
            affichage : grille ;
            grille-modèle-colonnes : répéter (3, 100 px );
            écart : 10 px ;
        }

        .cellule {
            largeur : 100 px ;
            hauteur : 100px ;
            arrière-plan : rgba(255, 255, 255, 0,2) ;
            bordure : 2px rgba solide (255, 255, 255, 0,5) ;
            rayon de bordure : 10 px ;
            affichage : flexible ;
            aligner les éléments : centre ;
            justifier-contenu : centre ;
            taille de police : 2rem ;
            poids de la police : gras ;
            couleur : blanc ;
            box-shadow : 2px 2px 8px rgba(0, 0, 0, 0.3);
            transition : transformation 0,2 s, arrière-plan 0,3 s ;
            curseur : pointeur ;
        }

        .cellule.prise {
            curseur : non autorisé ;
            arrière-plan : rgba(255, 255, 255, 0,5) ;
            couleur : noir ;
        }

        .cell:hover:not(.taken) {
            transformation : échelle (1.1);
            arrière-plan : rgba(255, 255, 255, 0,4) ;
        }

        #réinitialiser {
            marge supérieure : 20 px ;
            remplissage : 10px 30px ;
            taille de police : 1,25rem ;
            poids de la police : gras ;
            couleur : #6a11cb ;
            fond : blanc ;
            bordure : aucune ;
            rayon de bordure : 5 px ;
            box-shadow : 2px 2px 5px rgba(0, 0, 0, 0.3);
            curseur : pointeur ;
            transition : arrière-plan 0,3 s, transformation 0,2 s ;
        }

        #reset : survoler {
            arrière-plan : #f0f0f0 ;
            transformer : échelle (1,05) ;
        }

        #reset:actif {
            transformation : échelle (0,95) ;
        }

        pied de page {
            marge supérieure : 20 px ;
            taille de police : 0,9rem ;
            opacité : 1,0 ;
        }
    </style>
&Lt;/tête>
<corps>
    <h1>Tic Tac Toe</h1>
    <div>



<p>Assurez-vous simplement que dans cette ligne de code import init, { TicTacToe }à partir de './pkg/tapez le nom du fichier javascript situé dans le dossier pkg à l'intérieur de votre dossier principal.js' ; à l'intérieur de votre dossier principal, la commande wasm a créé un dossier nommé "pkg", à l'intérieur, vous trouverez un fichier javascript se terminant par l'extension .js, assurez-vous simplement de taper le nom correctement dans cette ligne de code pour pointer vers lui, enregistrez-le et fermez le fichier .</p>

<p>Maintenant, votre jeu d'application Web est prêt à être lancé, juste une dernière chose dont nous avons besoin pour créer un serveur Web pour l'héberger. Dans ce cas, revenez simplement aux fenêtres du terminal ou à Powershell et accédez au chemin de votre dossier, assurez-vous que vous êtes à l'intérieur. le dossier à l'aide de la commande cd et lancez le serveur en tapant cette commande python -m http.server pour installer python, suivez ce lien (https://www.python.org/downloads/windows/).</p>

<p>Ouvrez maintenant une page de navigateur Web et saisissez le champ d'adresse <br>
http://localhost:8000/ ou http://127.0.0.1:8000 pour jouer au jeu.</p>

<p>J'espère que vous l'apprécierez et je m'excuse pour le long message.</p>

<p>Merci beaucoup. Profitez-en !.</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!