Merge branch 'master' into develop

README.md

@@ -24,5 +24,6 @@ Please see our [website for more information, examples, and a tutorial](https://
 - [24Rogue](https://www.raza6.fr/24Rogue/), by [@raza6](https://github.com/raza6/24rogue)
 - [Paint](https://bernardini687.github.io/paint/index.html), by [@bernardini687](https://github.com/bernardini687)
 - [24MadRush](https://keatonfs.github.io/24.../), by [@keatonfs](https://github.com/keatonfs/24MadRush)
+- [Helter Shelter](https://tolbish.github.io/helter-shelter), by @tolbish
 
 If you've built something using 24a2 please let us know! Feel free to open an Issue or Pull Request to add it to this list.

build/engine.js

@@ -136,13 +136,13 @@ var Game = /** @class */ (function () {
      * Calling `run` starts the game.
      */
     Game.prototype.run = function () {
-        // We interact with the DOM when creating the canvas, so let's wait till
-        // the document has fully loaded
-        if (document.readyState !== "complete") {
-            window.addEventListener("load", this.run.bind(this));
-            return;
-        }
         if (!this._renderer) {
+            // We interact with the DOM when creating the canvas, so let's wait till
+            // the document has fully loaded
+            if (document.readyState !== "complete") {
+                window.addEventListener("load", this.run.bind(this));
+                return;
+            }
             this._renderer = new CanvasIOManager(this._gridHeight, this._gridWidth, this._config.containerId);
             if (this._config.onDotClicked) {
                 this._renderer.registerDotClicked(this._config.onDotClicked);
@@ -159,7 +159,6 @@ var Game = /** @class */ (function () {
         // Delay is in milliseconds
         var delay = 1000 / (this._config.frameRate || 24);
         this._interval = window.setInterval(this._update.bind(this), delay);
-        // this._update.bind(this);
     };
     /**
      * The internal function that's called on every frame.

docs/js/engine.js

@@ -136,13 +136,13 @@ var Game = /** @class */ (function () {
      * Calling `run` starts the game.
      */
     Game.prototype.run = function () {
-        // We interact with the DOM when creating the canvas, so let's wait till
-        // the document has fully loaded
-        if (document.readyState !== "complete") {
-            window.addEventListener("load", this.run.bind(this));
-            return;
-        }
         if (!this._renderer) {
+            // We interact with the DOM when creating the canvas, so let's wait till
+            // the document has fully loaded
+            if (document.readyState !== "complete") {
+                window.addEventListener("load", this.run.bind(this));
+                return;
+            }
             this._renderer = new CanvasIOManager(this._gridHeight, this._gridWidth, this._config.containerId);
             if (this._config.onDotClicked) {
                 this._renderer.registerDotClicked(this._config.onDotClicked);
@@ -159,7 +159,6 @@ var Game = /** @class */ (function () {
         // Delay is in milliseconds
         var delay = 1000 / (this._config.frameRate || 24);
         this._interval = window.setInterval(this._update.bind(this), delay);
-        // this._update.bind(this);
     };
     /**
      * The internal function that's called on every frame.

docs/tutorial/index.html

@@ -203,7 +203,9 @@ <h2 id="6-collecting-items">6. Collecting items</h2>
 <p>Currently, nothing happens when our player walks over an item. Let&rsquo;s change it
 so the item disappears, and the user&rsquo;s score increases. We can display the
 user&rsquo;s current score using the <code>game.setText</code> function.</p>
-<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">function</span> update(game) {
+<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">let</span> score = 0;
+
+<span style="color:#00f">function</span> update(game) {
   <span style="color:#00f">for</span> (<span style="color:#00f">let</span> i = 0; i &lt; items.length; i++) {
     <span style="color:#00f">const</span> item = items[i];
     <span style="color:#00f">if</span> (item.x == player.x &amp;&amp; item.y == player.y) {
@@ -214,8 +216,10 @@ <h2 id="6-collecting-items">6. Collecting items</h2>
   }
 
   <span style="color:#008000">// ...
-</span><span style="color:#008000"></span>}
-</code></pre></div>
+</span><span style="color:#008000"></span>
+  game.setText(Score: ${score}<span style="color:#a31515">`)
+</span><span style="color:#a31515">}
+</span></code></pre></div>
 <p>We iterate through all the items, and if the item is at the same position as the
 player, we increment the score and remove the item from the list.</p>
 

src/engine.ts

@@ -242,13 +242,13 @@ class Game {
    * Calling `run` starts the game.
    */
   run() {
-    // We interact with the DOM when creating the canvas, so let's wait till
-    // the document has fully loaded
-    if (document.readyState !== "complete") {
-      window.addEventListener("load", this.run.bind(this));
-      return;
-    }
     if (!this._renderer) {
+      // We interact with the DOM when creating the canvas, so let's wait till
+      // the document has fully loaded
+      if (document.readyState !== "complete") {
+        window.addEventListener("load", this.run.bind(this));
+        return;
+      }
       this._renderer = new CanvasIOManager(
         this._gridHeight,
         this._gridWidth,
@@ -271,7 +271,6 @@ class Game {
     // Delay is in milliseconds
     const delay = 1000 / (this._config.frameRate || 24);
     this._interval = window.setInterval(this._update.bind(this), delay);
-    // this._update.bind(this);
   }
 
   /**

website/content/tutorial.md

@@ -187,6 +187,8 @@ so the item disappears, and the user's score increases. We can display the
 user's current score using the `game.setText` function.
 
 ```javascript
+let score = 0;
+
 function update(game) {
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
@@ -198,6 +200,8 @@ function update(game) {
   }
 
   // ...
+
+  game.setText(Score: ${score}`)
 }
 ```