craters.js - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

app/craters/craters.js

@@ -6,4 +6,4 @@ // Craters.js micro game framework
 
-import { Game } from './game.js'
-import { Entity, Sprite } from './entity.js'
+import { Canvas, Loop, Collision } from './system.js'
+import { Entity, Game, Sprite } from './entity.js'
 import { Loader } from './loader.js'
@@ -20,6 +20,6 @@ import { Sound } from './sound.js'
   static version () {
-    return '0.0.0.4'
+    return '0.0.0.5'
   }
 }
 
-export { Craters, Loader, Game, Entity, Sprite, Sound }
+export { Craters, Loader, Game, Canvas, Loop, Entity, Sprite, Collision, Sound }

app/craters/entity.js

@@ -1,3 +0,38 @@
-class Entity {
+class Game {
+  constructor (container, width, height, fps, debug) {
+    this.entities = []
+    this.state = {
+      container: container,
+      size: {
+	      x: 10,
+	      y: 10
+      },
+      
+      bgcolor: 'rgba(0,0,0,0)',
+      color: '#ff0',
+      font: '1em Arial'
+    }
+  }
+
+  update () {
+    for (var entity = 0; entity < this.entities.length; entity++) {
+      // Fire off each active entities `render` method
+      this.entities[entity].update()
+    }
+  }
+  
+  render () {
+	for (var entity = 0; entity < this.entities.length; entity++) {
+    // Fire off each active entities `render` method
+    this.entities[entity].render() }
+  }
+  
+  clearContext (context, size) {
+	  context.clearRect(0, 0, size.x, size.y)
+  }
+}
+
+class Entity extends Game {
   constructor () {
+    super();
     this.state = {
@@ -23,12 +58,7 @@ size: {
     }
-
-    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()
-    }
+    super.update ();
+    
     this.state.vel.x += this.state.accel.x
@@ -39,8 +69,2 @@ this.state.vel.y += this.state.accel.y
   }
-
-  render () {
-    for (var entity = 0; entity < this.entities.length; entity++) {
-      this.entities[entity].render()
-    }
-  }
 }
@@ -53,25 +77,26 @@
     this.scope = scope
-    this.state = {
-      pos: args.pos || {
+    this.state.pos = args.pos || {
         x: 0,
         y: 0
-      },
-      crop: {
+      }
+      this.state.crop = {
         x: 0,
         y: 0
-      },
-      size: args.size || {
+      }
+      this.state.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'
+      }
+      
+      this.state.frames = args.frames || []
+      this.state.angle = args.angle || 0
+      this.state.image = args.image || new Image()
+      this.state.delay = args.delay || 5
+      this.state.tick = args.tick || 0
+      this.state.orientation = args.orientation || 'horizontal'
     }
-  }
 
   update () {
+  super.update ();
+  
     if (this.state.tick <= 0) {
@@ -93,3 +118,3 @@ if (this.orientation === 'vertical') {
   render () {
-    super.render(this)
+    super.render()
 
@@ -109,2 +134,2 @@ this.scope.context.save()
 
-export { Entity, Sprite }
+export { Entity, Game, Sprite }

app/game.js

 'use strict';
-import { Game } from './craters/craters.js'
+import { Game, Canvas, Loop } from './craters/craters.js'
 
 class mygame extends Game {
-
+	constructor (container, width, height){
+		super ();
+		
+		this.state.size = {x: width, y: height}
+		this.viewport = new Canvas(this.state.size.x, this.state.size.y, container);
+		this.context = this.viewport.getContext('2d')
+		this.loop = new Loop(this, 60)
+	}
+	
     render () {
-        super.render(this)
+        super.render()
+        this.clearContext(this.context, this.state.size)
+        
         this.context.font = '2em Arial'
-        this.context.fillText('It\'s working.️', 65, (this.state.height / 2), (this.state.width))
+        this.context.fillText('It\'s working.️', 65, (this.state.size.y / 2), (this.state.size.x))
     }
@@ -11,0 +21,0 @@ }

build/game.min.js

@@ -1,1 +0,161 @@
-!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)}});
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "./app/game.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./app/craters/craters.js":
+/*!********************************!*\
+  !*** ./app/craters/craters.js ***!
+  \********************************/
+/*! exports provided: Craters, Loader, Game, Canvas, Loop, Entity, Sprite, Collision, Sound */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Craters\", function() { return Craters; });\n/* harmony import */ var _system_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./system.js */ \"./app/craters/system.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Canvas\", function() { return _system_js__WEBPACK_IMPORTED_MODULE_0__[\"Canvas\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Loop\", function() { return _system_js__WEBPACK_IMPORTED_MODULE_0__[\"Loop\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Collision\", function() { return _system_js__WEBPACK_IMPORTED_MODULE_0__[\"Collision\"]; });\n\n/* harmony import */ var _entity_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./entity.js */ \"./app/craters/entity.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Game\", function() { return _entity_js__WEBPACK_IMPORTED_MODULE_1__[\"Game\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Entity\", function() { return _entity_js__WEBPACK_IMPORTED_MODULE_1__[\"Entity\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Sprite\", function() { return _entity_js__WEBPACK_IMPORTED_MODULE_1__[\"Sprite\"]; });\n\n/* harmony import */ var _loader_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loader.js */ \"./app/craters/loader.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Loader\", function() { return _loader_js__WEBPACK_IMPORTED_MODULE_2__[\"Loader\"]; });\n\n/* harmony import */ var _sound_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sound.js */ \"./app/craters/sound.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"Sound\", function() { return _sound_js__WEBPACK_IMPORTED_MODULE_3__[\"Sound\"]; });\n\n// Craters.js micro game framework\n// This module contains the basics fundamental starting point calling game loop, which handles\n// updating the game state and re-rendering the canvas\n// (using the updated state) at the configured FPS.\n\n\n\n\n\n\nconst boundary = function numberboundary (min, max) {\n  return Math.min(Math.max(this, min), max)\n}\n// Expose methods\nNumber.prototype.boundary = boundary\n\nclass Craters {\n  static version () {\n    return '0.0.0.5'\n  }\n}\n\n\n\n//# sourceURL=webpack:///./app/craters/craters.js?");
+
+/***/ }),
+
+/***/ "./app/craters/entity.js":
+/*!*******************************!*\
+  !*** ./app/craters/entity.js ***!
+  \*******************************/
+/*! exports provided: Entity, Game, Sprite */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Entity\", function() { return Entity; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Game\", function() { return Game; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Sprite\", function() { return Sprite; });\nclass Game {\n  constructor (container, width, height, fps, debug) {\n    this.entities = []\n    this.state = {\n      container: container,\n      size: {\n\t      x: 10,\n\t      y: 10\n      },\n      \n      bgcolor: 'rgba(0,0,0,0)',\n      color: '#ff0',\n      font: '1em Arial'\n    }\n  }\n\n  update () {\n    for (var entity = 0; entity < this.entities.length; entity++) {\n      // Fire off each active entities `render` method\n      this.entities[entity].update()\n    }\n  }\n  \n  render () {\n\tfor (var entity = 0; entity < this.entities.length; entity++) {\n    // Fire off each active entities `render` method\n    this.entities[entity].render() }\n  }\n  \n  clearContext (context, size) {\n\t  context.clearRect(0, 0, size.x, size.y)\n  }\n}\n\nclass Entity extends Game {\n  constructor () {\n    super();\n    this.state = {\n      size: {\n        x: 10,\n        y: 10\n      },\n      pos: {\n        x: 0,\n        y: 0\n      },\n      vel: {\n        x: 0,\n        y: 0\n      },\n      accel: {\n        x: 0,\n        y: 0\n      },\n      radius: 10,\n      angle: 0\n    }\n  }\n\n  update () {\n    super.update ();\n    \n    this.state.vel.x += this.state.accel.x\n    this.state.vel.y += this.state.accel.y\n    this.state.pos.x += this.state.vel.x\n    this.state.pos.y += this.state.vel.y\n  }\n}\n\nclass Sprite extends Entity {\n  constructor (scope, args) {\n    super()\n\n    this.scope = scope\n    this.state.pos = args.pos || {\n        x: 0,\n        y: 0\n      }\n      this.state.crop = {\n        x: 0,\n        y: 0\n      }\n      this.state.size = args.size || {\n        x: 0,\n        y: 0\n      }\n      \n      this.state.frames = args.frames || []\n      this.state.angle = args.angle || 0\n      this.state.image = args.image || new Image()\n      this.state.delay = args.delay || 5\n      this.state.tick = args.tick || 0\n      this.state.orientation = args.orientation || 'horizontal'\n    }\n\n  update () {\n  super.update ();\n  \n    if (this.state.tick <= 0) {\n      if (this.orientation === 'vertical') {\n        this.state.crop.y = this.state.frames.shift()\n        this.state.frames.push(this.state.crop.y)\n      } else {\n        this.state.crop.x = this.state.frames.shift()\n        this.state.frames.push(this.state.crop.x)\n      }\n\n      this.state.tick = this.state.delay\n    }\n\n    this.state.tick--\n  }\n\n  render () {\n    super.render()\n\n    this.scope.context.save()\n    this.scope.context.translate(this.state.crop.x + (this.state.size.x / 2), this.state.crop.y + (this.state.size.y / 2))\n    this.scope.context.rotate((this.state.angle) * (Math.PI / 180))\n    this.scope.context.translate(-(this.state.crop.x + (this.state.size.x / 2)), -(this.state.crop.y + (this.state.size.y / 2)))\n\n    this.scope.context.drawImage(this.state.image,\n      (this.state.crop.x * this.state.size.x), (this.state.crop.y * this.state.size.y), this.state.size.x, this.state.size.y,\n      this.state.pos.x, this.state.pos.y, this.state.size.x, this.state.size.y)\n\n    this.scope.context.restore()\n  }\n}\n\n\n\n//# sourceURL=webpack:///./app/craters/entity.js?");
+
+/***/ }),
+
+/***/ "./app/craters/loader.js":
+/*!*******************************!*\
+  !*** ./app/craters/loader.js ***!
+  \*******************************/
+/*! exports provided: Loader */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Loader\", function() { return Loader; });\nclass Loader {\n  constructor () {\n    this.rescache = {}\n  };\n\n  load (res, cbk) {\n    var that = this\n    if (res instanceof Array) {\n      res.forEach(function (i) {\n        that.rescache[i] = false\n        that.fetch(i, cbk)\n      })\n    } else {\n      that.rescache[res] = false\n      that.fetch(res, cbk)\n    }\n  }\n\n  fetch (url, cbk) {\n    var that = this\n    if (that.rescache[url]) {\n      return that.rescache[url]\n    } else {\n      var img = new Image()\n      img.onload = function () {\n        that.rescache[url] = img\n        that.ready(cbk)\n      }\n\n      img.src = url\n    }\n  }\n\n  ready (cbk) {\n    var that = this\n    if (typeof cbk === 'function') {\n      var ready = true\n      for (var item in that.rescache) {\n        if (Object.prototype.hasOwnProperty.call(that.rescache, item) && !that.rescache[item]) {\n          ready = false\n        }\n      }\n\n      if (ready) cbk()\n    }\n  }\n}\n\n\n\n\n//# sourceURL=webpack:///./app/craters/loader.js?");
+
+/***/ }),
+
+/***/ "./app/craters/sound.js":
+/*!******************************!*\
+  !*** ./app/craters/sound.js ***!
+  \******************************/
+/*! exports provided: Sound */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Sound\", function() { return Sound; });\n// modified soundbox.js lib\nclass Sound {\n  constructor () {\n    this.sounds = {} // The loaded sounds and their instances\n    this.instances = [] // Sounds that are currently playing\n    this.defaultVolume = 1\n  };\n\n  load (name, path, callback) {\n    this.sounds[name] = new Audio(path)\n    if (typeof callback === 'function') {\n      this.sounds[name].addEventListener('canplaythrough', callback)\n    } else {\n      return new Promise((resolve, reject) => {\n        this.sounds[name].addEventListener('canplaythrough', resolve)\n        this.sounds[name].addEventListener('error', reject)\n      })\n    }\n  };\n\n  remove (name) {\n    if (typeof this.sounds !== 'undefined') {\n      delete this.sounds[name]\n    }\n  };\n\n  unlock (name, callback, volume, loop) {\n    var that = this\n    var events = ['touchstart', 'touchend', 'mousedown', 'keydown']\n    var unlock = function unlock () {\n      events.forEach(function (event) {\n        document.body.removeEventListener(event, unlock)\n      })\n      that.play(name, callback, volume, loop)\n    }\n\n    events.forEach(function (event) {\n      document.body.addEventListener(event, unlock, false)\n    })\n  };\n\n  play (name, callback, volume, loop) {\n    loop = loop || false\n\n    if (typeof this.sounds[name] === 'undefined') {\n      console.error(\"Can't find sound called '\" + name + \"'.\")\n      return false\n    };\n\n    var soundInstance = this.sounds[name].cloneNode(true)\n    soundInstance.volume = typeof volume === 'number' ? volume : this.defaultVolume\n    soundInstance.loop = loop\n    soundInstance.play()\n    this.instances.push(soundInstance)\n\n    // Don't forget to remove the instance from the instances array\n    soundInstance.addEventListener('ended', () => {\n      var index = this.instances.indexOf(soundInstance)\n      if (index !== -1) this.instances.splice(index, 1)\n    })\n\n    // Attach the callback / promise\n    if (typeof callback === 'function') {\n      soundInstance.addEventListener('ended', callback)\n      return true\n    };\n\n    return new Promise((resolve, reject) => soundInstance.addEventListener('ended', resolve))\n  };\n\n  stopAll () {\n    // Pause all currently playing sounds\n\n    // Shallow clone the array to avoid issues with instances auto-removing themselves\n    var instancesToStop = this.instances.slice()\n    for (var instance of instancesToStop) {\n      instance.pause()\n      instance.dispatchEvent(new Event('ended'))\n    }\n  }\n};\n\n\n\n\n//# sourceURL=webpack:///./app/craters/sound.js?");
+
+/***/ }),
+
+/***/ "./app/craters/system.js":
+/*!*******************************!*\
+  !*** ./app/craters/system.js ***!
+  \*******************************/
+/*! exports provided: Canvas, Loop, Collision */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Canvas\", function() { return Canvas; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Loop\", function() { return Loop; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Collision\", function() { return Collision; });\n// Rect collision tests the edges of each rect to\n// test whether the objects are overlapping the other\nclass Collision {\n\tstatic detector (collider, collidee) {\n\t    // Store the collider and collidee edges\n\t    var l1 = collider.state.pos.x;\n\t    var t1 = collider.state.pos.y;\n\t    var r1 = l1 + collider.state.size.x;\n\t    var b1 = t1 + collider.state.size.y;\n\t    \n\t    var l2 = collidee.state.pos.x;\n\t    var t2 = collidee.state.pos.y;\n\t    var r2 = l2 + collidee.state.size.x;\n\t    var b2 = t2 + collidee.state.size.y;\n\t    \n\t    // If the any of the edges are beyond any of the\n\t    // others, then we know that the box cannot be\n\t    // colliding\n\t    if (b1 < t2 || t1 > b2 || r1 < l2 || l1 > r2) {\n\t        return false;\n\t    }\n\t    \n\t    // If the algorithm made it here, it had to collide\n\t    return true;\n    }\n}\n\n// Game Loop Module\n// This module contains the game loop, which handles\n// updating the game state and re-rendering the canvas\n// (using the updated state) at the configured FPS.\nclass Loop {\n  constructor (scope, fps) {\n    var loop = {}\n    // Initialize timer variables so we can calculate FPS\n    var fpsInterval = 1000 / fps\n    var before = window.performance.now()\n    // Set up an object to contain our alternating FPS calculations\n    var cycles = {\n      new: {\n        frameCount: 0,\n        startTime: before,\n        sinceStart: 0\n      },\n      old: {\n        frameCount: 0,\n        startTime: before,\n        sineStart: 0\n      }\n    }\n\n    // Alternating Frame Rate vars\n    var resetInterval = 5\n    var resetState = 'new'\n\n    loop.fps = 0\n\n    // Main game rendering loop\n    loop.main = function mainLoop (tframe) {\n      // Request a new Animation Frame\n      // setting to `stopLoop` so animation can be stopped via\n      // `window.cancelAnimationFrame( loop.stopLoop )`\n      loop.stopLoop = window.requestAnimationFrame(loop.main)\n\n      // How long ago since last loop?\n      var now = tframe\n      var elapsed = now - before\n      var activeCycle\n      var targetResetInterval\n\n      // If it's been at least our desired interval, render\n      if (elapsed > fpsInterval) {\n        // Set before = now for next frame, also adjust for\n        // specified fpsInterval not being a multiple of rAF's interval (16.7ms)\n        // ( http://stackoverflow.com/a/19772220 )\n        before = now - (elapsed % fpsInterval)\n\n        // Increment the vals for both the active and the alternate FPS calculations\n        for (var calc in cycles) {\n          ++cycles[calc].frameCount\n          cycles[calc].sinceStart = now - cycles[calc].startTime\n        }\n\n        // Choose the correct FPS calculation, then update the exposed fps value\n        activeCycle = cycles[resetState]\n        loop.fps = Math.round(1000 / (activeCycle.sinceStart / activeCycle.frameCount) * 100) / 100\n\n        // If our frame counts are equal....\n        targetResetInterval = (cycles.new.frameCount === cycles.old.frameCount\n          ? resetInterval * fps // Wait our interval\n          : (resetInterval * 2) * fps) // Wait double our interval\n\n        // If the active calculation goes over our specified interval,\n        // reset it to 0 and flag our alternate calculation to be active\n        // for the next series of animations.\n        if (activeCycle.frameCount > targetResetInterval) {\n          cycles[resetState].frameCount = 0\n          cycles[resetState].startTime = now\n          cycles[resetState].sinceStart = 0\n\n          resetState = (resetState === 'new' ? 'old' : 'new')\n        }\n\n        // Update the game state\n        scope.update(scope, now)\n        // Render the next frame\n        scope.render(scope, now)\n      }\n    }\n\n    // Start off main loop\n    loop.main()\n    return loop\n  }\n}\n\nclass Canvas {\n\tconstructor (width, height, container) {\n\t\tvar container = document.querySelector(container || 'body');\n\t\t// Generate a canvas and store it as our viewport\n\t    var canvas = document.createElement('canvas')\n\t    var context = canvas.getContext('2d')\n\t    // Pass our canvas' context to our getPixelRatio method\n\t    var backingStores = ['webkitBackingStorePixelRatio', 'mozBackingStorePixelRatio', 'msBackingStorePixelRatio', 'oBackingStorePixelRatio', 'backingStorePixelRatio']\n\t    var deviceRatio = window.devicePixelRatio\n\t    // Iterate through our backing store props and determine the proper backing ratio.\n\t    var backingRatio = backingStores.reduce(function (prev, curr) {\n\t      return (Object.prototype.hasOwnProperty.call(context, curr) ? context[curr] : 1)\n\t    })\n\t    // Return the proper pixel ratio by dividing the device ratio by the backing ratio\n\t    var ratio = deviceRatio / backingRatio\n\t\n\t    // Set the canvas' width then downscale via CSS\n\t    canvas.width = Math.round(width * ratio)\n\t    canvas.height = Math.round(height * ratio)\n\t    canvas.style.width = width + 'px'\n\t    canvas.style.height = height + 'px'\n\t    // Scale the context so we get accurate pixel density\n\t    context.setTransform(ratio, 0, 0, ratio, 0, 0)\n\t    // Append viewport into our game within the dom\n\t    container.insertBefore(canvas, container.firstChild)\n\t    \n\t    return canvas // return the canvas\n\t}\n}\n\n\n\n//# sourceURL=webpack:///./app/craters/system.js?");
+
+/***/ }),
+
+/***/ "./app/game.js":
+/*!*********************!*\
+  !*** ./app/game.js ***!
+  \*********************/
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _craters_craters_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./craters/craters.js */ \"./app/craters/craters.js\");\n\n\n\nclass mygame extends _craters_craters_js__WEBPACK_IMPORTED_MODULE_0__[\"Game\"] {\n\tconstructor (container, width, height){\n\t\tsuper ();\n\t\t\n\t\tthis.state.size = {x: width, y: height}\n\t\tthis.viewport = new _craters_craters_js__WEBPACK_IMPORTED_MODULE_0__[\"Canvas\"](this.state.size.x, this.state.size.y, container);\n\t\tthis.context = this.viewport.getContext('2d')\n\t\tthis.loop = new _craters_craters_js__WEBPACK_IMPORTED_MODULE_0__[\"Loop\"](this, 60)\n\t}\n\t\n    render () {\n        super.render()\n        this.clearContext(this.context, this.state.size)\n        \n        this.context.font = '2em Arial'\n        this.context.fillText('It\\'s working.️', 65, (this.state.size.y / 2), (this.state.size.x))\n    }\n}\n\nwindow.game = new mygame('#container', window.innerWidth, window.innerHeight, 60, true)\n\n//# sourceURL=webpack:///./app/game.js?");
+
+/***/ })
+
+/******/ });

