Clever Geek Handbook

2048WASMまたは2日でRustでプレイ

この記事は、Rustを使った実験であり、その後WASMでコンパイルされます。階乗を計算するよりも難しい何かでこれらの技術を感じるのは面白かったので、選択は有名なゲーム2048に落ちました。















ゲームの説明



元のゲームは4x 4の正方形のフィールドです。各正方形は空にすることも

、2の累乗のタイルで占めることもできます。フィールドの開始状態には、2つの塗りつぶされたセルがあります。















4 : , , ,

. . 90%

10%.







, , :















, , .







, , .







:















, .







: 2048.









Rust, .







Rust.

— Yew — , React', ,

.







:







cargo new --lib rust-2048 && cd rust-2048


, Cargo.toml :







[dependencies]
yew = "0.17"
wasm-bindgen = "0.2.67"


, src/lib.rs



:







use wasm_bindgen::prelude::*;
use yew::prelude::*;
struct Model {
    link: ComponentLink<Self>,
    value: i64,
}
enum Msg {
    AddOne,
}
impl Component for Model {
    type Message = Msg;
    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
            value: 0,
        }
    }
    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::AddOne => self.value += 1
        }
        true
    }
    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        // Should only return "true" if new properties are different to
        // previously received properties.
        // This component has no properties so we will always return "false".
        false
    }
    fn view(&self) -> Html {
        html! {
            <div>
                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}
#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}


:







mkdir static


index.html :







<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Yew Sample App</title>
    <script type="module">
      import init from "./wasm.js";
      init();
    </script>
  </head>
  <body></body>
</html>


wasm-pack ( cargo install wasm-pack



):







wasm-pack build --target web --out-name wasm --out-dir ./static


:







Error: crate-type must be cdylib to compile to wasm32-unknown-unknown. Add the following to your Cargo.toml file:
[lib]
crate-type = ["cdylib", "rlib"]


, . Cargo.toml :







[lib]
crate-type = ["cdylib", "rlib"]


( miniserve, ):







cd static
python -m SimpleHTTPServer


http://127.0.0.1:8000 . , .









: https://github.com/dev-family/wasm-2048/commit/6bc015fbc88c1633f4605944fd920b2780e261c1







.

.







:







2, 4, 0, 0
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


, . :







0, 0, 2, 4
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


, .

:







  1. => .


         /--------  , 
2, 4, 0, 0
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


2.







      /--------  , 
2, 4, 0, 0
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


3.







    /--------   
2, 4, 0, 0
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


4.







       /-------- 
2, 0, 4, 0
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


5.







         /--------   ,        
2, 0, 0, 4
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


6.







 /--------  
2, 0, 0, 4
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


7.







    /-------- 
0, 2, 0, 4
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


8.







       /--------      
0, 0, 2, 4
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0


, , — .







Direction#build_traversal



( ),

Grid#traverse_from



( ) Grid#move_in



— , .









: https://github.com/dev-family/wasm-2048/commit/7e08b5af6008e6f9d716d7c9a41b0810e869df9e







: ,

.. 4 , 2

. , ,

.







, TestCase, .. .









: https://github.com/dev-family/wasm-2048/commit/6082409412f6c19943c453c5d706d57bbcef538b







rand, WASM

wasm-bindgen



feature.







, ,

Grid



enable_new_tiles



.







(.. ),

traverse_from



. , , .







UI



: https://github.com/dev-family/wasm-2048/commit/356e0889a84d7fc2582662e76238f94fc69bfed7







UI , React / JSX. html!



Yew ,

. React - .







キーボードの操作に関するドキュメントはありませんでした。また、原則として、サービスはドキュメント化されていません。ソースを読み、例を見る必要があります。







アニメーション



コミット：https：//github.com/dev-family/wasm-2048/commit/e258748ab114ec5f930dbeb77d674bdbc5e63b1a。







インターフェイスをより生き生きと見せるために、アニメーションを追加する必要があります。







これらは、通常のCSS遷移の上に実装されます。以前の位置を記憶するようにタイルに教えます。レンダリングするときは、タイルをすぐに古い位置に表示し、次の目盛りで新しい位置に表示します。







More articles:


All Articles