Merge pull request #88 from eugene-serb/dev

Release 1.0.17
eugene-serb · Jun 10, 2023 · 830e31e · 830e31e
2 parents 64471a3 + 55fe90f
commit 830e31e
Show file tree

Hide file tree

Showing 15 changed files with 235 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ Based on game engines from these games and using them for implementation and tes
 ![](https://img.shields.io/badge/ESLint-informational?style=flat-square&logo=eslint&logoColor=FFFFFF&color=8181F2)
 ![](https://img.shields.io/badge/Prettier-informational?style=flat-square&logo=prettier&logoColor=FFFFFF&color=1A2B34)
 ![](https://img.shields.io/badge/Jest-informational?style=flat-square&logo=jest&logoColor=FFFFFF&color=15C213)
+![](https://img.shields.io/badge/📝-JSDoc-informational?style=flat-square&logo=jsdoc&logoColor=FFFFFF&color=006FBB&labelColor=006FBB)
 ![](https://img.shields.io/badge/npm-informational?style=flat-square&logo=npm&logoColor=FFFFFF&color=CB0000)
 ![](https://img.shields.io/badge/GitHub-informational?style=flat-square&logo=github&logoColor=FFFFFF&color=24292F)
 ![](https://img.shields.io/badge/GitHub%20Actions-informational?style=flat-square&logo=github&logoColor=FFFFFF&color=24292F)

diff --git a/docs/index.html b/docs/index.html
@@ -1,16 +1,26 @@
 <!doctype html><html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head><title>Aurora Game Engine</title><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#4ECBD9"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#087E8B"/><meta name="color-scheme" content="light dark"/><meta name="robots" content="all"/><meta name="author" content="Eugene Serb"/><meta name="copyright" content="Eugene Serb, 2023"/><meta name="publisher-email" content="eugene.serb@gmail.com"/><meta name="publisher-url" content="https://eugene-serb.github.io/"/><meta name="keywords" content="Eugene Serb, eugene-serb, eugene_serb, eugene.serb, Evgeniy Serb, Евгений Серб, Novorossiysk, Новороссийск, contacts, CV, resume, portfolio, repositories, services, coder, developer, software engineer, development, frontend, backend, fullstack, Game Engine"/><meta name="description" content="Aurora game engine for creating 1D and 2D games in JavaScript"/><meta property="og:locale" content="en_US"/><meta property="og:type" content="website"/><meta property="og:title" content="Aurora Game Engine"/><meta property="og:site_name" content="Eugene Serb — Website"/><meta property="og:description" content="Aurora game engine for creating 1D and 2D games in JavaScript"/><meta property="og:url" content="https://eugene-serb.github.io/aurora-game-engine/"/><meta property="og:image" content="./img/og.png"/><meta property="vk:image" content="./img/og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:creator" content="@eugene_serb"/><meta name="twitter:title" content="Aurora Game Engine"/><meta name="twitter:description" content="Aurora game engine for creating 1D and 2D games in JavaScript"/><meta name="twitter:image" content="./img/og.png"/><meta name="google-site-verification" content="qLQbgnmQEfvprDF8WR6oL_b_Qt0R9kKcIEOfHqWlFm8"/><meta name="yandex-verification" content="e6e0bff7caaa7ecd"/><meta name="msvalidate.01" content="6E1771734F083E5366205F06314C3577"/><meta name="wmail-verification" content="46d069b79f9c774ce0bbf55f46aef201"/><link rel="canonical" href="https://eugene-serb.github.io/aurora-game-engine/"/><link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png"/><link rel="manifest" href="./site.webmanifest"/><link rel="stylesheet" href="./css/index.css"/><script async src="https://www.googletagmanager.com/gtag/js?id=G-4NB4LGNNLB"></script><script>window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
 
-    gtag('config', 'G-4NB4LGNNLB');</script><script>(function (m, e, t, r, i, k, a) {
-      m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
-      m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
-    })
-      (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+      gtag('config', 'G-4NB4LGNNLB');</script><script>(function (m, e, t, r, i, k, a) {
+        m[i] =
+          m[i] ||
+          function () {
+            (m[i].a = m[i].a || []).push(arguments);
+          };
+        m[i].l = 1 * new Date();
+        (k = e.createElement(t)),
+          (a = e.getElementsByTagName(t)[0]),
+          (k.async = 1),
+          (k.src = r),
+          a.parentNode.insertBefore(k, a);
+      })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');
 
-    ym(79722217, "init", {
-      clickmap: true,
-      trackLinks: true,
-      accurateTrackBounce: true,
-      webvisor: true
-    });</script><script defer="defer" src="index.31d6cfe0d16ae931b73c.js"></script></head><body><header class="header-mini"><nav class="container"><a href="https://eugene-serb.github.io/" target="_self">Go to homepage</a></nav></header><main class="page container"><h1 class="visually-hidden">Eugene Serb – Aurora Game Engine</h1><div class="game"><div id="map" class="game__map-wrapper"></div><div class="game__right-column"><h2 class="game__title">Aurora Game Engine</h2><div class="game__game-info"><span id="dialog" class="game__dialog">Let's have fun!</span><div class="game__banner"><span id="score" class="game__score">Score: 0</span> <span id="timer" class="game__timer">Time: 00:00</span></div><div class="game__controls"><span>Rotate</span><div><span>– </span><kbd>W</kbd> <span>and </span><kbd>↑</kbd> <span>and </span><kbd style="background-color: green; border-radius: 2ch; color: white;">A</kbd></div><span>Down</span><div><span>– </span><kbd>S</kbd> <span>and </span><kbd>↓</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white;">↓</kbd></div><span>Left</span><div><span>– </span><kbd>A</kbd> <span>and </span><kbd>←</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white;">←</kbd></div><span>Rigth</span><div><span>– </span><kbd>D</kbd> <span>and </span><kbd>→</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white;">→</kbd></div><span>Restart</span><div><span>– </span><kbd>R</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white;">START</kbd></div><span>Pause</span><div><span>– </span><kbd>P</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white;">BACK</kbd></div></div></div></div><div class="game__left-column"><div class="game__rating"><h3>Your records:</h3><table class="table_emerald"><thead><tr><th>#</th><th>Score</th><th>Time</th><th>Date</th></tr></thead><tbody id="rating"></tbody></table></div></div></div></main><footer class="footer"><div class="footer-wrapper container"><div class="annotation"><span class="annotation__text">© 2023 <a href="https://eugene-serb.github.io/" target="_blank" translate="no">Eugene Serb</a>. Content licensed under </span><a href="./LICENSE.md" target="_blank">GNU General Public License v3.0</a><br><span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/aurora-game-engine" target="_blank">Improve this page.</a></div></div></footer><noscript><div><img src="https://mc.yandex.ru/watch/79722217" style="position:absolute; left:-9999px;" alt=""/></div></noscript></body></html>
+      ym(79722217, 'init', {
+        clickmap: true,
+        trackLinks: true,
+        accurateTrackBounce: true,
+        webvisor: true,
+      });</script><script defer="defer" src="index.31d6cfe0d16ae931b73c.js"></script></head><body><header class="header-mini"><nav class="container"><a href="https://eugene-serb.github.io/" target="_self">Go to homepage</a></nav></header><main class="page container"><h1 class="visually-hidden">Eugene Serb – Aurora Game Engine</h1><div class="game"><div id="map" class="game__map-wrapper"></div><div class="game__right-column"><h2 class="game__title">Aurora Game Engine</h2><div class="game__game-info"><span id="dialog" class="game__dialog">Let's have fun!</span><div class="game__banner"><span id="score" class="game__score">Score: 0</span> <span id="timer" class="game__timer">Time: 00:00</span></div><div class="game__controls"><span>Rotate</span><div><span>– </span><kbd>W</kbd> <span>and </span><kbd>↑</kbd> <span>and </span><kbd style="background-color: green; border-radius: 2ch; color: white">A</kbd></div><span>Down</span><div><span>– </span><kbd>S</kbd> <span>and </span><kbd>↓</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white">↓</kbd></div><span>Left</span><div><span>– </span><kbd>A</kbd> <span>and </span><kbd>←</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white">←</kbd></div><span>Rigth</span><div><span>– </span><kbd>D</kbd> <span>and </span><kbd>→</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white">→</kbd></div><span>Restart</span><div><span>– </span><kbd>R</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white">START</kbd></div><span>Pause</span><div><span>– </span><kbd>P</kbd> <span>and </span><kbd style="background-color: grey; border-radius: 2ch; color: white">BACK</kbd></div></div></div></div><div class="game__left-column"><div class="game__rating"><h3>Your records:</h3><table class="table_emerald"><thead><tr><th>#</th><th>Score</th><th>Time</th><th>Date</th></tr></thead><tbody id="rating"></tbody></table></div></div></div></main><footer class="footer"><div class="footer-wrapper container"><div class="annotation"><span class="annotation__text">© 2023 <a href="https://eugene-serb.github.io/" target="_blank" translate="no">Eugene Serb</a>. Content licensed under </span><a href="./LICENSE.md" target="_blank">GNU General Public License v3.0</a><br/><span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/aurora-game-engine" target="_blank">Improve this page.</a></div></div></footer><noscript><div><img src="https://mc.yandex.ru/watch/79722217" style="position: absolute; left: -9999px" alt=""/></div></noscript></body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aurora-game-engine",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Aurora game engine for creating 1D and 2D games in JavaScript",
   "keywords": [
     "game-engine",

diff --git a/src/drawer.js b/src/drawer.js
@@ -1,6 +1,12 @@
 'use strict';
 
+/** Class Drawer for painting on canvas. */
 export class Drawer {
+  /**
+   * Create Drawer class instance.
+   * @param {HTMLElement} container HTML container for HTML Canvas.
+   * @param {Array<Array<object<{exist: boolean, color: {light: string, dark: string}}>>>} matrix Matrix representing the map.
+   */
   constructor(container, matrix) {
     if (!container || !matrix) {
       this.error = 'Error on construct';
@@ -12,6 +18,7 @@ export class Drawer {
     this.#init();
   }
 
+  /** Draw matrix on canvas. */
   draw() {
     if (!this.$container || !this.matrix) return this.error;
 
@@ -30,6 +37,10 @@ export class Drawer {
     }
   }
 
+  /**
+   * Initialize Drawer class instance.
+   * @private
+   */
   #init() {
     this.$container.innerHTML = '';
 
@@ -40,18 +51,19 @@ export class Drawer {
 
     this.#updateSizes();
 
-    window.addEventListener('resize', () => {
-      this.#updateSizes();
-    });
+    window.addEventListener('resize', () => this.#updateSizes());
 
     this.media = window.matchMedia('(prefers-color-scheme: dark)');
+
     this.#updateColours(this.media);
 
-    this.media.addEventListener('change', () => {
-      this.#updateColours(this.media);
-    });
+    this.media.addEventListener('change', () => this.#updateColours(this.media));
   }
 
+  /**
+   * Update sizes of the canvas.
+   * @private
+   */
   #updateSizes() {
     const width = this.matrix.length;
     const height = this.matrix[0].length;
@@ -69,6 +81,11 @@ export class Drawer {
     this.draw();
   }
 
+  /**
+   * Update sizes of the canvas.
+   * @param {MediaQueryList} media
+   * @private
+   */
   #updateColours(media) {
     if (media.matches) {
       this.theme = 'dark';

diff --git a/src/gameloop.js b/src/gameloop.js
@@ -1,10 +1,13 @@
 'use strict';
 
+/** Class Gameloop to represent game event loop. */
 export class Gameloop {
+  /** Create Gameloop class instance. */
   constructor() {
     this.#init();
   }
 
+  /** Start the game. */
   start() {
     if (this.isGameOver) {
       this.clear();
@@ -13,22 +16,29 @@ export class Gameloop {
     this.canMove = true;
   }
 
+  /** Stop the game. */
   stop() {
     this.isPaused = true;
     this.canMove = false;
     clearTimeout(this.interval);
   }
 
+  /** Set game over. */
   setGameOver() {
     this.isGameOver = true;
     this.stop();
   }
 
+  /** Reset the game. */
   clear() {
     this.stop();
     this.#init();
   }
 
+  /**
+   * Initialize Gameloop class instance.
+   * @private
+   */
   #init() {
     this.interval = null;
     this.isGameOver = false;

diff --git a/src/gamepad.js b/src/gamepad.js
@@ -1,11 +1,20 @@
 'use strict';
 
+/** Class Gamepad for handle gamepad controls. */
 export class Gamepad {
+  /**
+   * Create Gamepad instance.
+   * @param {any} context Context object for controls.
+   */
   constructor(context) {
     this._context = context;
     this.#init();
   }
 
+  /**
+   * Initialize Gamepad class instance.
+   * @private
+   */
   #init() {
     if (!this.#checkGamepadSupport()) {
       return;
@@ -20,6 +29,10 @@ export class Gamepad {
     this.#connectGamepad();
   }
 
+  /**
+   * Connect gamepad and listen controls.
+   * @private
+   */
   #connectGamepad() {
     window.addEventListener('gamepadconnected', () => {
       const update = () => {
@@ -48,6 +61,10 @@ export class Gamepad {
     });
   }
 
+  /**
+   * Handle controls of the gamepad.
+   * @private
+   */
   #handle(button) {
     if (button === 0) {
       this._context.moveToUp();
@@ -88,6 +105,10 @@ export class Gamepad {
     }
   }
 
+  /**
+   * Check gamepad's support.
+   * @private
+   */
   #checkGamepadSupport() {
     return 'getGamepads' in window.navigator;
   }

diff --git a/src/helpers.js b/src/helpers.js
@@ -1,5 +1,11 @@
 'use strict';
 
+/**
+ * Get a random integer number.
+ * @param {number} min Minimum.
+ * @param {number} max Maximum.
+ * @returns {number} Random integer number.
+ */
 export function getRandomInteger(min, max) {
   const i = min && typeof min === 'number' ? min : 0;
   const j = max && typeof max === 'number' ? max : 0;

diff --git a/src/keyboard.js b/src/keyboard.js
@@ -1,11 +1,19 @@
 'use strict';
 
+/** Class Keyboard for handle keyboard controls. */
 export class Keyboard {
+  /** Create Keyboard class instance.
+   * @param {any} context Context object for controls.
+   */
   constructor(context) {
     this._context = context;
     this.#handle();
   }
 
+  /**
+   * Handle controls of the keyboard.
+   * @private
+   */
   #handle() {
     window.addEventListener('keydown', (e) => {
       if (!this._context.isGameOver) {

diff --git a/src/map.js b/src/map.js
@@ -2,14 +2,32 @@
 
 import Matrix from './matrix.js';
 
+/**
+ * Class map to represent the map.
+ * @extends Matrix
+ */
 export class Map extends Matrix {
+  /**
+   * Create Map class instance.
+   * @param {number} width Matrix width.
+   * @param {number} height Matrix height.
+   * @param {any} emptyValue Default empty value.
+   * @param {Array<Array<any>>} matrix Another matrix for fill new Matrix instance.
+   * @param {object<{x: boolean, y: boolean}>} transfer Explain on which axes the map is closed.
+   */
   constructor(width, height, emptyValue, matrix, transfer) {
     super(width, height, emptyValue, matrix);
 
     this.transferX = typeof transfer?.x === 'boolean' ? transfer.x : false;
     this.transferY = typeof transfer?.y === 'boolean' ? transfer.y : false;
   }
 
+  /**
+   * Get new coordinates based on start position and difference.
+   * @param {object<{x: number, y: number}>} start Point object with key 'x': number and 'y': number.
+   * @param {object<{x: number, y: number}>} delta Point object with key 'x': number and 'y': number.
+   * @returns {object<{x: number, y: number}>} New position.
+   */
   getCoords(start, delta) {
     const sx = start?.x && typeof start?.x === 'number' ? Math.abs(Math.trunc(start.x)) : 0;
 
@@ -28,6 +46,11 @@ export class Map extends Matrix {
     return { x, y };
   }
 
+  /**
+   * Get X position.
+   * @param {number} x Position on x-axe.
+   * @returns {number} New x-axe position.
+   */
   #getX(x) {
     let result = null;
 
@@ -42,6 +65,12 @@ export class Map extends Matrix {
     return result;
   }
 
+  /**
+   * Get Y position.
+   * @param {number} x Position on x-axe.
+   * @param {number} y Position on y-axe.
+   * @returns {number} New y-axe position.
+   */
   #getY(x, y) {
     let result = null;