dist/craters.js

@@ -1,96 +0,39 @@
-var cg = (function (exports) {
+var Craters = (function (exports) {
   'use strict';
 
-  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.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;
-
-      // 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);
-
-      this.viewport = canvas;
-      this.viewport.id = 'gameViewport';
-
-      // 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);
-
-      // Initiate core modules with the current scope
-      this.loop = new Loop(this);
-      this.intitiate();
-    }
-
-    intitiate () {
-
-    }
-
-    update (scope, now) {
-      for (var entity = 0; entity < this.entities.length; entity++) {
-        // Fire off each active entities `render` method
-        this.entities[entity].update();
+  // Rect collision tests the edges of each rect to
+  // test whether the objects are overlapping the other
+  class Collision {
+  	static detector (collider, collidee) {
+  	    // Store the collider and collidee edges
+  	    var l1 = collider.state.pos.x;
+  	    var t1 = collider.state.pos.y;
+  	    var r1 = l1 + collider.state.size.x;
+  	    var b1 = t1 + collider.state.size.y;
+  	    
+  	    var l2 = collidee.state.pos.x;
+  	    var t2 = collidee.state.pos.y;
+  	    var r2 = l2 + collidee.state.size.x;
+  	    var b2 = t2 + collidee.state.size.y;
+  	    
+  	    // If the any of the edges are beyond any of the
+  	    // others, then we know that the box cannot be
+  	    // colliding
+  	    if (b1 < t2 || t1 > b2 || r1 < l2 || l1 > r2) {
+  	        return false;
+  	    }
+  	    
+  	    // If the algorithm made it here, it had to collide
+  	    return true;
       }
-    }
+  }
 
-    render (scope, now) {
-      // Setup globals
-      var w = scope.state.width;
-      var h = scope.state.height;
-
-      // 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();
-      }
-    }
-  }
+  // Game Loop Module
+  // This module contains the game loop, which handles
+  // updating the game state and re-rendering the canvas
+  // (using the updated state) at the configured FPS.
   class Loop {
-    constructor (scope) {
+    constructor (scope, fps) {
       var loop = {};
       // Initialize timer variables so we can calculate FPS
-      var fps = scope.state.frames;
       var fpsInterval = 1000 / fps;
@@ -173,3 +116,2 @@ var before = window.performance.now();
       loop.main();
-
       return loop
@@ -179,4 +121,69 @@ }
 
-  class Entity {
+  class Canvas {
+  	constructor (width, height, container) {
+  		var container = document.querySelector(container || 'body');
+  		// 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(width * ratio);
+  	    canvas.height = Math.round(height * ratio);
+  	    canvas.style.width = width + 'px';
+  	    canvas.style.height = height + 'px';
+  	    // Scale the context so we get accurate pixel density
+  	    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  	    // Append viewport into our game within the dom
+  	    container.insertBefore(canvas, container.firstChild);
+  	    
+  	    return canvas // return the canvas
+  	}
+  }
+
+  class Game {
+    constructor (container, width, height, fps, debug) {
+      this.entities = [];
+      this.state = {
+        container: container,
+        size: {
+  	      x: 10,
+  	      y: 10
+        },
+        
+        bgcolor: 'rgba(0,0,0,0)',
+        color: '#ff0',
+        font: '1em Arial'
+      };
+    }
+
+    update () {
+      for (var entity = 0; entity < this.entities.length; entity++) {
+        // Fire off each active entities `render` method
+        this.entities[entity].update();
+      }
+    }
+    
+    render () {
+  	for (var entity = 0; entity < this.entities.length; entity++) {
+      // Fire off each active entities `render` method
+      this.entities[entity].render(); }
+    }
+    
+    clearContext (context, size) {
+  	  context.clearRect(0, 0, size.x, size.y);
+    }
+  }
+
+  class Entity extends Game {
     constructor () {
+      super();
       this.state = {
@@ -202,12 +209,7 @@ size: {
       };
-
-      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();
-      }
+      super.update ();
+      
       this.state.vel.x += this.state.accel.x;
@@ -218,8 +220,2 @@ this.state.vel.y += this.state.accel.y;
     }
-
-    render () {
-      for (var entity = 0; entity < this.entities.length; entity++) {
-        this.entities[entity].render();
-      }
-    }
   }
@@ -232,25 +228,26 @@
       this.scope = scope;
-      this.state = {
-        pos: args.pos || {
+      this.state.pos = args.pos || {
           x: 0,
           y: 0
-        },
-        crop: {
+        };
+        this.state.crop = {
           x: 0,
           y: 0
-        },
-        size: args.size || {
+        };
+        this.state.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'
-      };
-    }
+        };
+        
+        this.state.frames = args.frames || [];
+        this.state.angle = args.angle || 0;
+        this.state.image = args.image || new Image();
+        this.state.delay = args.delay || 5;
+        this.state.tick = args.tick || 0;
+        this.state.orientation = args.orientation || 'horizontal';
+      }
 
     update () {
+    super.update ();
+    
       if (this.state.tick <= 0) {
@@ -272,3 +269,3 @@ if (this.orientation === 'vertical') {
     render () {
-      super.render(this);
+      super.render();
 
@@ -426,6 +423,8 @@ this.scope.context.save();
     static version () {
-      return '0.0.0.4'
+      return '0.0.0.5'
     }
   }
 
+  exports.Canvas = Canvas;
+  exports.Collision = Collision;
   exports.Craters = Craters;
@@ -435,2 +434,3 @@ exports.Entity = Entity;
   exports.Loader = Loader;
+  exports.Loop = Loop;
   exports.Sound = Sound;
@@ -437,0 +437,0 @@ exports.Sprite = Sprite;

dist/craters.min.js

@@ -1,1 +0,100 @@
-!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()}}}({})}]);
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "./dist/craters.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./dist/craters.js":
+/*!*************************!*\
+  !*** ./dist/craters.js ***!
+  \*************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("var Craters = (function (exports) {\n  'use strict';\n\n  // Rect collision tests the edges of each rect to\n  // test whether the objects are overlapping the other\n  class Collision {\n  \tstatic detector (collider, collidee) {\n  \t    // Store the collider and collidee edges\n  \t    var l1 = collider.state.pos.x;\n  \t    var t1 = collider.state.pos.y;\n  \t    var r1 = l1 + collider.state.size.x;\n  \t    var b1 = t1 + collider.state.size.y;\n  \t    \n  \t    var l2 = collidee.state.pos.x;\n  \t    var t2 = collidee.state.pos.y;\n  \t    var r2 = l2 + collidee.state.size.x;\n  \t    var b2 = t2 + collidee.state.size.y;\n  \t    \n  \t    // If the any of the edges are beyond any of the\n  \t    // others, then we know that the box cannot be\n  \t    // colliding\n  \t    if (b1 < t2 || t1 > b2 || r1 < l2 || l1 > r2) {\n  \t        return false;\n  \t    }\n  \t    \n  \t    // If the algorithm made it here, it had to collide\n  \t    return true;\n      }\n  }\n\n  // Game Loop Module\n  // This module contains the game loop, which handles\n  // updating the game state and re-rendering the canvas\n  // (using the updated state) at the configured FPS.\n  class Loop {\n    constructor (scope, fps) {\n      var loop = {};\n      // Initialize timer variables so we can calculate FPS\n      var fpsInterval = 1000 / fps;\n      var before = window.performance.now();\n      // Set up an object to contain our alternating FPS calculations\n      var cycles = {\n        new: {\n          frameCount: 0,\n          startTime: before,\n          sinceStart: 0\n        },\n        old: {\n          frameCount: 0,\n          startTime: before,\n          sineStart: 0\n        }\n      };\n\n      // Alternating Frame Rate vars\n      var resetInterval = 5;\n      var resetState = 'new';\n\n      loop.fps = 0;\n\n      // Main game rendering loop\n      loop.main = function mainLoop (tframe) {\n        // Request a new Animation Frame\n        // setting to `stopLoop` so animation can be stopped via\n        // `window.cancelAnimationFrame( loop.stopLoop )`\n        loop.stopLoop = window.requestAnimationFrame(loop.main);\n\n        // How long ago since last loop?\n        var now = tframe;\n        var elapsed = now - before;\n        var activeCycle;\n        var targetResetInterval;\n\n        // If it's been at least our desired interval, render\n        if (elapsed > fpsInterval) {\n          // Set before = now for next frame, also adjust for\n          // specified fpsInterval not being a multiple of rAF's interval (16.7ms)\n          // ( http://stackoverflow.com/a/19772220 )\n          before = now - (elapsed % fpsInterval);\n\n          // Increment the vals for both the active and the alternate FPS calculations\n          for (var calc in cycles) {\n            ++cycles[calc].frameCount;\n            cycles[calc].sinceStart = now - cycles[calc].startTime;\n          }\n\n          // Choose the correct FPS calculation, then update the exposed fps value\n          activeCycle = cycles[resetState];\n          loop.fps = Math.round(1000 / (activeCycle.sinceStart / activeCycle.frameCount) * 100) / 100;\n\n          // If our frame counts are equal....\n          targetResetInterval = (cycles.new.frameCount === cycles.old.frameCount\n            ? resetInterval * fps // Wait our interval\n            : (resetInterval * 2) * fps); // Wait double our interval\n\n          // If the active calculation goes over our specified interval,\n          // reset it to 0 and flag our alternate calculation to be active\n          // for the next series of animations.\n          if (activeCycle.frameCount > targetResetInterval) {\n            cycles[resetState].frameCount = 0;\n            cycles[resetState].startTime = now;\n            cycles[resetState].sinceStart = 0;\n\n            resetState = (resetState === 'new' ? 'old' : 'new');\n          }\n\n          // Update the game state\n          scope.update(scope, now);\n          // Render the next frame\n          scope.render(scope, now);\n        }\n      };\n\n      // Start off main loop\n      loop.main();\n      return loop\n    }\n  }\n\n  class Canvas {\n  \tconstructor (width, height, container) {\n  \t\tvar container = document.querySelector(container || 'body');\n  \t\t// Generate a canvas and store it as our viewport\n  \t    var canvas = document.createElement('canvas');\n  \t    var context = canvas.getContext('2d');\n  \t    // Pass our canvas' context to our getPixelRatio method\n  \t    var backingStores = ['webkitBackingStorePixelRatio', 'mozBackingStorePixelRatio', 'msBackingStorePixelRatio', 'oBackingStorePixelRatio', 'backingStorePixelRatio'];\n  \t    var deviceRatio = window.devicePixelRatio;\n  \t    // Iterate through our backing store props and determine the proper backing ratio.\n  \t    var backingRatio = backingStores.reduce(function (prev, curr) {\n  \t      return (Object.prototype.hasOwnProperty.call(context, curr) ? context[curr] : 1)\n  \t    });\n  \t    // Return the proper pixel ratio by dividing the device ratio by the backing ratio\n  \t    var ratio = deviceRatio / backingRatio;\n  \t\n  \t    // Set the canvas' width then downscale via CSS\n  \t    canvas.width = Math.round(width * ratio);\n  \t    canvas.height = Math.round(height * ratio);\n  \t    canvas.style.width = width + 'px';\n  \t    canvas.style.height = height + 'px';\n  \t    // Scale the context so we get accurate pixel density\n  \t    context.setTransform(ratio, 0, 0, ratio, 0, 0);\n  \t    // Append viewport into our game within the dom\n  \t    container.insertBefore(canvas, container.firstChild);\n  \t    \n  \t    return canvas // return the canvas\n  \t}\n  }\n\n  class Game {\n    constructor (container, width, height, fps, debug) {\n      this.entities = [];\n      this.state = {\n        container: container,\n        size: {\n  \t      x: 10,\n  \t      y: 10\n        },\n        \n        bgcolor: 'rgba(0,0,0,0)',\n        color: '#ff0',\n        font: '1em Arial'\n      };\n    }\n\n    update () {\n      for (var entity = 0; entity < this.entities.length; entity++) {\n        // Fire off each active entities `render` method\n        this.entities[entity].update();\n      }\n    }\n    \n    render () {\n  \tfor (var entity = 0; entity < this.entities.length; entity++) {\n      // Fire off each active entities `render` method\n      this.entities[entity].render(); }\n    }\n    \n    clearContext (context, size) {\n  \t  context.clearRect(0, 0, size.x, size.y);\n    }\n  }\n\n  class Entity extends Game {\n    constructor () {\n      super();\n      this.state = {\n        size: {\n          x: 10,\n          y: 10\n        },\n        pos: {\n          x: 0,\n          y: 0\n        },\n        vel: {\n          x: 0,\n          y: 0\n        },\n        accel: {\n          x: 0,\n          y: 0\n        },\n        radius: 10,\n        angle: 0\n      };\n    }\n\n    update () {\n      super.update ();\n      \n      this.state.vel.x += this.state.accel.x;\n      this.state.vel.y += this.state.accel.y;\n      this.state.pos.x += this.state.vel.x;\n      this.state.pos.y += this.state.vel.y;\n    }\n  }\n\n  class Sprite extends Entity {\n    constructor (scope, args) {\n      super();\n\n      this.scope = scope;\n      this.state.pos = args.pos || {\n          x: 0,\n          y: 0\n        };\n        this.state.crop = {\n          x: 0,\n          y: 0\n        };\n        this.state.size = args.size || {\n          x: 0,\n          y: 0\n        };\n        \n        this.state.frames = args.frames || [];\n        this.state.angle = args.angle || 0;\n        this.state.image = args.image || new Image();\n        this.state.delay = args.delay || 5;\n        this.state.tick = args.tick || 0;\n        this.state.orientation = args.orientation || 'horizontal';\n      }\n\n    update () {\n    super.update ();\n    \n      if (this.state.tick <= 0) {\n        if (this.orientation === 'vertical') {\n          this.state.crop.y = this.state.frames.shift();\n          this.state.frames.push(this.state.crop.y);\n        } else {\n          this.state.crop.x = this.state.frames.shift();\n          this.state.frames.push(this.state.crop.x);\n        }\n\n        this.state.tick = this.state.delay;\n      }\n\n      this.state.tick--;\n    }\n\n    render () {\n      super.render();\n\n      this.scope.context.save();\n      this.scope.context.translate(this.state.crop.x + (this.state.size.x / 2), this.state.crop.y + (this.state.size.y / 2));\n      this.scope.context.rotate((this.state.angle) * (Math.PI / 180));\n      this.scope.context.translate(-(this.state.crop.x + (this.state.size.x / 2)), -(this.state.crop.y + (this.state.size.y / 2)));\n\n      this.scope.context.drawImage(this.state.image,\n        (this.state.crop.x * this.state.size.x), (this.state.crop.y * this.state.size.y), this.state.size.x, this.state.size.y,\n        this.state.pos.x, this.state.pos.y, this.state.size.x, this.state.size.y);\n\n      this.scope.context.restore();\n    }\n  }\n\n  class Loader {\n    constructor () {\n      this.rescache = {};\n    };\n\n    load (res, cbk) {\n      var that = this;\n      if (res instanceof Array) {\n        res.forEach(function (i) {\n          that.rescache[i] = false;\n          that.fetch(i, cbk);\n        });\n      } else {\n        that.rescache[res] = false;\n        that.fetch(res, cbk);\n      }\n    }\n\n    fetch (url, cbk) {\n      var that = this;\n      if (that.rescache[url]) {\n        return that.rescache[url]\n      } else {\n        var img = new Image();\n        img.onload = function () {\n          that.rescache[url] = img;\n          that.ready(cbk);\n        };\n\n        img.src = url;\n      }\n    }\n\n    ready (cbk) {\n      var that = this;\n      if (typeof cbk === 'function') {\n        var ready = true;\n        for (var item in that.rescache) {\n          if (Object.prototype.hasOwnProperty.call(that.rescache, item) && !that.rescache[item]) {\n            ready = false;\n          }\n        }\n\n        if (ready) cbk();\n      }\n    }\n  }\n\n  // modified soundbox.js lib\n  class Sound {\n    constructor () {\n      this.sounds = {}; // The loaded sounds and their instances\n      this.instances = []; // Sounds that are currently playing\n      this.defaultVolume = 1;\n    };\n\n    load (name, path, callback) {\n      this.sounds[name] = new Audio(path);\n      if (typeof callback === 'function') {\n        this.sounds[name].addEventListener('canplaythrough', callback);\n      } else {\n        return new Promise((resolve, reject) => {\n          this.sounds[name].addEventListener('canplaythrough', resolve);\n          this.sounds[name].addEventListener('error', reject);\n        })\n      }\n    };\n\n    remove (name) {\n      if (typeof this.sounds !== 'undefined') {\n        delete this.sounds[name];\n      }\n    };\n\n    unlock (name, callback, volume, loop) {\n      var that = this;\n      var events = ['touchstart', 'touchend', 'mousedown', 'keydown'];\n      var unlock = function unlock () {\n        events.forEach(function (event) {\n          document.body.removeEventListener(event, unlock);\n        });\n        that.play(name, callback, volume, loop);\n      };\n\n      events.forEach(function (event) {\n        document.body.addEventListener(event, unlock, false);\n      });\n    };\n\n    play (name, callback, volume, loop) {\n      loop = loop || false;\n\n      if (typeof this.sounds[name] === 'undefined') {\n        console.error(\"Can't find sound called '\" + name + \"'.\");\n        return false\n      }\n      var soundInstance = this.sounds[name].cloneNode(true);\n      soundInstance.volume = typeof volume === 'number' ? volume : this.defaultVolume;\n      soundInstance.loop = loop;\n      soundInstance.play();\n      this.instances.push(soundInstance);\n\n      // Don't forget to remove the instance from the instances array\n      soundInstance.addEventListener('ended', () => {\n        var index = this.instances.indexOf(soundInstance);\n        if (index !== -1) this.instances.splice(index, 1);\n      });\n\n      // Attach the callback / promise\n      if (typeof callback === 'function') {\n        soundInstance.addEventListener('ended', callback);\n        return true\n      }\n      return new Promise((resolve, reject) => soundInstance.addEventListener('ended', resolve))\n    };\n\n    stopAll () {\n      // Pause all currently playing sounds\n\n      // Shallow clone the array to avoid issues with instances auto-removing themselves\n      var instancesToStop = this.instances.slice();\n      for (var instance of instancesToStop) {\n        instance.pause();\n        instance.dispatchEvent(new Event('ended'));\n      }\n    }\n  }\n\n  // Craters.js micro game framework\n\n  const boundary = function numberboundary (min, max) {\n    return Math.min(Math.max(this, min), max)\n  };\n  // Expose methods\n  Number.prototype.boundary = boundary;\n\n  class Craters {\n    static version () {\n      return '0.0.0.5'\n    }\n  }\n\n  exports.Canvas = Canvas;\n  exports.Collision = Collision;\n  exports.Craters = Craters;\n  exports.Entity = Entity;\n  exports.Game = Game;\n  exports.Loader = Loader;\n  exports.Loop = Loop;\n  exports.Sound = Sound;\n  exports.Sprite = Sprite;\n\n  return exports;\n\n}({}));\n\n\n//# sourceURL=webpack:///./dist/craters.js?");
+
+/***/ })
+
+/******/ });

