craters.js - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

app/craters/craters.js

@@ -19,3 +19,3 @@ // Craters.js micro game framework
   static version () {
-    return '0.0.0.3'
+    return '0.0.0.4'
   }
@@ -22,0 +22,0 @@ }

app/craters/entity.js

 class Entity {
   constructor () {
-    // Setup the defaults if no parameters are given
-    // Type represents the collision detector's handling
-    this.type = this.type || 'dynamic'
-
-    // Collision represents the type of collision
-    // another object will receive upon colliding
-    this.collision = this.collision || 'elastic'
     this.state = {
-
       size: {
@@ -32,3 +24,3 @@ x: 10,
 
-    this.entities = [];
+    this.entities = []
   }
@@ -42,17 +34,6 @@
     }
-
-    switch (this.type) {
-      case 'dynamic':
-        this.state.vel.x += this.state.accel.x
-        this.state.vel.y += this.state.accel.y
-        this.state.pos.x += this.state.vel.x
-        this.state.pos.y += this.state.vel.y
-        break
-      case 'kinematic':
-        this.state.vel.x += this.state.accel.x
-        this.state.vel.y += this.state.accel.y
-        this.state.pos.x += this.state.vel.x
-        this.state.pos.y += this.state.vel.y
-        break
-    }
+    this.state.vel.x += this.state.accel.x
+    this.state.vel.y += this.state.accel.y
+    this.state.pos.x += this.state.vel.x
+    this.state.pos.y += this.state.vel.y
   }
@@ -73,7 +54,7 @@
     this.state = {
-      cord: args.pos || {
+      pos: args.pos || {
         x: 0,
         y: 0
       },
-      pos: {
+      crop: {
         x: 0,
@@ -98,7 +79,7 @@ y: 0
       if (this.orientation === 'vertical') {
-        this.state.pos.y = this.state.frames.shift()
-        this.state.frames.push(this.state.pos.y)
+        this.state.crop.y = this.state.frames.shift()
+        this.state.frames.push(this.state.crop.y)
       } else {
-        this.state.pos.x = this.state.frames.shift()
-        this.state.frames.push(this.state.pos.x)
+        this.state.crop.x = this.state.frames.shift()
+        this.state.frames.push(this.state.crop.x)
       }
@@ -116,9 +97,9 @@
     this.scope.context.save()
-    this.scope.context.translate(this.state.pos.x + (this.state.size.x / 2), this.state.pos.y + (this.state.size.y / 2))
+    this.scope.context.translate(this.state.crop.x + (this.state.size.x / 2), this.state.crop.y + (this.state.size.y / 2))
     this.scope.context.rotate((this.state.angle) * (Math.PI / 180))
-    this.scope.context.translate(-(this.state.pos.x + (this.state.size.x / 2)), -(this.state.pos.y + (this.state.size.y / 2)))
+    this.scope.context.translate(-(this.state.crop.x + (this.state.size.x / 2)), -(this.state.crop.y + (this.state.size.y / 2)))
 
     this.scope.context.drawImage(this.state.image,
-      (this.state.pos.x * this.state.size.x), (this.state.pos.y * this.state.size.y), this.state.size.x, this.state.size.y,
-      this.state.cord.x, this.state.cord.y, this.state.size.x, this.state.size.y)
+      (this.state.crop.x * this.state.size.x), (this.state.crop.y * this.state.size.y), this.state.size.x, this.state.size.y,
+      this.state.pos.x, this.state.pos.y, this.state.size.x, this.state.size.y)
 
@@ -129,2 +110,2 @@ this.scope.context.restore()
 
-export { Entity, Sprite }
+export { Entity, Sprite }

app/craters/game.js

 class Game {
   constructor (container, width, height, frames, debug) {
     this.container = container || 'body'
-    this.constants = {
-      gravity: {
-        x: 0,
-        y: 100
-      },
-
+    this.state = {
       width: width,
@@ -19,6 +14,3 @@ height: height,
 
-    this.state = {
-      entities: []
-    }
-
+    this.entities = []
     // Generate a canvas and store it as our viewport
@@ -38,6 +30,6 @@ var canvas = document.createElement('canvas')
     // Set the canvas' width then downscale via CSS
-    canvas.width = Math.round(this.constants.width * ratio)
-    canvas.height = Math.round(this.constants.height * ratio)
-    canvas.style.width = this.constants.width + 'px'
-    canvas.style.height = this.constants.height + 'px'
+    canvas.width = Math.round(this.state.width * ratio)
+    canvas.height = Math.round(this.state.height * ratio)
+    canvas.style.width = this.state.width + 'px'
+    canvas.style.height = this.state.height + 'px'
     // Scale the context so we get accurate pixel density
@@ -66,7 +58,5 @@ context.setTransform(ratio, 0, 0, ratio, 0, 0)
   update (scope, now) {
-    var state = scope.state || []
-    var entities = state.entities
-    for (var entity = 0; entity < entities.length; entity++) {
+    for (var entity = 0; entity < this.entities.length; entity++) {
       // Fire off each active entities `render` method
-      entities[entity].update()
+      this.entities[entity].update()
     }
@@ -77,10 +67,10 @@ }
     // Setup globals
-    var w = scope.constants.width
-    var h = scope.constants.height
+    var w = scope.state.width
+    var h = scope.state.height
 
     // Clear out the canvas
-    scope.context.font = scope.constants.font
+    scope.context.font = scope.state.font
     scope.context.save()
     scope.context.clearRect(0, 0, w, h)
-    scope.context.fillStyle = scope.constants.bgcolor
+    scope.context.fillStyle = scope.state.bgcolor
     scope.context.fillRect(0, 0, w, h)
@@ -90,14 +80,11 @@ scope.context.fill()
     // Spit out some text
-    scope.context.fillStyle = scope.constants.color
+    scope.context.fillStyle = scope.state.color
     // If we want to show the FPS, then render it in the top right corner.
-    if (scope.constants.debug) {
+    if (scope.state.debug) {
       scope.context.fillText('fps : ' + scope.loop.fps, w - 100, 50)
     }
-
     // If there are entities, iterate through them and call their `render` methods
-    var state = scope.state || []
-    var entities = state.entities
-    for (var entity = 0; entity < entities.length; entity++) {
+    for (var entity = 0; entity < this.entities.length; entity++) {
       // Fire off each active entities `render` method
-      entities[entity].render()
+      this.entities[entity].render()
     }
@@ -109,9 +96,5 @@ }
   constructor (scope) {
-    return this.loop(scope)
-  }
-
-  loop (scope) {
     var loop = {}
     // Initialize timer variables so we can calculate FPS
-    var fps = scope.constants.frames
+    var fps = scope.state.frames
     var fpsInterval = 1000 / fps
@@ -199,2 +182,2 @@ var before = window.performance.now()
 
-export { Game }
+export { Game }

app/craters/loader.js

@@ -49,2 +49,2 @@ class Loader {
 
-export { Loader }
+export { Loader }

app/game.js

@@ -5,12 +5,10 @@ 'use strict';
 class mygame extends Game {
-    intitiate() {
-        super.intitiate();
-    }
 
-    render() {
+    render () {
         super.render(this)
         this.context.font = '2em Arial'
-        this.context.fillText('It\'s working.️', 65, (this.constants.height / 2), (this.constants.width))
+        this.context.fillText('It\'s working.️', 65, (this.state.height / 2), (this.state.width))
     }
 }
+
 window.game = new mygame('#container', window.innerWidth, window.innerHeight, 60, true)

build/game.min.js

@@ -1,1 +0,1 @@
-!function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([,function(t,e,n){"use strict";n.r(e);class o{constructor(t,e,n,o,r){this.container=t||"body",this.constants={gravity:{x:0,y:100},width:e,height:n,frames:o,debug:r,bgcolor:"rgba(0,0,0,0)",color:"#ff0",font:"1em Arial"},this.state={entities:[]};var a=document.createElement("canvas"),s=a.getContext("2d"),c=window.devicePixelRatio/["webkitBackingStorePixelRatio","mozBackingStorePixelRatio","msBackingStorePixelRatio","oBackingStorePixelRatio","backingStorePixelRatio"].reduce(function(t,e){return Object.prototype.hasOwnProperty.call(s,e)?s[e]:1});a.width=Math.round(this.constants.width*c),a.height=Math.round(this.constants.height*c),a.style.width=this.constants.width+"px",a.style.height=this.constants.height+"px",s.setTransform(c,0,0,c,0,0),this.viewport=a,this.viewport.id="gameViewport",this.context=this.viewport.getContext("2d"),this.container=document.querySelector(this.container),this.container.insertBefore(this.viewport,this.container.firstChild),this.loop=new i(this),this.intitiate()}intitiate(){}update(t,e){for(var n=(t.state||[]).entities,o=0;o<n.length;o++)n[o].update()}render(t,e){var n=t.constants.width,o=t.constants.height;t.context.font=t.constants.font,t.context.save(),t.context.clearRect(0,0,n,o),t.context.fillStyle=t.constants.bgcolor,t.context.fillRect(0,0,n,o),t.context.fill(),t.context.restore(),t.context.fillStyle=t.constants.color,t.constants.debug&&t.context.fillText("fps : "+t.loop.fps,n-100,50);for(var i=(t.state||[]).entities,r=0;r<i.length;r++)i[r].render()}}class i{constructor(t){return this.loop(t)}loop(t){var e={},n=t.constants.frames,o=1e3/n,i=window.performance.now(),r={new:{frameCount:0,startTime:i,sinceStart:0},old:{frameCount:0,startTime:i,sineStart:0}},a="new";return e.fps=0,e.main=function(s){e.stopLoop=window.requestAnimationFrame(e.main);var c,l,u=s,f=u-i;if(f>o){for(var h in i=u-f%o,r)++r[h].frameCount,r[h].sinceStart=u-r[h].startTime;c=r[a],e.fps=Math.round(1e3/(c.sinceStart/c.frameCount)*100)/100,l=r.new.frameCount===r.old.frameCount?5*n:10*n,c.frameCount>l&&(r[a].frameCount=0,r[a].startTime=u,r[a].sinceStart=0,a="new"===a?"old":"new"),t.update(t,u),t.render(t,u)}},e.main(),e}}Number.prototype.boundary=function(t,e){return Math.min(Math.max(this,t),e)};window.game=new class extends o{intitiate(){super.intitiate()}render(){super.render(this),this.context.font="2em Arial",this.context.fillText("It's working.️",65,this.constants.height/2,this.constants.width)}}("#container",window.innerWidth,window.innerHeight,60,!0)}]);
+!function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}({2:function(t,e,n){"use strict";n.r(e);class i{constructor(t,e,n,i,o){this.container=t||"body",this.state={width:e,height:n,frames:i,debug:o,bgcolor:"rgba(0,0,0,0)",color:"#ff0",font:"1em Arial"},this.entities=[];var a=document.createElement("canvas"),s=a.getContext("2d"),c=window.devicePixelRatio/["webkitBackingStorePixelRatio","mozBackingStorePixelRatio","msBackingStorePixelRatio","oBackingStorePixelRatio","backingStorePixelRatio"].reduce(function(t,e){return Object.prototype.hasOwnProperty.call(s,e)?s[e]:1});a.width=Math.round(this.state.width*c),a.height=Math.round(this.state.height*c),a.style.width=this.state.width+"px",a.style.height=this.state.height+"px",s.setTransform(c,0,0,c,0,0),this.viewport=a,this.viewport.id="gameViewport",this.context=this.viewport.getContext("2d"),this.container=document.querySelector(this.container),this.container.insertBefore(this.viewport,this.container.firstChild),this.loop=new r(this),this.intitiate()}intitiate(){}update(t,e){for(var n=0;n<this.entities.length;n++)this.entities[n].update()}render(t,e){var n=t.state.width,i=t.state.height;t.context.font=t.state.font,t.context.save(),t.context.clearRect(0,0,n,i),t.context.fillStyle=t.state.bgcolor,t.context.fillRect(0,0,n,i),t.context.fill(),t.context.restore(),t.context.fillStyle=t.state.color,t.state.debug&&t.context.fillText("fps : "+t.loop.fps,n-100,50);for(var r=0;r<this.entities.length;r++)this.entities[r].render()}}class r{constructor(t){var e={},n=t.state.frames,i=1e3/n,r=window.performance.now(),o={new:{frameCount:0,startTime:r,sinceStart:0},old:{frameCount:0,startTime:r,sineStart:0}},a="new";return e.fps=0,e.main=function(s){e.stopLoop=window.requestAnimationFrame(e.main);var c,l,u=s,f=u-r;if(f>i){for(var h in r=u-f%i,o)++o[h].frameCount,o[h].sinceStart=u-o[h].startTime;c=o[a],e.fps=Math.round(1e3/(c.sinceStart/c.frameCount)*100)/100,l=o.new.frameCount===o.old.frameCount?5*n:10*n,c.frameCount>l&&(o[a].frameCount=0,o[a].startTime=u,o[a].sinceStart=0,a="new"===a?"old":"new"),t.update(t,u),t.render(t,u)}},e.main(),e}}Number.prototype.boundary=function(t,e){return Math.min(Math.max(this,t),e)};window.game=new class extends i{render(){super.render(this),this.context.font="2em Arial",this.context.fillText("It's working.️",65,this.state.height/2,this.state.width)}}("#container",window.innerWidth,window.innerHeight,60,!0)}});

CHANGELOG.md

@@ -17,1 +17,11 @@ #### v0.0.0.1
 	reduces bundle size by including only what you need
+#### v0.0.0.4
+* constructor
+	all constructors start with a capital letter i.e Game , Entity 
+* name changes
+	game method has a its constants object renamed to state
+	and entities removed from state object , its now accessed by game.entities instead of game.state.entities
+	more simplification and code comments coming soon.
+* sprite tip;
+	it can be used to create an entity quick and fast
+	i.e ladybug extends sprite

dist/craters.js

@@ -1,457 +0,433 @@
-class Game {
-  constructor (container, width, height, frames, debug) {
-    this.container = container || 'body';
-    this.constants = {
-      gravity: {
-        x: 0,
-        y: 100
-      },
+var cg = (function (exports) {
+  'use strict';
 
-      width: width,
-      height: height,
-      frames: frames,
-      debug: debug,
-      bgcolor: 'rgba(0,0,0,0)',
-      color: '#ff0',
-      font: '1em Arial'
-    };
+  class Game {
+    constructor (container, width, height, frames, debug) {
+      this.container = container || 'body';
+      this.state = {
+        width: width,
+        height: height,
+        frames: frames,
+        debug: debug,
+        bgcolor: 'rgba(0,0,0,0)',
+        color: '#ff0',
+        font: '1em Arial'
+      };
 
-    this.state = {
-      entities: []
-    };
+      this.entities = [];
+      // Generate a canvas and store it as our viewport
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      // Pass our canvas' context to our getPixelRatio method
+      var backingStores = ['webkitBackingStorePixelRatio', 'mozBackingStorePixelRatio', 'msBackingStorePixelRatio', 'oBackingStorePixelRatio', 'backingStorePixelRatio'];
+      var deviceRatio = window.devicePixelRatio;
+      // Iterate through our backing store props and determine the proper backing ratio.
+      var backingRatio = backingStores.reduce(function (prev, curr) {
+        return (Object.prototype.hasOwnProperty.call(context, curr) ? context[curr] : 1)
+      });
+      // Return the proper pixel ratio by dividing the device ratio by the backing ratio
+      var ratio = deviceRatio / backingRatio;
 
-    // Generate a canvas and store it as our viewport
-    var canvas = document.createElement('canvas');
-    var context = canvas.getContext('2d');
-    // Pass our canvas' context to our getPixelRatio method
-    var backingStores = ['webkitBackingStorePixelRatio', 'mozBackingStorePixelRatio', 'msBackingStorePixelRatio', 'oBackingStorePixelRatio', 'backingStorePixelRatio'];
-    var deviceRatio = window.devicePixelRatio;
-    // Iterate through our backing store props and determine the proper backing ratio.
-    var backingRatio = backingStores.reduce(function (prev, curr) {
-      return (Object.prototype.hasOwnProperty.call(context, curr) ? context[curr] : 1)
-    });
-    // Return the proper pixel ratio by dividing the device ratio by the backing ratio
-    var ratio = deviceRatio / backingRatio;
+      // Set the canvas' width then downscale via CSS
+      canvas.width = Math.round(this.state.width * ratio);
+      canvas.height = Math.round(this.state.height * ratio);
+      canvas.style.width = this.state.width + 'px';
+      canvas.style.height = this.state.height + 'px';
+      // Scale the context so we get accurate pixel density
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
 
-    // Set the canvas' width then downscale via CSS
-    canvas.width = Math.round(this.constants.width * ratio);
-    canvas.height = Math.round(this.constants.height * ratio);
-    canvas.style.width = this.constants.width + 'px';
-    canvas.style.height = this.constants.height + 'px';
-    // Scale the context so we get accurate pixel density
-    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      this.viewport = canvas;
+      this.viewport.id = 'gameViewport';
 
-    this.viewport = canvas;
-    this.viewport.id = 'gameViewport';
+      // Get and store the canvas context as a global
+      this.context = this.viewport.getContext('2d');
 
-    // Get and store the canvas context as a global
-    this.context = this.viewport.getContext('2d');
+      // Append viewport into our game within the dom
+      this.container = document.querySelector(this.container);
+      this.container.insertBefore(this.viewport, this.container.firstChild);
 
-    // Append viewport into our game within the dom
-    this.container = document.querySelector(this.container);
-    this.container.insertBefore(this.viewport, this.container.firstChild);
+      // Initiate core modules with the current scope
+      this.loop = new Loop(this);
+      this.intitiate();
+    }
 
-    // Initiate core modules with the current scope
-    this.loop = new Loop(this);
-    this.intitiate();
-  }
+    intitiate () {
 
-  intitiate () {
+    }
 
-  }
-
-  update (scope, now) {
-    var state = scope.state || [];
-    var entities = state.entities;
-    for (var entity = 0; entity < entities.length; entity++) {
-      // Fire off each active entities `render` method
-      entities[entity].update();
+    update (scope, now) {
+      for (var entity = 0; entity < this.entities.length; entity++) {
+        // Fire off each active entities `render` method
+        this.entities[entity].update();
+      }
     }
-  }
 
-  render (scope, now) {
-    // Setup globals
-    var w = scope.constants.width;
-    var h = scope.constants.height;
+    render (scope, now) {
+      // Setup globals
+      var w = scope.state.width;
+      var h = scope.state.height;
 
-    // Clear out the canvas
-    scope.context.font = scope.constants.font;
-    scope.context.save();
-    scope.context.clearRect(0, 0, w, h);
-    scope.context.fillStyle = scope.constants.bgcolor;
-    scope.context.fillRect(0, 0, w, h);
-    scope.context.fill();
-    scope.context.restore();
-    // Spit out some text
-    scope.context.fillStyle = scope.constants.color;
-    // If we want to show the FPS, then render it in the top right corner.
-    if (scope.constants.debug) {
-      scope.context.fillText('fps : ' + scope.loop.fps, w - 100, 50);
+      // Clear out the canvas
+      scope.context.font = scope.state.font;
+      scope.context.save();
+      scope.context.clearRect(0, 0, w, h);
+      scope.context.fillStyle = scope.state.bgcolor;
+      scope.context.fillRect(0, 0, w, h);
+      scope.context.fill();
+      scope.context.restore();
+      // Spit out some text
+      scope.context.fillStyle = scope.state.color;
+      // If we want to show the FPS, then render it in the top right corner.
+      if (scope.state.debug) {
+        scope.context.fillText('fps : ' + scope.loop.fps, w - 100, 50);
+      }
+      // If there are entities, iterate through them and call their `render` methods
+      for (var entity = 0; entity < this.entities.length; entity++) {
+        // Fire off each active entities `render` method
+        this.entities[entity].render();
+      }
     }
-
-    // If there are entities, iterate through them and call their `render` methods
-    var state = scope.state || [];
-    var entities = state.entities;
-    for (var entity = 0; entity < entities.length; entity++) {
-      // Fire off each active entities `render` method
-      entities[entity].render();
-    }
   }
-}
-class Loop {
-  constructor (scope) {
-    return this.loop(scope)
-  }
+  class Loop {
+    constructor (scope) {
+      var loop = {};
+      // Initialize timer variables so we can calculate FPS
+      var fps = scope.state.frames;
+      var fpsInterval = 1000 / fps;
+      var before = window.performance.now();
+      // Set up an object to contain our alternating FPS calculations
+      var cycles = {
+        new: {
+          frameCount: 0,
+          startTime: before,
+          sinceStart: 0
+        },
+        old: {
+          frameCount: 0,
+          startTime: before,
+          sineStart: 0
+        }
+      };
 
-  loop (scope) {
-    var loop = {};
-    // Initialize timer variables so we can calculate FPS
-    var fps = scope.constants.frames;
-    var fpsInterval = 1000 / fps;
-    var before = window.performance.now();
-    // Set up an object to contain our alternating FPS calculations
-    var cycles = {
-      new: {
-        frameCount: 0,
-        startTime: before,
-        sinceStart: 0
-      },
-      old: {
-        frameCount: 0,
-        startTime: before,
-        sineStart: 0
-      }
-    };
+      // Alternating Frame Rate vars
+      var resetInterval = 5;
+      var resetState = 'new';
 
-    // Alternating Frame Rate vars
-    var resetInterval = 5;
-    var resetState = 'new';
+      loop.fps = 0;
 
-    loop.fps = 0;
+      // Main game rendering loop
+      loop.main = function mainLoop (tframe) {
+        // Request a new Animation Frame
+        // setting to `stopLoop` so animation can be stopped via
+        // `window.cancelAnimationFrame( loop.stopLoop )`
+        loop.stopLoop = window.requestAnimationFrame(loop.main);
 
-    // Main game rendering loop
-    loop.main = function mainLoop (tframe) {
-      // Request a new Animation Frame
-      // setting to `stopLoop` so animation can be stopped via
-      // `window.cancelAnimationFrame( loop.stopLoop )`
-      loop.stopLoop = window.requestAnimationFrame(loop.main);
+        // How long ago since last loop?
+        var now = tframe;
+        var elapsed = now - before;
+        var activeCycle;
+        var targetResetInterval;
 
-      // How long ago since last loop?
-      var now = tframe;
-      var elapsed = now - before;
-      var activeCycle;
-      var targetResetInterval;
+        // If it's been at least our desired interval, render
+        if (elapsed > fpsInterval) {
+          // Set before = now for next frame, also adjust for
+          // specified fpsInterval not being a multiple of rAF's interval (16.7ms)
+          // ( http://stackoverflow.com/a/19772220 )
+          before = now - (elapsed % fpsInterval);
 
-      // If it's been at least our desired interval, render
-      if (elapsed > fpsInterval) {
-        // Set before = now for next frame, also adjust for
-        // specified fpsInterval not being a multiple of rAF's interval (16.7ms)
-        // ( http://stackoverflow.com/a/19772220 )
-        before = now - (elapsed % fpsInterval);
+          // Increment the vals for both the active and the alternate FPS calculations
+          for (var calc in cycles) {
+            ++cycles[calc].frameCount;
+            cycles[calc].sinceStart = now - cycles[calc].startTime;
+          }
 
-        // Increment the vals for both the active and the alternate FPS calculations
-        for (var calc in cycles) {
-          ++cycles[calc].frameCount;
-          cycles[calc].sinceStart = now - cycles[calc].startTime;
-        }
+          // Choose the correct FPS calculation, then update the exposed fps value
+          activeCycle = cycles[resetState];
+          loop.fps = Math.round(1000 / (activeCycle.sinceStart / activeCycle.frameCount) * 100) / 100;
 
-        // Choose the correct FPS calculation, then update the exposed fps value
-        activeCycle = cycles[resetState];
-        loop.fps = Math.round(1000 / (activeCycle.sinceStart / activeCycle.frameCount) * 100) / 100;
+          // If our frame counts are equal....
+          targetResetInterval = (cycles.new.frameCount === cycles.old.frameCount
+            ? resetInterval * fps // Wait our interval
+            : (resetInterval * 2) * fps); // Wait double our interval
 
-        // If our frame counts are equal....
-        targetResetInterval = (cycles.new.frameCount === cycles.old.frameCount
-          ? resetInterval * fps // Wait our interval
-          : (resetInterval * 2) * fps); // Wait double our interval
+          // If the active calculation goes over our specified interval,
+          // reset it to 0 and flag our alternate calculation to be active
+          // for the next series of animations.
+          if (activeCycle.frameCount > targetResetInterval) {
+            cycles[resetState].frameCount = 0;
+            cycles[resetState].startTime = now;
+            cycles[resetState].sinceStart = 0;
 
-        // If the active calculation goes over our specified interval,
-        // reset it to 0 and flag our alternate calculation to be active
-        // for the next series of animations.
-        if (activeCycle.frameCount > targetResetInterval) {
-          cycles[resetState].frameCount = 0;
-          cycles[resetState].startTime = now;
-          cycles[resetState].sinceStart = 0;
+            resetState = (resetState === 'new' ? 'old' : 'new');
+          }
 
-          resetState = (resetState === 'new' ? 'old' : 'new');
+          // Update the game state
+          scope.update(scope, now);
+          // Render the next frame
+          scope.render(scope, now);
         }
+      };
 
-        // Update the game state
-        scope.update(scope, now);
-        // Render the next frame
-        scope.render(scope, now);
-      }
-    };
+      // Start off main loop
+      loop.main();
 
-    // Start off main loop
-    loop.main();
-
-    return loop
+      return loop
+    }
   }
-}
 
-class Entity {
-  constructor () {
-    // Setup the defaults if no parameters are given
-    // Type represents the collision detector's handling
-    this.type = this.type || 'dynamic';
+  class Entity {
+    constructor () {
+      this.state = {
+        size: {
+          x: 10,
+          y: 10
+        },
+        pos: {
+          x: 0,
+          y: 0
+        },
+        vel: {
+          x: 0,
+          y: 0
+        },
+        accel: {
+          x: 0,
+          y: 0
+        },
+        radius: 10,
+        angle: 0
+      };
 
-    // Collision represents the type of collision
-    // another object will receive upon colliding
-    this.collision = this.collision || 'elastic';
-    this.state = {
+      this.entities = [];
+    }
 
-      size: {
-        x: 10,
-        y: 10
-      },
-      pos: {
-        x: 0,
-        y: 0
-      },
-      vel: {
-        x: 0,
-        y: 0
-      },
-      accel: {
-        x: 0,
-        y: 0
-      },
-      radius: 10,
-      angle: 0
-    };
-
-    this.entities = [];
-  }
-
-  update () {
-    // update the sub entities if there's any
-    // by firing off the update function one by one
-    for (var entity = 0; entity < this.entities.length; entity++) {
-      this.entities[entity].update();
+    update () {
+      // update the sub entities if there's any
+      // by firing off the update function one by one
+      for (var entity = 0; entity < this.entities.length; entity++) {
+        this.entities[entity].update();
+      }
+      this.state.vel.x += this.state.accel.x;
+      this.state.vel.y += this.state.accel.y;
+      this.state.pos.x += this.state.vel.x;
+      this.state.pos.y += this.state.vel.y;
     }
 
-    switch (this.type) {
-      case 'dynamic':
-        this.state.vel.x += this.state.accel.x;
-        this.state.vel.y += this.state.accel.y;
-        this.state.pos.x += this.state.vel.x;
-        this.state.pos.y += this.state.vel.y;
-        break
-      case 'kinematic':
-        this.state.vel.x += this.state.accel.x;
-        this.state.vel.y += this.state.accel.y;
-        this.state.pos.x += this.state.vel.x;
-        this.state.pos.y += this.state.vel.y;
-        break
+    render () {
+      for (var entity = 0; entity < this.entities.length; entity++) {
+        this.entities[entity].render();
+      }
     }
   }
 
-  render () {
-    for (var entity = 0; entity < this.entities.length; entity++) {
-      this.entities[entity].render();
+  class Sprite extends Entity {
+    constructor (scope, args) {
+      super();
+
+      this.scope = scope;
+      this.state = {
+        pos: args.pos || {
+          x: 0,
+          y: 0
+        },
+        crop: {
+          x: 0,
+          y: 0
+        },
+        size: args.size || {
+          x: 0,
+          y: 0
+        },
+        frames: args.frames || [],
+        angle: args.angle || 0,
+        image: args.image || new Image(),
+        delay: args.delay || 5,
+        tick: args.tick || 0,
+        orientation: args.orientation || 'horizontal'
+      };
     }
-  }
-}
 
-class Sprite extends Entity {
-  constructor (scope, args) {
-    super();
+    update () {
+      if (this.state.tick <= 0) {
+        if (this.orientation === 'vertical') {
+          this.state.crop.y = this.state.frames.shift();
+          this.state.frames.push(this.state.crop.y);
+        } else {
+          this.state.crop.x = this.state.frames.shift();
+          this.state.frames.push(this.state.crop.x);
+        }
 
-    this.scope = scope;
-    this.state = {
-      cord: args.pos || {
-        x: 0,
-        y: 0
-      },
-      pos: {
-        x: 0,
-        y: 0
-      },
-      size: args.size || {
-        x: 0,
-        y: 0
-      },
-      frames: args.frames || [],
-      angle: args.angle || 0,
-      image: args.image || new Image(),
-      delay: args.delay || 5,
-      tick: args.tick || 0,
-      orientation: args.orientation || 'horizontal'
-    };
-  }
-
-  update () {
-    if (this.state.tick <= 0) {
-      if (this.orientation === 'vertical') {
-        this.state.pos.y = this.state.frames.shift();
-        this.state.frames.push(this.state.pos.y);
-      } else {
-        this.state.pos.x = this.state.frames.shift();
-        this.state.frames.push(this.state.pos.x);
+        this.state.tick = this.state.delay;
       }
 
-      this.state.tick = this.state.delay;
+      this.state.tick--;
     }
 
-    this.state.tick--;
-  }
+    render () {
+      super.render(this);
 
-  render () {
-    super.render(this);
+      this.scope.context.save();
+      this.scope.context.translate(this.state.crop.x + (this.state.size.x / 2), this.state.crop.y + (this.state.size.y / 2));
+      this.scope.context.rotate((this.state.angle) * (Math.PI / 180));
+      this.scope.context.translate(-(this.state.crop.x + (this.state.size.x / 2)), -(this.state.crop.y + (this.state.size.y / 2)));
 
-    this.scope.context.save();
-    this.scope.context.translate(this.state.pos.x + (this.state.size.x / 2), this.state.pos.y + (this.state.size.y / 2));
-    this.scope.context.rotate((this.state.angle) * (Math.PI / 180));
-    this.scope.context.translate(-(this.state.pos.x + (this.state.size.x / 2)), -(this.state.pos.y + (this.state.size.y / 2)));
+      this.scope.context.drawImage(this.state.image,
+        (this.state.crop.x * this.state.size.x), (this.state.crop.y * this.state.size.y), this.state.size.x, this.state.size.y,
+        this.state.pos.x, this.state.pos.y, this.state.size.x, this.state.size.y);
 
-    this.scope.context.drawImage(this.state.image,
-      (this.state.pos.x * this.state.size.x), (this.state.pos.y * this.state.size.y), this.state.size.x, this.state.size.y,
-      this.state.cord.x, this.state.cord.y, this.state.size.x, this.state.size.y);
-
-    this.scope.context.restore();
+      this.scope.context.restore();
+    }
   }
-}
 
-class Loader {
-  constructor () {
-    this.rescache = {};
-  };
+  class Loader {
+    constructor () {
+      this.rescache = {};
+    };
 
-  load (res, cbk) {
-    var that = this;
-    if (res instanceof Array) {
-      res.forEach(function (i) {
-        that.rescache[i] = false;
-        that.fetch(i, cbk);
-      });
-    } else {
-      that.rescache[res] = false;
-      that.fetch(res, cbk);
+    load (res, cbk) {
+      var that = this;
+      if (res instanceof Array) {
+        res.forEach(function (i) {
+          that.rescache[i] = false;
+          that.fetch(i, cbk);
+        });
+      } else {
+        that.rescache[res] = false;
+        that.fetch(res, cbk);
+      }
     }
-  }
 
-  fetch (url, cbk) {
-    var that = this;
-    if (that.rescache[url]) {
-      return that.rescache[url]
-    } else {
-      var img = new Image();
-      img.onload = function () {
-        that.rescache[url] = img;
-        that.ready(cbk);
-      };
+    fetch (url, cbk) {
+      var that = this;
+      if (that.rescache[url]) {
+        return that.rescache[url]
+      } else {
+        var img = new Image();
+        img.onload = function () {
+          that.rescache[url] = img;
+          that.ready(cbk);
+        };
 
-      img.src = url;
+        img.src = url;
+      }
     }
-  }
 
-  ready (cbk) {
-    var that = this;
-    if (typeof cbk === 'function') {
-      var ready = true;
-      for (var item in that.rescache) {
-        if (Object.prototype.hasOwnProperty.call(that.rescache, item) && !that.rescache[item]) {
-          ready = false;
+    ready (cbk) {
+      var that = this;
+      if (typeof cbk === 'function') {
+        var ready = true;
+        for (var item in that.rescache) {
+          if (Object.prototype.hasOwnProperty.call(that.rescache, item) && !that.rescache[item]) {
+            ready = false;
+          }
         }
+
+        if (ready) cbk();
       }
-
-      if (ready) cbk();
     }
   }
-}
 
-// modified soundbox.js lib
-class Sound {
-  constructor () {
-    this.sounds = {}; // The loaded sounds and their instances
-    this.instances = []; // Sounds that are currently playing
-    this.defaultVolume = 1;
-  };
+  // modified soundbox.js lib
+  class Sound {
+    constructor () {
+      this.sounds = {}; // The loaded sounds and their instances
+      this.instances = []; // Sounds that are currently playing
+      this.defaultVolume = 1;
+    };
 
-  load (name, path, callback) {
-    this.sounds[name] = new Audio(path);
-    if (typeof callback === 'function') {
-      this.sounds[name].addEventListener('canplaythrough', callback);
-    } else {
-      return new Promise((resolve, reject) => {
-        this.sounds[name].addEventListener('canplaythrough', resolve);
-        this.sounds[name].addEventListener('error', reject);
-      })
-    }
-  };
+    load (name, path, callback) {
+      this.sounds[name] = new Audio(path);
+      if (typeof callback === 'function') {
+        this.sounds[name].addEventListener('canplaythrough', callback);
+      } else {
+        return new Promise((resolve, reject) => {
+          this.sounds[name].addEventListener('canplaythrough', resolve);
+          this.sounds[name].addEventListener('error', reject);
+        })
+      }
+    };
 
-  remove (name) {
-    if (typeof this.sounds !== 'undefined') {
-      delete this.sounds[name];
-    }
-  };
+    remove (name) {
+      if (typeof this.sounds !== 'undefined') {
+        delete this.sounds[name];
+      }
+    };
 
-  unlock (name, callback, volume, loop) {
-    var that = this;
-    var events = ['touchstart', 'touchend', 'mousedown', 'keydown'];
-    var unlock = function unlock () {
+    unlock (name, callback, volume, loop) {
+      var that = this;
+      var events = ['touchstart', 'touchend', 'mousedown', 'keydown'];
+      var unlock = function unlock () {
+        events.forEach(function (event) {
+          document.body.removeEventListener(event, unlock);
+        });
+        that.play(name, callback, volume, loop);
+      };
+
       events.forEach(function (event) {
-        document.body.removeEventListener(event, unlock);
+        document.body.addEventListener(event, unlock, false);
       });
-      that.play(name, callback, volume, loop);
     };
 
-    events.forEach(function (event) {
-      document.body.addEventListener(event, unlock, false);
-    });
-  };
+    play (name, callback, volume, loop) {
+      loop = loop || false;
 
-  play (name, callback, volume, loop) {
-    loop = loop || false;
+      if (typeof this.sounds[name] === 'undefined') {
+        console.error("Can't find sound called '" + name + "'.");
+        return false
+      }
+      var soundInstance = this.sounds[name].cloneNode(true);
+      soundInstance.volume = typeof volume === 'number' ? volume : this.defaultVolume;
+      soundInstance.loop = loop;
+      soundInstance.play();
+      this.instances.push(soundInstance);
 
-    if (typeof this.sounds[name] === 'undefined') {
-      console.error("Can't find sound called '" + name + "'.");
-      return false
+      // Don't forget to remove the instance from the instances array
+      soundInstance.addEventListener('ended', () => {
+        var index = this.instances.indexOf(soundInstance);
+        if (index !== -1) this.instances.splice(index, 1);
+      });
+
+      // Attach the callback / promise
+      if (typeof callback === 'function') {
+        soundInstance.addEventListener('ended', callback);
+        return true
+      }
+      return new Promise((resolve, reject) => soundInstance.addEventListener('ended', resolve))
+    };
+
+    stopAll () {
+      // Pause all currently playing sounds
+
+      // Shallow clone the array to avoid issues with instances auto-removing themselves
+      var instancesToStop = this.instances.slice();
+      for (var instance of instancesToStop) {
+        instance.pause();
+        instance.dispatchEvent(new Event('ended'));
+      }
     }
-    var soundInstance = this.sounds[name].cloneNode(true);
-    soundInstance.volume = typeof volume === 'number' ? volume : this.defaultVolume;
-    soundInstance.loop = loop;
-    soundInstance.play();
-    this.instances.push(soundInstance);
+  }
 
-    // Don't forget to remove the instance from the instances array
-    soundInstance.addEventListener('ended', () => {
-      var index = this.instances.indexOf(soundInstance);
-      if (index !== -1) this.instances.splice(index, 1);
-    });
+  // Craters.js micro game framework
 
-    // Attach the callback / promise
-    if (typeof callback === 'function') {
-      soundInstance.addEventListener('ended', callback);
-      return true
-    }
-    return new Promise((resolve, reject) => soundInstance.addEventListener('ended', resolve))
+  const boundary = function numberboundary (min, max) {
+    return Math.min(Math.max(this, min), max)
   };
+  // Expose methods
+  Number.prototype.boundary = boundary;
 
-  stopAll () {
-    // Pause all currently playing sounds
-
-    // Shallow clone the array to avoid issues with instances auto-removing themselves
-    var instancesToStop = this.instances.slice();
-    for (var instance of instancesToStop) {
-      instance.pause();
-      instance.dispatchEvent(new Event('ended'));
+  class Craters {
+    static version () {
+      return '0.0.0.4'
     }
   }
-}
 
-// Craters.js micro game framework
+  exports.Craters = Craters;
+  exports.Entity = Entity;
+  exports.Game = Game;
+  exports.Loader = Loader;
+  exports.Sound = Sound;
+  exports.Sprite = Sprite;
 
-const boundary = function numberboundary (min, max) {
-  return Math.min(Math.max(this, min), max)
-};
-// Expose methods
-Number.prototype.boundary = boundary;
+  return exports;
 
-class Craters {
-  static version () {
-    return '0.0.0.3'
-  }
-}
-
-export { Craters, Entity, Game, Loader, Sound, Sprite };
+}({}));

dist/craters.min.js

@@ -1,1 +0,1 @@
-!function(t){var e={};function s(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=t,s.c=e,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(i,n,function(e){return t[e]}.bind(null,n));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=0)}([function(t,e,s){"use strict";s.r(e),s.d(e,"Craters",function(){return h}),s.d(e,"Entity",function(){return o}),s.d(e,"Game",function(){return i}),s.d(e,"Loader",function(){return a}),s.d(e,"Sound",function(){return c}),s.d(e,"Sprite",function(){return r});class i{constructor(t,e,s,i,o){this.container=t||"body",this.constants={gravity:{x:0,y:100},width:e,height:s,frames:i,debug:o,bgcolor:"rgba(0,0,0,0)",color:"#ff0",font:"1em Arial"},this.state={entities:[]};var r=document.createElement("canvas"),a=r.getContext("2d"),c=window.devicePixelRatio/["webkitBackingStorePixelRatio","mozBackingStorePixelRatio","msBackingStorePixelRatio","oBackingStorePixelRatio","backingStorePixelRatio"].reduce(function(t,e){return Object.prototype.hasOwnProperty.call(a,e)?a[e]:1});r.width=Math.round(this.constants.width*c),r.height=Math.round(this.constants.height*c),r.style.width=this.constants.width+"px",r.style.height=this.constants.height+"px",a.setTransform(c,0,0,c,0,0),this.viewport=r,this.viewport.id="gameViewport",this.context=this.viewport.getContext("2d"),this.container=document.querySelector(this.container),this.container.insertBefore(this.viewport,this.container.firstChild),this.loop=new n(this),this.intitiate()}intitiate(){}update(t,e){for(var s=(t.state||[]).entities,i=0;i<s.length;i++)s[i].update()}render(t,e){var s=t.constants.width,i=t.constants.height;t.context.font=t.constants.font,t.context.save(),t.context.clearRect(0,0,s,i),t.context.fillStyle=t.constants.bgcolor,t.context.fillRect(0,0,s,i),t.context.fill(),t.context.restore(),t.context.fillStyle=t.constants.color,t.constants.debug&&t.context.fillText("fps : "+t.loop.fps,s-100,50);for(var n=(t.state||[]).entities,o=0;o<n.length;o++)n[o].render()}}class n{constructor(t){return this.loop(t)}loop(t){var e={},s=t.constants.frames,i=1e3/s,n=window.performance.now(),o={new:{frameCount:0,startTime:n,sinceStart:0},old:{frameCount:0,startTime:n,sineStart:0}},r="new";return e.fps=0,e.main=function(a){e.stopLoop=window.requestAnimationFrame(e.main);var c,h,u=a,d=u-n;if(d>i){for(var l in n=u-d%i,o)++o[l].frameCount,o[l].sinceStart=u-o[l].startTime;c=o[r],e.fps=Math.round(1e3/(c.sinceStart/c.frameCount)*100)/100,h=o.new.frameCount===o.old.frameCount?5*s:10*s,c.frameCount>h&&(o[r].frameCount=0,o[r].startTime=u,o[r].sinceStart=0,r="new"===r?"old":"new"),t.update(t,u),t.render(t,u)}},e.main(),e}}class o{constructor(){this.type=this.type||"dynamic",this.collision=this.collision||"elastic",this.state={size:{x:10,y:10},pos:{x:0,y:0},vel:{x:0,y:0},accel:{x:0,y:0},radius:10,angle:0},this.entities=[]}update(){for(var t=0;t<this.entities.length;t++)this.entities[t].update();switch(this.type){case"dynamic":case"kinematic":this.state.vel.x+=this.state.accel.x,this.state.vel.y+=this.state.accel.y,this.state.pos.x+=this.state.vel.x,this.state.pos.y+=this.state.vel.y}}render(){for(var t=0;t<this.entities.length;t++)this.entities[t].render()}}class r extends o{constructor(t,e){super(),this.scope=t,this.state={cord:e.pos||{x:0,y:0},pos:{x:0,y:0},size:e.size||{x:0,y:0},frames:e.frames||[],angle:e.angle||0,image:e.image||new Image,delay:e.delay||5,tick:e.tick||0,orientation:e.orientation||"horizontal"}}update(){this.state.tick<=0&&("vertical"===this.orientation?(this.state.pos.y=this.state.frames.shift(),this.state.frames.push(this.state.pos.y)):(this.state.pos.x=this.state.frames.shift(),this.state.frames.push(this.state.pos.x)),this.state.tick=this.state.delay),this.state.tick--}render(){super.render(this),this.scope.context.save(),this.scope.context.translate(this.state.pos.x+this.state.size.x/2,this.state.pos.y+this.state.size.y/2),this.scope.context.rotate(this.state.angle*(Math.PI/180)),this.scope.context.translate(-(this.state.pos.x+this.state.size.x/2),-(this.state.pos.y+this.state.size.y/2)),this.scope.context.drawImage(this.state.image,this.state.pos.x*this.state.size.x,this.state.pos.y*this.state.size.y,this.state.size.x,this.state.size.y,this.state.cord.x,this.state.cord.y,this.state.size.x,this.state.size.y),this.scope.context.restore()}}class a{constructor(){this.rescache={}}load(t,e){var s=this;t instanceof Array?t.forEach(function(t){s.rescache[t]=!1,s.fetch(t,e)}):(s.rescache[t]=!1,s.fetch(t,e))}fetch(t,e){var s=this;if(s.rescache[t])return s.rescache[t];var i=new Image;i.onload=function(){s.rescache[t]=i,s.ready(e)},i.src=t}ready(t){if("function"==typeof t){var e=!0;for(var s in this.rescache)Object.prototype.hasOwnProperty.call(this.rescache,s)&&!this.rescache[s]&&(e=!1);e&&t()}}}class c{constructor(){this.sounds={},this.instances=[],this.defaultVolume=1}load(t,e,s){if(this.sounds[t]=new Audio(e),"function"!=typeof s)return new Promise((e,s)=>{this.sounds[t].addEventListener("canplaythrough",e),this.sounds[t].addEventListener("error",s)});this.sounds[t].addEventListener("canplaythrough",s)}remove(t){void 0!==this.sounds&&delete this.sounds[t]}unlock(t,e,s,i){var n=this,o=["touchstart","touchend","mousedown","keydown"],r=function r(){o.forEach(function(t){document.body.removeEventListener(t,r)}),n.play(t,e,s,i)};o.forEach(function(t){document.body.addEventListener(t,r,!1)})}play(t,e,s,i){if(i=i||!1,void 0===this.sounds[t])return console.error("Can't find sound called '"+t+"'."),!1;var n=this.sounds[t].cloneNode(!0);return n.volume="number"==typeof s?s:this.defaultVolume,n.loop=i,n.play(),this.instances.push(n),n.addEventListener("ended",()=>{var t=this.instances.indexOf(n);-1!==t&&this.instances.splice(t,1)}),"function"==typeof e?(n.addEventListener("ended",e),!0):new Promise((t,e)=>n.addEventListener("ended",t))}stopAll(){var t=this.instances.slice();for(var e of t)e.pause(),e.dispatchEvent(new Event("ended"))}}Number.prototype.boundary=function(t,e){return Math.min(Math.max(this,t),e)};class h{static version(){return"0.0.0.3"}}}]);
+!function(t){var e={};function s(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=t,s.c=e,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(i,n,function(e){return t[e]}.bind(null,n));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=0)}([function(t,e){!function(t){"use strict";class e{constructor(t){var e={},s=t.state.frames,i=1e3/s,n=window.performance.now(),r={new:{frameCount:0,startTime:n,sinceStart:0},old:{frameCount:0,startTime:n,sineStart:0}},o="new";return e.fps=0,e.main=function(a){e.stopLoop=window.requestAnimationFrame(e.main);var c,h,u=a,d=u-n;if(d>i){for(var l in n=u-d%i,r)++r[l].frameCount,r[l].sinceStart=u-r[l].startTime;c=r[o],e.fps=Math.round(1e3/(c.sinceStart/c.frameCount)*100)/100,h=r.new.frameCount===r.old.frameCount?5*s:10*s,c.frameCount>h&&(r[o].frameCount=0,r[o].startTime=u,r[o].sinceStart=0,o="new"===o?"old":"new"),t.update(t,u),t.render(t,u)}},e.main(),e}}class s{constructor(){this.state={size:{x:10,y:10},pos:{x:0,y:0},vel:{x:0,y:0},accel:{x:0,y:0},radius:10,angle:0},this.entities=[]}update(){for(var t=0;t<this.entities.length;t++)this.entities[t].update();this.state.vel.x+=this.state.accel.x,this.state.vel.y+=this.state.accel.y,this.state.pos.x+=this.state.vel.x,this.state.pos.y+=this.state.vel.y}render(){for(var t=0;t<this.entities.length;t++)this.entities[t].render()}}Number.prototype.boundary=function(t,e){return Math.min(Math.max(this,t),e)};t.Craters=class{static version(){return"0.0.0.4"}},t.Entity=s,t.Game=class{constructor(t,s,i,n,r){this.container=t||"body",this.state={width:s,height:i,frames:n,debug:r,bgcolor:"rgba(0,0,0,0)",color:"#ff0",font:"1em Arial"},this.entities=[];var o=document.createElement("canvas"),a=o.getContext("2d"),c=window.devicePixelRatio/["webkitBackingStorePixelRatio","mozBackingStorePixelRatio","msBackingStorePixelRatio","oBackingStorePixelRatio","backingStorePixelRatio"].reduce(function(t,e){return Object.prototype.hasOwnProperty.call(a,e)?a[e]:1});o.width=Math.round(this.state.width*c),o.height=Math.round(this.state.height*c),o.style.width=this.state.width+"px",o.style.height=this.state.height+"px",a.setTransform(c,0,0,c,0,0),this.viewport=o,this.viewport.id="gameViewport",this.context=this.viewport.getContext("2d"),this.container=document.querySelector(this.container),this.container.insertBefore(this.viewport,this.container.firstChild),this.loop=new e(this),this.intitiate()}intitiate(){}update(t,e){for(var s=0;s<this.entities.length;s++)this.entities[s].update()}render(t,e){var s=t.state.width,i=t.state.height;t.context.font=t.state.font,t.context.save(),t.context.clearRect(0,0,s,i),t.context.fillStyle=t.state.bgcolor,t.context.fillRect(0,0,s,i),t.context.fill(),t.context.restore(),t.context.fillStyle=t.state.color,t.state.debug&&t.context.fillText("fps : "+t.loop.fps,s-100,50);for(var n=0;n<this.entities.length;n++)this.entities[n].render()}},t.Loader=class{constructor(){this.rescache={}}load(t,e){var s=this;t instanceof Array?t.forEach(function(t){s.rescache[t]=!1,s.fetch(t,e)}):(s.rescache[t]=!1,s.fetch(t,e))}fetch(t,e){var s=this;if(s.rescache[t])return s.rescache[t];var i=new Image;i.onload=function(){s.rescache[t]=i,s.ready(e)},i.src=t}ready(t){if("function"==typeof t){var e=!0;for(var s in this.rescache)Object.prototype.hasOwnProperty.call(this.rescache,s)&&!this.rescache[s]&&(e=!1);e&&t()}}},t.Sound=class{constructor(){this.sounds={},this.instances=[],this.defaultVolume=1}load(t,e,s){if(this.sounds[t]=new Audio(e),"function"!=typeof s)return new Promise((e,s)=>{this.sounds[t].addEventListener("canplaythrough",e),this.sounds[t].addEventListener("error",s)});this.sounds[t].addEventListener("canplaythrough",s)}remove(t){void 0!==this.sounds&&delete this.sounds[t]}unlock(t,e,s,i){var n=this,r=["touchstart","touchend","mousedown","keydown"],o=function o(){r.forEach(function(t){document.body.removeEventListener(t,o)}),n.play(t,e,s,i)};r.forEach(function(t){document.body.addEventListener(t,o,!1)})}play(t,e,s,i){if(i=i||!1,void 0===this.sounds[t])return console.error("Can't find sound called '"+t+"'."),!1;var n=this.sounds[t].cloneNode(!0);return n.volume="number"==typeof s?s:this.defaultVolume,n.loop=i,n.play(),this.instances.push(n),n.addEventListener("ended",()=>{var t=this.instances.indexOf(n);-1!==t&&this.instances.splice(t,1)}),"function"==typeof e?(n.addEventListener("ended",e),!0):new Promise((t,e)=>n.addEventListener("ended",t))}stopAll(){var t=this.instances.slice();for(var e of t)e.pause(),e.dispatchEvent(new Event("ended"))}},t.Sprite=class extends s{constructor(t,e){super(),this.scope=t,this.state={pos:e.pos||{x:0,y:0},crop:{x:0,y:0},size:e.size||{x:0,y:0},frames:e.frames||[],angle:e.angle||0,image:e.image||new Image,delay:e.delay||5,tick:e.tick||0,orientation:e.orientation||"horizontal"}}update(){this.state.tick<=0&&("vertical"===this.orientation?(this.state.crop.y=this.state.frames.shift(),this.state.frames.push(this.state.crop.y)):(this.state.crop.x=this.state.frames.shift(),this.state.frames.push(this.state.crop.x)),this.state.tick=this.state.delay),this.state.tick--}render(){super.render(this),this.scope.context.save(),this.scope.context.translate(this.state.crop.x+this.state.size.x/2,this.state.crop.y+this.state.size.y/2),this.scope.context.rotate(this.state.angle*(Math.PI/180)),this.scope.context.translate(-(this.state.crop.x+this.state.size.x/2),-(this.state.crop.y+this.state.size.y/2)),this.scope.context.drawImage(this.state.image,this.state.crop.x*this.state.size.x,this.state.crop.y*this.state.size.y,this.state.size.x,this.state.size.y,this.state.pos.x,this.state.pos.y,this.state.size.x,this.state.size.y),this.scope.context.restore()}}}({})}]);

examples/sprites-demo/src/game.js

@@ -9,11 +9,11 @@ import { Game, Entity, Sprite, Loader } from './../../../app/craters/craters.js'
     this.score = '0000'
-    this.constants.color = 'rgba(255,255,255,1)'
-    this.constants.bgcolor = 'rgba(0,0,0,0.001)'
-    this.constants.font = '1.5em Arial'
+    this.state.color = 'rgba(255,255,255,1)'
+    this.state.bgcolor = 'rgba(0,0,0,0.001)'
+    this.state.font = '1.5em Arial'
 
     for (var i = 0; i < 5; i++) {
-      this.state.entities.push(new boltbug(this, { pos: { x: (Math.random() * this.constants.width), y: (Math.random() * this.constants.height) } }))
+      this.entities.push(new boltbug(this, { pos: { x: (Math.random() * this.state.width), y: (Math.random() * this.state.height) } }))
     }
 
-    this.state.entities.push(new ladybug(this, 'f18'))
+    this.entities.push(new ladybug(this, 'f18'))
   }
@@ -32,5 +32,5 @@
     this.state.size = { x: 196, y: 218 }
-    this.state.pos = { x: (scope.constants.width / 2) - (this.state.size.x / 2), y: (scope.constants.height - this.state.size.y) }
+    this.state.pos = { x: (scope.state.width / 2) - (this.state.size.x / 2), y: (scope.state.height - this.state.size.y) }
 
-    scope.state.entities.push(new Sprite(scope, { pos: this.state.pos, size: this.state.size, frames: [0, 1, 2], image: media.fetch('./src/media/bug.png') }))
+    scope.entities.push(new Sprite(scope, { pos: this.state.pos, size: this.state.size, frames: [0, 1, 2], image: media.fetch('./src/media/bug.png') }))
   }
@@ -46,3 +46,3 @@ }
 
-    scope.state.entities.push(new Sprite(scope, { size: { x: 214, y: 282 }, pos: this.state.pos, frames: [0, 1, 2], image: media.fetch('./src/media/bolt.png'), angle: this.state.angle }))
+    scope.entities.push(new Sprite(scope, { size: { x: 214, y: 282 }, pos: this.state.pos, frames: [0, 1, 2], image: media.fetch('./src/media/bolt.png'), angle: this.state.angle }))
   }
@@ -49,0 +49,0 @@ }

package.json

 {
   "name": "craters.js",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A Compact Game Engine that helps you build fast, modern HTML5 Games",
@@ -34,2 +34,2 @@ "main": "./index.js",
   }
-}
+}

README.md

@@ -57,8 +57,5 @@ # craters.js ☄️
 'use strict';
-import { Game } from 'craters.js'
+import { Game } from './craters/craters.js'
 
 class mygame extends Game {
-    intitiate() {
-        super.intitiate();
-    }
 
@@ -68,3 +65,3 @@ render() {
         this.context.font = '2em Arial'
-        this.context.fillText('It\'s working.️', 65, (this.constants.height / 2), (this.constants.width))
+        this.context.fillText('It\'s working.️', 65, (this.state.height / 2), (this.state.width))
     }
@@ -71,0 +68,0 @@ }

rollup.config.js

 module.exports = {
   input: './app/craters/craters.js',
-  output: {
+  output: [{
     file: './dist/craters.js',
+    format: 'iife',
+    name: 'cg'
+  },
+  {
+    file: './dist/craters.mjs',
     format: 'esm'
-  }
-}
+  }]
+}

webpack.config.js

@@ -5,9 +5,10 @@ const path = require('path')
   entry: {
-    './build/game': './app/game.js',
-    './dist/craters': './dist/craters'
+    './build/game.min.js': './app/game.js',
+    './dist/craters.min.js': './dist/craters.js',
+    './dist/craters.min.mjs': './dist/craters.mjs'
   },
   output: {
     path: path.resolve(__dirname, './'),
-    filename: '[name].min.js'
+    filename: '[name]'
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

1390995

increased by25.35%

Number of package files

44

increased by18.92%

Lines of code

1638

increased by24.09%

Worsened metrics

Number of lines in readme file

70

decreased by-4.11%

No dependency changes