Cet article est une expérience avec Rust avec sa compilation ultérieure dans WASM. Il était intéressant de ressentir ces technologies sur quelque chose de plus difficile que de calculer le factoriel, alors le choix s'est porté sur le jeu bien connu 2048 .
Description du jeu
Le jeu original est un champ carré de 4 par 4. Chaque carré peut être vide ou occupé par une tuile
d'une puissance de deux. L'état de départ du champ a 2 cellules remplies.
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
, .
:
- => .
/-------- , 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 - .
Il n'y avait pas de documentation sur l'utilisation du clavier et, en principe, les services ne sont en aucun cas documentés, vous devez lire les sources, regarder des exemples.
Animations
Commit: https://github.com/dev-family/wasm-2048/commit/e258748ab114ec5f930dbeb77d674bdbc5e63b1a .
Pour rendre l'interface plus vivante, vous devez ajouter des animations.
Ils sont implémentés en plus des transitions CSS régulières. Nous apprenons aux tuiles à se souvenir de leur position précédente, et lors du rendu, nous affichons la tuile immédiatement dans l'ancienne position, et au prochain tick - dans la nouvelle.