diff --git a/README.md b/README.md index 5bce348..fec56df 100644 --- a/README.md +++ b/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. diff --git a/build/engine.js b/build/engine.js index 9654102..8580b42 100644 --- a/build/engine.js +++ b/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. diff --git a/docs/js/engine.js b/docs/js/engine.js index 9654102..8580b42 100644 --- a/docs/js/engine.js +++ b/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. diff --git a/docs/tutorial/index.html b/docs/tutorial/index.html index 42a25a4..ea8ce14 100644 --- a/docs/tutorial/index.html +++ b/docs/tutorial/index.html @@ -203,7 +203,9 @@

6. Collecting items

Currently, nothing happens when our player walks over an item. Let’s change it so the item disappears, and the user’s score increases. We can display the user’s current score using the game.setText function.

-
function update(game) {
+
let score = 0;
+
+function update(game) {
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     if (item.x == player.x && item.y == player.y) {
@@ -214,8 +216,10 @@ 

6. Collecting items

} // ... -} -
+ + game.setText(Score: ${score}`) +} +

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.

diff --git a/src/engine.ts b/src/engine.ts index 63397f6..507ad00 100644 --- a/src/engine.ts +++ b/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); } /** diff --git a/website/content/tutorial.md b/website/content/tutorial.md index 044faa9..3631fad 100644 --- a/website/content/tutorial.md +++ b/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}`) } ```