GKaszewski/endless-runner-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add WebAssembly build support via Emscripten

Browse Source 
- Cargo.toml: gate `wayland` feature behind cfg(not(wasm32)) so the
  dependency resolves correctly for both native and web targets
- .cargo/config.toml: WASM linker flags (ASYNCIFY, GLFW, memory growth)
- build_web.sh: sets required EMCC_CFLAGS, builds, copies artefacts to web/;
  accepts --serve to start a local HTTP server
- web/index.html: minimal Emscripten shell with canvas and status line
- .gitignore: exclude generated web/*.js and web/*.wasm artefacts
- README: document web build prerequisites and usage

ASYNCIFY lets the native while-loop main loop run unchanged in the browser.
Build output: ~267 KB JS + ~458 KB WASM.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gabriel Kaszewski
2026-03-07 00:35:21 +01:00
parent a320ee537f
commit 951bd51f12
6 changed files with 101 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.cargo/config.toml Normal file
View File

@@ -0,0 +1,11 @@
[target.wasm32-unknown-emscripten]
rustflags = [
"-C", "link-arg=-sUSE_GLFW=3",
"-C", "link-arg=-sASYNCIFY",
"-C", "link-arg=-sASYNCIFY_STACK_SIZE=1048576",
"-C", "link-arg=-sGL_ENABLE_GET_PROC_ADDRESS=1",
"-C", "link-arg=-sWASM=1",
"-C", "link-arg=-sALLOW_MEMORY_GROWTH=1",
"-C", "link-arg=-sINITIAL_MEMORY=67108864",
"-C", "link-arg=-sFULL_ES3=1",
]

2
.gitignore vendored
View File

@@ -1 +1,3 @@
/target
web/*.js
web/*.wasm

6
Cargo.toml
View File

@@ -5,8 +5,14 @@ edition = "2024"
[dependencies]
rand = "0.10.0"
# wayland is a Linux display-server feature; excluded for WASM builds.
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
raylib = { version = "5.5.1", features = ["wayland"] }
[target.'cfg(target_arch = "wasm32")'.dependencies]
raylib = { version = "5.5.1" }
[profile.release]
opt-level = 3
lto = "thin"

11
README.md
View File

@@ -40,6 +40,17 @@ cargo run
cargo run --release
```
**Web (WebAssembly)**
Prerequisites: [Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html) activated in your shell.
```sh
./build_web.sh # produces web/*.js + web/*.wasm
./build_web.sh --serve # build then serve at http://localhost:8080
```
The web build uses ASYNCIFY so the main game loop requires no changes between native and browser targets.
**Tests**
```sh

24
build_web.sh Executable file
View File

@@ -0,0 +1,24 @@
#!/usr/bin/env bash
# Build the endless runner for WebAssembly via Emscripten.
# Usage: ./build_web.sh [--serve]
set -euo pipefail
# Flags required by raylib-sys for WASM compilation.
export EMCC_CFLAGS="-O3 -sUSE_GLFW=3 -sASSERTIONS=1 -sWASM=1 -sASYNCIFY -sGL_ENABLE_GET_PROC_ADDRESS=1"
echo "Building for wasm32-unknown-emscripten..."
cargo build --target wasm32-unknown-emscripten --release
OUT=target/wasm32-unknown-emscripten/release
echo "Copying build artefacts to web/..."
cp "$OUT/endless_runner.js" web/
cp "$OUT/endless_runner.wasm" web/
echo ""
echo "Build complete. Output in web/"
if [[ "${1-}" == "--serve" ]]; then
echo "Serving at http://localhost:8080"
python3 -m http.server 8080 --directory web
fi

47
web/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Endless Runner</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #16182e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: monospace;
color: #a0b8ff;
}
#canvas {
display: block;
border: 1px solid #3050a0;
}
#status {
margin-top: 12px;
font-size: 13px;
opacity: 0.6;
}
</style>
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<div id="status">Loading…</div>
<script>
var statusEl = document.getElementById('status');
var Module = {
canvas: document.getElementById('canvas'),
onRuntimeInitialized: function() {
statusEl.textContent = 'SPACE / W / ↑ to jump';
},
print: function(text) { console.log(text); },
printErr: function(text) { console.error(text); },
};
</script>
<script src="endless_runner.js"></script>
</body>
</html>