Adding a way to start an example in the browser.

GaryBrownEEngr · Dec 13, 2023 · a59366f · a59366f
1 parent ce0c752
commit a59366f
Show file tree

Hide file tree

Showing 16 changed files with 654 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .vscode/*
+*.wasm
diff --git a/README.md b/README.md
@@ -19,7 +19,8 @@ The goals are many:
 
 ## Install
 
-Go 1.21 or later is required.<br>
+Go 1.21 or later is required.
+
 Ebitengine is the main dependency. [Check here for the system specific instructions](https://ebitengine.org/en/documents/install.html).
 
 ## Example
@@ -109,7 +110,7 @@ go run github.com/GaryBrownEEngr/scratch/examples/fallingturtles@latest
 
 Here is a simulation of a rotating box filled with circles, boxes, and rounded rectangles. This uses the library github.com/jakecoffman/cp for the physics simulation. The sprites are being drawn using Golang Scratch.
 
-This is a recreation of https://jakecoffman.com/cp-ebiten/tumble/ except without drawing the shapes using ebiten and cp directly. Here, cp is only performing the physics updates. The original code can be found [here](https://github.com/jakecoffman/cp-examples/blob/master/tumble/tumble.go)
+This is a recreation of <https://jakecoffman.com/cp-ebiten/tumble/> except without drawing the shapes using ebiten and cp directly. Here, cp is only performing the physics updates. The original code can be found [here](https://github.com/jakecoffman/cp-examples/blob/master/tumble/tumble.go)
 
 ```bash
 go run github.com/GaryBrownEEngr/scratch/examples/tumbler@latest
@@ -145,7 +146,7 @@ GOOS=js  GOARCH=wasm go build ./examples/fallingturtles/
 
 ## Things to Research
 
-* https://jakecoffman.com/cp-ebiten/
-* https://github.com/jakecoffman/cp
-* https://github.com/jakecoffman/cp-examples
-* https://github.com/jakecoffman/cp-ebiten
+- <https://jakecoffman.com/cp-ebiten/>
+- <https://github.com/jakecoffman/cp>
+- <https://github.com/jakecoffman/cp-examples>
+- <https://github.com/jakecoffman/cp-ebiten>
diff --git a/cmd/convertimages/RedBall.png b/cmd/convertimages/RedBall.png
diff --git a/cmd/convertimages/SilverBall.png b/cmd/convertimages/SilverBall.png
diff --git a/cmd/convertimages/arrow.png b/cmd/convertimages/arrow.png
diff --git a/cmd/convertimages/convertImages.go b/cmd/convertimages/convertImages.go
@@ -0,0 +1,23 @@
+package main
+
+import (
+	"encoding/base64"
+	"fmt"
+	"os"
+)
+
+func main() {
+	fileData, err := os.ReadFile("turtle.png")
+	if err != nil {
+		panic(err)
+	}
+	result := base64.StdEncoding.EncodeToString(fileData)
+	fmt.Printf("var turtleImage string = \"%s\"\n", result)
+
+	fileData, err = os.ReadFile("arrow.png")
+	if err != nil {
+		panic(err)
+	}
+	result = base64.StdEncoding.EncodeToString(fileData)
+	fmt.Printf("var arrowImage string = \"%s\"\n", result)
+}
diff --git a/cmd/convertimages/turtle.png b/cmd/convertimages/turtle.png
diff --git a/cmd/runinweb/README.md b/cmd/runinweb/README.md
@@ -0,0 +1,15 @@
+# Run Example In Browser
+
+## Info
+
+Based on info from: <https://ebitengine.org/en/documents/webassembly.html>
+
+## Run
+
+```bash
+. ./cmd/runinweb/build.sh ./examples/fallingturtles/
+```
+
+Then open: <http://localhost:3000/game.html>
+
+OR: <http://localhost:3000/main.html> for an iframe.
diff --git a/cmd/runinweb/build.sh b/cmd/runinweb/build.sh
@@ -0,0 +1,4 @@
+echo $1
+cp $(go env GOROOT)/misc/wasm/wasm_exec.js ./cmd/runinweb/
+env GOOS=js GOARCH=wasm go build -o ./cmd/runinweb/yourGame.wasm $1
+go run ./cmd/runinweb
diff --git a/cmd/runinweb/game.html b/cmd/runinweb/game.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<script src="wasm_exec.js"></script>
+<script>
+// Polyfill
+if (!WebAssembly.instantiateStreaming) {
+    WebAssembly.instantiateStreaming = async (resp, importObject) => {
+        const source = await (await resp).arrayBuffer();
+        return await WebAssembly.instantiate(source, importObject);
+    };
+}
+
+const go = new Go();
+WebAssembly.instantiateStreaming(fetch("yourGame.wasm"), go.importObject).then(result => {
+    go.run(result.instance);
+});
+</script>
diff --git a/cmd/runinweb/main.go b/cmd/runinweb/main.go
@@ -0,0 +1,15 @@
+package main
+
+import (
+	"fmt"
+	"log"
+	"net/http"
+)
+
+func main() {
+	http.Handle("/", http.FileServer(http.Dir("./cmd/runinweb")))
+	fmt.Println("Golang: Serving directory")
+	log.Fatal(http.ListenAndServe(":3000", nil))
+}
+
+// http://localhost:3000/
diff --git a/cmd/runinweb/main.html b/cmd/runinweb/main.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<div>Example Golang Scratch game running in the browser as WASM.</div>
+<iframe src="game.html" width="1000" height="1000" scrolling="no"></iframe>