Giving back control of the game rendering loop to the WebAssembly module

assembly/Game.ts

@@ -6,6 +6,7 @@ import { Thing, Direction, Flag, Water } from './Thing';
 import { Monster, Fly } from './Monster';
 
 const JOURNEY_LENGTH = 150; // length of journey base
+const FPS = 8;
 
 export enum Controls {
     Up = 1,
@@ -23,6 +24,7 @@ export class Game {
     private flag: Flag;
     private score: Score;
 
+    private lastUpdate: i64;
     private level: i32 = 1;
 
     private canvas: Canvas;
@@ -32,6 +34,7 @@ export class Game {
         this.scene = new Scene(canvas);
         this.player = new Player(canvas);
         this.score = new Score(canvas, canvas.width - 3, canvas.height - 3);
+        this.lastUpdate = Date.now();
 
         this.things = [];
         this.obstacles = [];
@@ -50,6 +53,9 @@ export class Game {
     }
 
     update(control: Controls): void {
+        if (!this.readyToUpdate()) {
+            return;
+        }
         if (!this.player.isAlive()) {
             this.canvas.turnToGray();
             return;
@@ -176,4 +182,13 @@ export class Game {
         }
         return false;
     }
+
+    private readyToUpdate(): boolean {
+        const now = Date.now();
+        if (now > this.lastUpdate + 1000 / FPS) {
+            this.lastUpdate = now;
+            return true;
+        }
+        return false;
+    }
 }

package.json

@@ -11,10 +11,10 @@
   "author": "Tomas Tulka (ttulka)",
   "license": "MIT",
   "dependencies": {
-    "@assemblyscript/loader": "^0.19.4"
+    "@assemblyscript/loader": "^0.19.7"
   },
   "devDependencies": {
-    "assemblyscript": "^0.19.4",
+    "assemblyscript": "^0.19.7",
     "get-image-data": "^5.0.0",
     "local-web-server": "^4.2.1"
   }

src/index.js

@@ -1,4 +1,4 @@
-const WIDTH = 100, HEIGHT = 100;
+const WIDTH = 100, HEIGHT = 100, SIZE = WIDTH * HEIGHT;
 
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
@@ -30,15 +30,22 @@ document.addEventListener('keydown', event => {
     case "ArrowDown":
       control = Controls.Down;
       break;
-}
+    default:
+      control = Controls.None;
+      break;
+  }
+});
+document.addEventListener('keyup', event => {
+  control = Controls.None;
 });
 
 async function loadWasm() {
   const wasm = await WebAssembly
     .instantiateStreaming(fetch('../build/optimized.wasm'), {
+      Date,
       env: {
         abort: (_msg, _file, line, column) => console.error(`Abort at ${line}:${column}`),
-        seed: () => new Date().getTime()
+        seed: Date.now
       }});
     return wasm.instance.exports;
 }
@@ -48,26 +55,21 @@ async function start() {
   wasm.start();
   console.log(wasm)
 
-  const imageData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
-
-  const updateCall = () => update(wasm, imageData);  
-  setInterval(updateCall, 150);
-}
-
-function update(wasm, imageData) {
-    //console.log('update', new Date());
-    wasm.update(wasm[control]);
+  const mem = new Uint32Array(wasm.memory.buffer);  // 32bit => 8bit color * 4 (RGBA)
+
+  const imageData = ctx.createImageData(WIDTH, HEIGHT);
+  const argb = new Uint32Array(imageData.data.buffer);
 
-    writeImageData(imageData, wasm.memory.buffer);
-
-    control = Controls.None;
+  const updateCall = () => { 
+    update(wasm, mem, imageData, argb);  
+    window.requestAnimationFrame(updateCall);
+  }
+  window.requestAnimationFrame(updateCall);
 }
 
-function writeImageData(imageData, buffer) {
-  const bytes = new Uint8ClampedArray(buffer);
+function update(wasm, mem, imageData, argb) {
+  wasm.update(wasm[control]);    
 
-  for (let i = 0; i < WIDTH * HEIGHT * 4; i++) 
-     imageData.data[i] = bytes[i];
-
-  ctx.putImageData(imageData, 0, 0);
+  argb.set(mem.subarray(0, SIZE));    // copy output to image buffer
+  ctx.putImageData(imageData, 0, 0);  // apply image buffer
 }