examples/2048: add instructions, on how to compile the game through E…

…mscripten and `v -os wasm32_emscripten`
vlang · Aug 13, 2023 · dad93f8 · dad93f8
1 parent bfaa3de
commit dad93f8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/examples/2048/.gitignore b/examples/2048/.gitignore
@@ -1,2 +1,4 @@
+2048.wasm
 2048
 main
+
diff --git a/examples/2048/README.md b/examples/2048/README.md
@@ -23,3 +23,29 @@ UP,LEFT,DOWN,RIGHT / W,A,S,D / touchscreen swipes - move the tiles
 ## Running instructions:
 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.
diff --git a/examples/2048/index.html b/examples/2048/index.html
@@ -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>