examples/sprites-demo/src/game.js

@@ -5,4 +5,4 @@ import { Game, Entity, Sprite, Loader } from './../../../app/craters/craters.js'
 class Buggame extends Game {
-  intitiate () {
-    super.intitiate()
+  constructor () {
+    super.constructor('#container', window.innerWidth, window.innerHeight, 60, false)
 
@@ -56,2 +56,2 @@ this.score = '0000'
   './src/media/bolt.png'
-], function () { window.game = new Buggame('#container', window.innerWidth, window.innerHeight, 60, false) })
+], function () { window.game = new Buggame() })

package.json

 {
   "name": "craters.js",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A Compact Game Engine that helps you build fast, modern HTML5 Games",
@@ -14,3 +14,2 @@ "main": "./index.js",
   },
-
   "standard": {
@@ -17,0 +16,0 @@ "globals": [ "Audio", "Image", "Event" ]

README.md

@@ -13,3 +13,4 @@ # craters.js ☄️
 
-[Demo sample game](https://swashvirus.github.io/craters.js/examples/sprites-demo/index.html)
+[Buggame sprite sample game](https://swashvirus.github.io/craters.js/examples/sprites-demo/index.html)
+[Panda Breakout sample game](https://swashvirus.github.io/craters.js/examples/breakout-game/index.html)
 
@@ -21,15 +22,15 @@ #### features ✨
 	reduces bundle size
-- Sound.js
+- Sound
 	sound system loads sounds methods
 	
-- Sprite.js
+- Sprite
 	a sprite system
 
-- Loader.js
+- Loader
 	file loading utility
 
-- Entity.js
+- Entity
 	Entity base class
 
-- Game.js
+- Game
 	Game base class
@@ -55,14 +56,26 @@
 ```
-
+```bash
+Craters is the global Object used in the iife build
+```
 ##### writing the demo game yourself
 ```javascript
 'use strict';
-import { Game } from './craters/craters.js'
+import { Game, Canvas, Loop } from './craters/craters.js'
 
 class mygame extends Game {
-
-    render() {
-        super.render(this)
+	constructor (container, width, height){
+		super ();
+		
+		this.state.size = {x: width, y: height}
+		this.viewport = new Canvas(this.state.size.x, this.state.size.y, container);
+		this.context = this.viewport.getContext('2d')
+		this.loop = new Loop(this, 60)
+	}
+	
+    render () {
+        super.render()
+        this.clearContext(this.context, this.state.size)
+        
         this.context.font = '2em Arial'
-        this.context.fillText('It\'s working.️', 65, (this.state.height / 2), (this.state.width))
+        this.context.fillText('It\'s working.️', 65, (this.state.size.y / 2), (this.state.size.x))
     }
@@ -69,0 +82,0 @@ }

rollup.config.js

@@ -6,3 +6,3 @@ module.exports = {
     format: 'iife',
-    name: 'cg'
+    name: 'Craters'
   },
@@ -9,0 +9,0 @@ {

webpack.config.js

 const path = require('path')
 
 module.exports = {
+  mode: 'development',
   entry: {
@@ -5,0 +6,0 @@ './build/game.min.js': './app/game.js',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1856278

increased by33.45%

Number of package files

77

increased by75%

Lines of code

2042

increased by24.66%

Number of lines in readme file

83

increased by18.57%

Worsened metrics

Number of low license alerts

2

increased by100%

License quality

80

decreased by-20%

No dependency changes