Learning to use Rust Wasm/WebAssembly with Dodrio Virtual Dom on a simple memory game for kids.
version: 1.0 date: 2019-04-06 author: bestia.dev repository: GitHub
The images are funny cartoon characters from the alphabet.
The cards grid is only 4x4.
You can play it here ( hosted on google cloud platform ):
Last projects first:
Prepare the development environment (Windows)
In my previous projects are the instructions how to install a basic Rust environment.
For wasm workflow tool installation on Windows:
You will need also a simple static file server:
cargo install basic-http-server
Absolutely everything manually coded is in Rust language in the file
The index.html file is a standard scaffold.
The pkg/mem.js file is generated by wasm-bindgen.
I prepared a small simple mem1.css with flex objects for styling.
No need for npm or web-pack.
The compiled files for the GitHub page are here
(the game needs only a simple static file server):
You already know how to clone a GitHub repository:
(in the rustprojects/ folder execute)
Run in mem1/ folder
wasm-pack build --target no-modules
The warning for rand::Rng::shuffle will be solved in my second project. Ignore it.
Run the html server in mem1/ folder in a second terminal. So it can continuously run while you incrementally build your changes in the first terminal.
Open the default URI in your browser
The web application can easily be converted into a cross-platform quasi native application with Electron for Desktops and PhoneGap for Mobile.
The electron desktop application (Windows, MacOS, Linux) is here:
The PhoneGap app (Android, iOS, WindowsPhone) is here:
Memory game rules
For the sake of simplicity, the first iteration is made as single player mode.
The game starts with a grid of 8 randomly shuffled card pairs face down - 16 cards in all.
The player flips over two cards with two clicks.
If the cards do not match, the player starts a new turn with a click to turn both cards back face down. Then two clicks to flip over two cards.
If the cards match, they are left face up and the player continues with the next turn. No additional third click needed in that case.
The Count of clicks can be used as score. The lower the Count, the better score it is.
The next iteration of this project is here:
cargo crev reviews and advisory
It is recommended to always use cargo-crev
to verify the trustworthiness of each of your dependencies.
Please, spread this info.
On the web use this url to read crate reviews. Example:
Clarified the "rand" problem and solution for wasm-bindgen:
In this book I didn't find a clear explanation for rand and wasm:
Images included free cartoon characters: