TheCloud/v
1
0
Fork 0
mirror of https://github.com/vlang/v.git synced 2025-09-09 23:39:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Delyan Angelov 2023-08-13 16:59:35 +03:00
parent 59f831059c
commit ca0f589310
No known key found for this signature in database
GPG Key ID: 66886C0F12D595ED
4 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/tetris/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
tetris
tetris.wasm
main

34
examples/tetris/README.md
View File

@ -14,4 +14,36 @@ sudo apt install libgl-dev
v -b js_browser examples/tetris/tetris.js.v v -b js_browser examples/tetris/tetris.js.v
``` ```
And then open `index.html` with your favourite web browser. And then open `index.html` with your favourite web browser.
## 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/tetris/`
```
4. Copy the generated `tetris` file to `index.js`
This can be done once. Note that this step will be removed soon, when
the option `-os wasm32_emscripten` becomes better integrated:
```sh
cp examples/tetris/tetris examples/tetris/tetris.js
```
5. Run/test the game:
```sh
emrun examples/tetris/index.html
```
Once you have run the game, you can make changes,
then just recompile (step 3), and refresh the game in your browser.

15
examples/tetris/index.html
View File

@ -1,4 +1,17 @@
<!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 Tetris</title>
</head>
<body class="main"> <body class="main">
<canvas width="200" height="400" id="canvas" style="border: 1px solid black;"></canvas> <canvas width="200" height="400" id="canvas" style="border: 1px solid black;"></canvas>
<script src="tetris.js"></script> <script src="tetris.js"></script>
</body> <script>
const m = Module()
</script>
</body>
</head>

5
vlib/gg/gg.c.v
View File

@ -16,6 +16,8 @@ $if windows {
#include "windows.h" #include "windows.h"
} }
#flag wasm32_emscripten --embed-file @VEXEROOT/examples/assets/fonts/RobotoMono-Regular.ttf@/assets/fonts/RobotoMono-Regular.ttf
// call Windows API to get screen size // call Windows API to get screen size
fn C.GetSystemMetrics(int) int fn C.GetSystemMetrics(int) int
@ -58,6 +60,7 @@ pub:
create_window bool create_window bool
// window_user_ptr voidptr // window_user_ptr voidptr
window_title string window_title string
html5_canvas_name string = 'canvas'
borderless_window bool borderless_window bool
always_on_top bool always_on_top bool
bg_color gx.Color bg_color gx.Color
@ -465,7 +468,7 @@ pub fn new_context(cfg Config) &Context {
fail_userdata_cb: gg_fail_fn fail_userdata_cb: gg_fail_fn
cleanup_userdata_cb: gg_cleanup_fn cleanup_userdata_cb: gg_cleanup_fn
window_title: &char(cfg.window_title.str) window_title: &char(cfg.window_title.str)
html5_canvas_name: &char(cfg.window_title.str) html5_canvas_name: &char(cfg.html5_canvas_name.str)
width: cfg.width width: cfg.width
height: cfg.height height: cfg.height
sample_count: cfg.sample_count sample_count: cfg.sample_count