examples/2048: add instructions, on how to compile the game through Emscripten and v -os wasm32_emscripten

This commit is contained in:
Delyan Angelov 2023-08-13 11:11:58 +03:00
parent bfaa3debcd
commit dad93f8fab
No known key found for this signature in database
GPG key ID: 66886C0F12D595ED
3 changed files with 64 additions and 0 deletions

View file

@ -1,2 +1,4 @@
2048.wasm
2048 2048
main main

View file

@ -23,3 +23,29 @@ UP,LEFT,DOWN,RIGHT / W,A,S,D / touchscreen swipes - move the tiles
## Running instructions: ## Running instructions:
Compile & run the game with `./v run examples/2048` Compile & run the game with `./v run examples/2048`
## Compiling to WASM:
1. Install Emscripten from https://emscripten.org/docs/getting_started/downloads.html
2. Make sure that the environment in your shell is setup correctly, i.e. that `emcc --version` works.
```sh
. /opt/emsdk/emsdk_env.sh
emcc --version
```
3. Compile the game to WASM:
```sh
v -skip-unused -prod -os wasm32_emscripten examples/2048/`
```
4. Copy the 2048 file to `index.js` (can be done once; this step will be removed soon):
```sh
cp examples/2048/2048 examples/2048/index.js
```
5. Run/test the game:
```sh
emrun examples/2048/index.html
```
Once you have run the game, you can make changes, then just recompile (step 3), and refresh the game in your browser.

36
examples/2048/index.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<html lang="en-us">
<head>
<meta charset=utf-8>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v 2048</title>
<style>
body {
margin-left: 1rem;
background-color: rgb(250, 248, 239);
}
</style>
</head>
<body>
<h1>V 2048 demo</h1>
<h3>
Authors: <a href="http://github.com/spaceface777">@spaceface777</a>, <a href="http://github.com/spytheman">@spytheman</a> and other V contributors.
<br>
Original game by <a href="http://github.com/gabrielecirulli">@gabrielecirulli</a>.
</h3>
<h3>Click on the canvas to go into fullscreen mode</h3>
<canvas id=canvas oncontextmenu=event.preventDefault() tabindex=-1 width="544" height="560"></canvas>
<script src=index.js></script>
<script>
const m = Module()
const e = document.getElementById("canvas");
e.onclick = e.ontouchstart = () => {
e.requestFullscreen()
}
</script>
</body>
</html>