Added JSDoc for basic documentation

.gitignore

@@ -2,4 +2,5 @@
 .DS_Store
 node_modules/
 dist/
+docs/
 examples/*/dist/

gulpfile.js

@@ -3,7 +3,8 @@
 var gulp = require("gulp"),
     path = require("path"),
     gutil = require("gulp-util"),
-    webpack = require("webpack");
+    webpack = require("webpack"),
+    jsdoc = require("gulp-jsdoc3");
 
 
 let minify = true,
@@ -133,5 +134,18 @@ gulp.task("engine", (callback) => {
 });
 
 
-gulp.task("build", ["engine", "examples"]);
+gulp.task("docs", (callback) => {
+    gulp.src([
+        "src/classes/*.js"
+    ], {
+        read: false
+    }).pipe(jsdoc({
+        opts: {
+            destination: "docs"
+        }
+    }, callback));
+})
+
+
+gulp.task("build", ["engine", "docs", "examples"]);
 gulp.task("default", ["build"]);

package.json

@@ -25,6 +25,7 @@
     "babel-preset-stage-0": "6.5.0",
     "babel-runtime": "6.6.1",
     "gulp": "3.9.1",
+    "gulp-jsdoc3": "0.2.1",
     "gulp-util": "3.0.7",
     "webpack": "1.12.14"
   }

src/classes/color.js

@@ -1,39 +1,67 @@
 "use strict";
 
+
+/**
+ * Class representing a color
+ */
 class Color {
 
 
-    constructor (r = 0, g = 0, b = 0, a = 1) {
+    /**
+     * Create a color
+     * @param {number} red - Red value (0-255)
+     * @param {number} green - Green value (0-255)
+     * @param {number} blue - Blue value (0-255)
+     * @param {number} alpha - Alpha value (0-1)
+     */
+    constructor (red = 0, green = 0, blue = 0, alpha = 1) {
 
-        this.r = r;
+        this.red = red;
-        this.g = g;
+        this.green = green;
-        this.b = b;
+        this.blue = blue;
-        this.a = a;
+        this.alpha = alpha;
 
     }
 
 
+    /**
+     * Returns the rgba (rgba()) string representation of the color
+     * @returns {string}
+     */
     toString () {
-        return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
+        return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
     }
 
 
+    /**
+     * Returns the hex (#) representation of the color
+     * @returns {string}
+     */
     toHex () {
         return `#${((r << 16) | (g << 8) | b).toString(16)}`;
     }
 
 
+    /**
+     * Clones the color and returns a new color
+     * @returns {Color}
+     */
     clone () {
-        return new Color(this.r, this.g, this.b, this.a);
+        return new Color(this.red, this.green, this.blue, this.alpha);
     }
 
 
+    /**
+     * Add a color to this color
+     * @param {Color} color - Color to add
+     * @returns {Color}
+     */
     add (color) {
 
         if (color instanceof Color) {
-            this.r += color.r; this.g += color.g; this.b += color.b; this.a += color.a;
+            this.red += color.r; this.green += color.g; this.blue += color.b; this.alpha += color.a;
         } else {
-            this.r += color; this.g += color; this.b += color; this.a += color;
+            this.red += color; this.green += color; this.blue += color; this.alpha += color;
         }
 
         return this;
@@ -41,12 +69,17 @@ class Color {
     }
 
 
+    /**
+     * Subtract a color from this color
+     * @param {Color} color - Color to subtract
+     * @returns {Color}
+     */
     subtract (color) {
 
         if (color instanceof Color) {
-            this.r -= color.r; this.g -= color.g; this.b -= color.b; this.a -= color.a;
+            this.red -= color.r; this.green -= color.g; this.blue -= color.b; this.alpha -= color.a;
         } else {
-            this.r -= color; this.g -= color; this.b -= color; this.a -= color;
+            this.red -= color; this.green -= color; this.blue -= color; this.alpha -= color;
         }
 
         return this;
@@ -54,12 +87,17 @@ class Color {
     }
 
 
+    /**
+     * Multiply this color with another color
+     * @param {Color} color - Color to multiply with
+     * @returns {Color}
+     */
     multiply (color) {
 
         if (color instanceof Color) {
-            this.r *= color.r; this.g *= color.g; this.b *= color.b; this.a *= color.a;
+            this.red *= color.r; this.green *= color.g; this.blue *= color.b; this.alpha *= color.a;
         } else {
-            this.r *= color; this.g *= color; this.b *= color; this.a *= color;
+            this.red *= color; this.green *= color; this.blue *= color; this.alpha *= color;
         }
 
         return this;
@@ -67,12 +105,17 @@ class Color {
     }
 
 
+    /**
+     * Divide this color with another color
+     * @param {Color} color - Color to divide by
+     * @returns {Color}
+     */
     divide (color) {
 
         if (color instanceof Color) {
-            this.r /= color.r; this.g /= color.g; this.b /= color.b; this.a /= color.a;
+            this.red /= color.r; this.green /= color.g; this.blue /= color.b; this.alpha /= color.a;
         } else {
-            this.r /= color; this.g /= color; this.b /= color; this.a /= color;
+            this.red /= color; this.green /= color; this.blue /= color; this.alpha /= color;
         }
 
         return this;

src/classes/entity.js

@@ -2,9 +2,18 @@
 
 import Vector2D from "./vector2d.js";
 
+
+/**
+ * Class representing an entity in a scene
+ */
 class Entity {
 
 
+    /**
+     * Create an entity
+     * @param {number} x - x (Left) position of the entity
+     * @param {number} y - y (Top) position of the entity
+     */
     constructor (x = 0, y = 0) {
 
         this.pos = new Vector2D(x, y);
@@ -27,6 +36,9 @@ class Entity {
     }
 
 
+    /**
+     * x (Left) position of the entity
+     */
     get left () {
         return this.pos.x;
     }
@@ -36,6 +48,9 @@ class Entity {
     }
 
 
+    /**
+     * y (Top) position of the entity
+     */
     get top () {
         return this.pos.y;
     }
@@ -55,6 +70,9 @@ class Entity {
     }
 
 
+    /**
+     * Width of the entity
+     */
     get width () {
         return this.size.x;
     }
@@ -65,16 +83,24 @@ class Entity {
     }
 
 
+    /**
+     * Height of the entity
+     */
     get height () {
         return this.size.y;
     }
 
-
+    
     set height (height) {
         return this.size.y = height;
     }
 
 
+    /**
+     * Set the velocity of the entity
+     * @param {Number} x - x (Left) velocity
+     * @param {Number} y - y (Top) velocity
+     */
     setVelocity (x, y) {
 
         if (x instanceof Vector2D) {
@@ -87,6 +113,11 @@ class Entity {
     }
 
 
+    /**
+     * Set the acceleration of the entity
+     * @param x {Number} x - x (Left) acceleration
+     * @param y {Number} y - y (Top) acceleration
+     */
     setAcceleration (x, y) {
 
         if (x instanceof Vector2D) {
@@ -99,6 +130,11 @@ class Entity {
     }
 
 
+    /**
+     * Creates a new child entity.
+     * Note: This creates an instance of Entity, the base class. Under most circumstances you should use addChildEntity with an entity you have created.
+     * @returns {Entity}
+     */
     createChildEntity () {
 
         let child = new Entity();
@@ -112,6 +148,11 @@ class Entity {
     }
 
 
+    /**
+     * Add an entity as a child
+     * @param {Entity} child - The child entity
+     * @returns {Entity}
+     */
     addChildEntity (child) {
 
         child._updateGame(this._game);
@@ -123,6 +164,11 @@ class Entity {
     }
 
 
+    /**
+     * Removes entity from children
+     * @param {Entity} child - The child entity
+     * @returns {boolean} Indicates successful removal
+     */
     detachChildEntity (child) {
 
         for (let i = 0; i < this.children.length; i++) {

src/classes/rect.js

@@ -6,9 +6,21 @@ import Vector2D from "./vector2d.js";
 import CollisionMethods from "../libs/collisionmethods.js";
 
 
+/**
+ *  Class representing a rectangle in a scene
+ *  @extends Entity
+ */
 class Rect extends Entity {
 
 
+    /**
+     * Create a rectangle
+     * @param {number} x - x (Left) position of the rectangle
+     * @param {number} y - y (Top) position of the rectangle
+     * @param {number} width - Width of the rectangle
+     * @param {number} height - Height of the rectangle
+     * @param {Color} color - Color of the rectangle
+     */
     constructor (x, y, width, height, color) {
 
         super(x, y);
@@ -20,6 +32,11 @@ class Rect extends Entity {
     }
 
 
+    /**
+     * Detects if the rectangle is colliding with another entity
+     * @param {Entity} entity - Entity to check against
+     * @returns {boolean} Indicates whether the entities are colliding
+     */
     isCollidingWith (entity) {
 
         if (entity instanceof Rect) {