Rust 웹어셈블리의 Tic Tac Toe

안녕하세요 여러분. 웹어셈블리를 사용하여 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]
        })
    }
}

</string></string></string></string>

저장한 후 기본 폴더로 이동한 다음 이번에는 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를 입력하고 기본 폴더 안에 있는지 확인해야 합니다. 폴더 이름을 입력한 후 다음 명령을 입력하여 필요한 웹 파일과 폴더를 생성하세요.

wasm-pack build --target web

이 단계 후에 웹 어셈블리가 웹에서 Rust 코드를 실행하는 데 필요한 기본 폴더 내에 더 많은 파일과 폴더를 생성한 것을 확인할 수 있습니다. 이 시점에서 파일 탐색기에서 기본 폴더로 이동한 다음 아무 곳이나 마우스 오른쪽 버튼으로 클릭하여 새 파일을 만듭니다. Cargo new 명령으로 생성한 기본 폴더 내부의 빈 공간에서 새로 만들기를 클릭한 다음 텍스트 문서를 클릭하고 새 파일 index.html의 이름을 바꾸고 이 경우 코드 편집기에서 엽니다(예: 메모장). 마우스 오른쪽 버튼을 클릭하고 메모장으로 편집을 선택합니다. 이 HTML 코드를 붙여넣으세요. 그것:

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Tic Tac Toe</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;
        }

        #판자 {
            디스플레이: 그리드;
            그리드-템플릿-열: 반복(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.2초, 배경 0.3초;
            커서: 포인터;
        }

        .cell.taken {
            커서: 허용되지 않음;
            배경: rgba(255, 255, 255, 0.5);
            색상: 검정색;
        }

        .cell:hover:not(.taken) {
            변환: scale(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초;
        }

        #reset:호버 {
            배경: #f0f0f0;
            변환: scale(1.05);
        }

        #reset:활성 {
            변환: 스케일(0.95);
        }

        바닥글 {
            여백 상단: 20px;
            글꼴 크기: 0.9rem;
            불투명도: 1.0;
        }
    스타일>
머리>

    <h1 id="틱택토">틱택토</h1>
    <div>



<p>이 코드 줄에서 import init, { TicTacToe }를 확인하세요.'./pkg/type에서 기본 폴더 내부의 pkg 폴더에 있는 자바스크립트 파일 이름을 입력하세요.js'; 기본 폴더 내에서 wasm 명령이 "pkg"라는 폴더를 생성했습니다. 그 안에 .js 확장자로 끝나는 javascript 파일이 있습니다. 해당 코드 줄에 이름을 올바르게 입력하여 이를 가리키고 저장하고 파일을 닫으세요. .</p>

<p>이제 웹 애플리케이션 게임을 시작할 준비가 되었습니다. 마지막으로 게임을 호스팅할 웹 서버를 생성해야 합니다. 이 경우 터미널 창이나 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 웹어셈블리의 Tic Tac Toe의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!