Source: RouteEngineA1.js

  1. if (!RouteEngine) {
  2.     /**
  3.      * @namespace RouteEngine
  4.      * @prop {Array} games Holds all of the {@link Game} Objects that are in the document
  5.      * @prop {Array} images Holds all of the images that have been loaded
  6.      * @prop {Array} ImagesLoaders Holds all of the {@link ImageLoadStack} Objects that are in the document.
  7.      * @prop {Image} noImage This is a placeholder image that is used when errors occur during image loading.
  8.      */
  9.     var RouteEngine = {};
  10.     RouteEngine.games = [];
  11.     RouteEngine.images = [];
  12.     RouteEngine.ImageLoaders = [];
  13.     RouteEngine.noImage = loadImage("none.png", 20, 20);
  14.     RouteEngine.GameClicked = function(event) {
  15.         RouteEngine.games[event.target.dataset.gameId].clicked(event);
  16.     };
  17.     RouteEngine.GameDown = function(event) {
  18.         RouteEngine.games[event.target.dataset.gameId].down(event);
  19.     };
  20.     RouteEngine.GameUp = function(event) {
  21.         RouteEngine.games[event.target.dataset.gameId].up(event);
  22.     };
  23.     RouteEngine.GameMouseMove = function(event) {
  24.         RouteEngine.games[event.target.dataset.gameId].mousemove(event);
  25.     };
  26.     RouteEngine.GameMouseOut = function(event) {
  27.         RouteEngine.games[event.target.dataset.gameId].mouseout(event);
  28.     };
  29.     RouteEngine.IdImageLoaded = function(e) {
  30.         //All image loaders assign their image objects with "ImageId" + loader's id + ":" + image id.
  31.         //Redirect the image load event to the loader event via id.
  32.         var id = e.target.id.substring(7);
  33.         RouteEngine.ImageLoaders[id.split(":")[0]].imageLoaded(id.split(":")[1]);
  34.     };
  35. }
  37. /**
  38.  * @class Game
  39.  * @constructor
  40.  * @param {Object} element An HTML5 canvas (use document.getElementById)
  41.  * @prop {Integer} id
  42.  * @prop {Object} c - The HTML5 canvas element that this game is being drawn onto
  43.  * @prop {Object} can - The 2D rendering context the game is using
  44.  * @prop {Integer} cW - The width of the canvas element
  45.  * @prop {Integer} cH - The height of the canvas element
  46.  * @prop {Array} images An array of images that are being used by the game
  47.  * @prop {Array} sprites The array of sprites that are in the game
  48.  * @prop {Boolean} mouseDown Is set to true if the user's left mouse click is currently down
  49.  * @prop {Background} background The current {@link Background} that the game is using
  50.  */
  51. function Game(element) {
  52.     this.id = RouteEngine.games.length;
  53.     RouteEngine.games.push(this);
  54.     this.c = element;
  55.     this.can = this.c.getContext("2d");
  56.     this.cW = this.c.width;
  57.     this.cH = this.c.height;
  58.     this.self = this;
  59.     this.images = [];
  60.     this.sprites = [];
  61.     this.mouseDown = false;
  62.     this.background = new Background("clear");
  63.     
  64.     /**
  65.       * @memberof Game
  66.       * @abstract
  67.       * @method onclick
  68. 	  * @param {Object} e - An Event Object of the triggering event
  69.       * @description Meant to be overridden, called when the user clicks within the game canvas.
  70.       */
  71.     this.onclick = function(e) {};
  72.     
  73.      /**
  74.       * @memberof Game
  75.       * @abstract
  76.       * @method onmouseup
  77. 	  * @param {Object} e - An Event Object of the triggering event
  78.       * @description Meant to be overridden, called when the user lets go of the left mouse click.
  79.       */
  80.     this.onmouseup = function(e) {};
  81.     
  82.     /**
  83.       * @memberof Game
  84.       * @abstract
  85.       * @method onmousedown
  86. 	  * @param {Object} e - An Event Object of the triggering event
  87.       * @description Meant to be overridden, called when the user presses down the left mouse button.
  88.       */
  89.     this.onmousedown = function(e) {};
  90.     
  91.     /**
  92.       * @memberof Game
  93.       * @abstract
  94.       * @method onmouseup
  95. 	  * @param {Object} e - An Event Object of the triggering event
  96.       * @description Meant to be overridden, called when the user moves the mouse across the game canvas
  97.       */
  98.     this.onmousemove = function(e) {};
  99.     
  100.     /**
  101.       * @memberof Game
  102.       * @abstract
  103.       * @method onstart
  104.       * @description Meant to be overridden, called the game loop is started.
  105.       */
  106.     this.onstart = function() {};
  107.     
  108.     /**
  109.       * @memberof Game
  110.       * @abstract
  111.       * @method onstart
  112.       * @description Meant to be overridden, called the game is loaded. CURRENTLY NOT WORKING
  113.       */
  114.     this.onload = function() {};
  115.     
  116.     /**
  117.       * @memberof Game
  118.       * @abstract
  119.       * @method onstart
  120.       * @description Meant to be overridden, called when the user moves the mouse out of the game canvas.
  121.       */
  122.     this.onmouseout = function(e) {};
  123.     
  124.     this.setSize = function (w, h) {
  125. 	  this.c.setAttribute("width", w + "px");
  126. 	  this.c.setAttribute("height", h + "px");  
  127. 	  this.cW = this.c.width;
  128. 	  this.cH = this.c.height;
  129. 	};
  130.     
  131.     this.clicked = function(event) {
  132.         this.onclick();
  133.     };
  134.     
  135.     this.mousemove = function(event) {
  136.         this.getPosition(event);
  137.         this.onmousemove(event);
  138.     };
  139.     
  140.     this.down = function(event) {
  141.         this.mouseDown = true;
  142.         this.onmousedown(event);
  143.     };
  144.     
  145.     this.up = function(event) {
  146.         this.mouseDown = false;
  147.         this.onmouseup(event);
  148.     };
  149.     
  150.     this.mouseout = function(event) {
  151.         this.self.mouseDown = false;
  152.         this.self.mouseX = -1;
  153.         this.self.mouseY = -1;
  154.         this.self.onmouseout();
  155.     };
  156.    
  157.     this.c.dataset.gameId = this.id;
  158.     
  159.     this.c.addEventListener("click", function(event) {
  160.         RouteEngine.GameClicked(event);
  161.     });
  162.     this.c.addEventListener("mousedown", function(event) {
  163.         RouteEngine.GameDown(event);
  164.     });
  165.     this.c.addEventListener("mouseup", function(event) {
  166.         RouteEngine.GameUp(event);
  167.     });
  168.     this.c.addEventListener("mousemove", function(event) {
  169.         RouteEngine.GameMouseMove(event);
  170.     });
  171.     this.c.addEventListener("mouseout", function(event) {
  172.         RouteEngine.GameMouseOut(event);
  173.     });
  175. 	/**
  176. 	  * @method render
  177. 	  * @memberof Game
  178. 	  * @description - Renders the background and all sprites onto the game's canvas
  179. 	  */
  180.     this.render = function() {
  181.         this.background.draw(this.self);
  182.         for (var s = 0; s < this.sprites.length; s++) {
  183.             this.sprites[s].draw(this.self);
  184.         }
  185.     };
  187. 	/**
  188. 	  * @method clear
  189. 	  * @memberof Game
  190. 	  * @description - Clears the entire game's canvas
  191. 	  */
  192.     this.clear = function() {
  193.         this.can.clearRect(0, 0, this.cW, this.cH);
  194.     };
  196. 	/**
  197. 	  * @method getPosition
  198. 	  * @memberof Game
  199. 	  * @callback
  200. 	  * @description - Used by event handlers to update the location of the mouse pointer. You really should have no need to ever touch this.
  201. 	  */
  202.     this.getPosition = function(event) {
  203.         var totalOffsetX = 0;
  204.         var totalOffsetY = 0;
  205.         var canvasX = 0;
  206.         var canvasY = 0;
  207.         var currentElement = event.target;
  209.         do {
  210.             totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
  211.             totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
  212.         }
  213.         while (currentElement = currentElement.offsetParent)
  215.         canvasX = event.pageX - totalOffsetX;
  216.         canvasY = event.pageY - totalOffsetY;
  217.         this.mouseX = canvasX;
  218.         this.mouseY = canvasY;
  219.     };
  221. }
  223. /**
  224.   * @class Background
  225.   * @constructor
  226.   * @param {String} type - The type of background that this Background object will be. Acceptable values: "color", "image" or "img", "clear"
  227.   * @param {Object} value - This parameter is either a HTML color ("#00F" or "#0000FF") or an image object. Depends upon the type you specified. If the type is "clear", then this parameter is ignored
  228.   * @prop {String} color - The current color of this Background object if it is the "color" type
  229.   * @prop {Object} img - The current background image if this object is the "image" or "img" type.
  230.   * @prop {String} type - The type of background this Background object currently is. Acceptable values: "color", "image" or "img", "clear"
  231.   * @description This Background class is used as a simple way to set backgrounds for games. Background Objects can have three different types: "color", "image" or "img", "clear" If the background type is "color", then the background will render as the solid color as specified by the value parameter you pass in. If the background type is "img" or "image" (there is no difference), then the background will render as the image that you pass in via the value parameter. If the background type is "clear", then the background will not render at all.
  232.   */
  233. function Background(type, value) {
  234.     this.color = "#FFF";
  235.     this.img = RouteEngine.noImage;
  236.     this.type = type;
  238.     switch (this.type) {
  239.         case "color":
  240.             this.color = value;
  241.             break;
  242.         case "image":
  243.         case "img":
  244.             this.img = value;
  245.             break;
  246.         case "clear":
  247.             //Nothing
  248.             break;
  249.         default:
  250.             //No Type! Default to clear
  251.             this.type = "clear";
  252.             break;
  253.     }
  255. 	/**
  256. 	  * @method draw
  257. 	  * @memberof Background
  258. 	  * @param {Game} game - The {@link Game} that we are rendering this background onto
  259. 	  * @description - Renders the background onto the game canvas according to the type of background this is.
  260. 	  */
  261.     this.draw = function(game) {
  262.         switch (this.type) {
  263.             case "color":
  264.                 game.can.fillStyle = this.color;
  265.                 game.can.fillRect(0, 0, game.cW, game.cH);
  266.                 break;
  267.             case "image":
  268.             case "img":
  269.                 game.can.drawImage(this.img, 0, 0);
  270.                 break;
  271.             case "clear":
  272.                 game.clear();
  273.                 break;
  274.             default:
  275.                 console.log("Impossible really, how can this happen?");
  276.                 break;
  277.         }
  278.     };
  279. }
  281. /** 
  282.   * @class Sound
  283.   * @description Basically a wrapper object for loading and playing sounds.
  284.   * @constructor
  285.   * @param {String} src The uri for the audiofile to be loaded
  286.   * @prop {String} src The uri/filepath for the sound
  287.   * @prop {Audio} sound
  288.   */
  289. function Sound(src) {
  290.     this.src = src;
  291.     this.sound = new Audio();
  292.     this.sound.src = this.src;
  293.     
  294.     /**
  295.       * @method onload
  296.       * @callback
  297.       * @abstract
  298.       * @memberof Sound
  299.       * @description This function is meant to be extended, it is called once the sound loads.
  300.       */
  301.     this.onload = function() {};
  302.     
  303.     /**
  304.       * @method onplay
  305.       * @callback
  306.       * @abstract
  307.       * @memberof Sound
  308.       * @description This function is meant to be extended, it is called whenever the sound plays.
  309.       */
  310.     this.onplay = function() {};
  311.     
  312.     /**
  313.       * @memberof Sound
  314.       * @method load
  315.       * @description Loads the sound.
  316.       */
  317.     this.load = function() {
  318.         this.sound.load();
  319.     };
  320.     
  321.     this.sound.onload = function() {
  322.         this.onload();
  323.     };
  325. 	/**
  326.       * @method play
  327.       * @public
  328.       * @memberof Sound
  329.       * @description Will load and play the sound.
  330.       */
  331.     this.play = function() {
  332.         this.sound.load();
  333.         this.sound.play();
  334.         this.onplay();
  335.     };
  337. }
  339. /**
  340.   * @class TextSprite
  341.   * @description A sprite that is a string of text. It can change position, visibility, color, font, alignment, and the actual text. Also includes hitbox detection.
  342.   * @param {String} text - The String that will be rendered
  343.   * @param {Number} x - The x position of this sprite
  344.   * @param {Number} y - The y position of this sprite
  345.   * @prop {String} align - Which direction this text is aligned to. Acceptable values: "left", "start", "center", "right", "end". Default: "left"
  346.   * @prop {String} text - The String that will be rendered
  347.   * @prop {Number} x - The x position of this sprite
  348.   * @prop {Number} y - The y position of this sprite
  349.   * @prop {Boolean} visible - A boolean value of whether of not this sprite is visible/will be rendered. True means it will be rendered
  350.   * @prop {String} color - The color of the text
  351.   * @prop {String} font - The size and font of the text. Default value: "30px Arial"
  352.   */
  353. function TextSprite(text, x, y) {
  354.     this.align = "left"; //left, start, center, right, end
  355.     this.text = text;
  356.     this.font = "30px Arial";
  357.     this.x = x;
  358.     this.y = y;
  359.     this.visible = true;
  360.     this.color = "#222";
  362. 	/**
  363. 	  * @memberof TextSprite
  364. 	  * @method draw
  365. 	  * @param {Game} game - The game this sprite will be rendered onto
  366. 	  * @description Renders the sprite onto the give game canvas.
  367. 	  */
  368.     this.draw = function(game) {
  369.         if (this.visible) {
  370.             game.can.font = this.font;
  371.             game.can.fillStyle = this.color;
  372.             game.can.textAlign = this.align;
  373.             game.can.fillText(this.text, this.x, this.y);
  374.         }
  375.     };
  377. 	/**
  378. 	  * @memberof TextSprite
  379. 	  * @method hide
  380. 	  * @description Makes this sprite not visible
  381. 	  */
  382.     this.hide = function() {
  383.         this.visible = false;
  384.     };
  386. 	/**
  387. 	  * @memberof TextSprite
  388. 	  * @method hide
  389. 	  * @description Makes this sprite visible
  390. 	  */
  391.     this.show = function() {
  392.         this.visible = true;
  393.     };
  395.     this.toggle = function() {
  396.         if (this.visible) {
  397.             this.visible = false;
  398.         } else {
  399.             this.visible = true;
  400.         }
  401.     };
  403. 	/**
  404. 	  * @memberof TextSprite
  405. 	  * @method inHit
  406. 	  * @param {Number} cx - The x coordinate
  407. 	  * @param {Number} cy - The y coordinate
  408. 	  * @description Checks to see if the given coordinates are within the sprite's "hit box"
  409. 	  * @returns {Boolean} True is the coordinates are within the "hit box", False otherwise.
  410. 	  */
  411.     this.inHit = function(cx, cy) {
  412.         var c = document.createElement("canvas").getContext("2d");
  413.         c.font = this.font;
  414.         var metrics = c.measureText(this.text);
  415.         switch (this.align) {
  416.             case "left":
  417.             case "start":
  418.                 if (this.x < cx && this.x + metrics.width > cx && cy < this.y && this.y - parseInt(this.font.split("px")[0]) < cy) {
  419.                     return true;
  420.                 } else {
  421.                     return false;
  422.                 }
  423.                 break;
  424.             case "center":
  425.                 if (this.x < cx && this.x + (metrics.width / 2) > cx && cy < this.y && this.y - (parseInt(this.font.split("px")[0]) / 2) < cy) {
  426.                     return true;
  427.                 } else {
  428.                     return false;
  429.                 }
  430.                 break;
  431.             case "right":
  432.             case "end":
  433.                 if (this.x > cx && this.x - metrics.width < cx && cy < this.y && this.y - parseInt(this.font.split("px")[0]) < cy) {
  434.                     return true;
  435.                 } else {
  436.                     return false;
  437.                 }
  438.                 break;
  439.         }
  440.     };
  441. }
  443. /**
  444.   * @class ImageSprite
  445.   * @constructor
  446.   * @description A sprite that is simply an image. The sprite can change between images, visibility, position, and rotation. Also includes basic hitbox detection.
  447.   * @param {Image} img The starting images that this sprite will render as. Will be in index 0 of the images array.
  448.   * @param {Number} x The starting x-position of this sprite
  449.   * @param {Number} y The starting y-position of this sprite
  450.   * @prop {Number} x The current x-position of this sprite
  451.   * @prop {Number} y The current y-position of this sprite
  452.   * @prop {Number} rotation - The number of degrees this sprite is currently rotated. Default: 0
  453.   * @prop {Boolean} visible - Whether or not this sprite is visible
  454.   * @prop {Array} images - An Array of Images that this sprite can switch between
  455.   * @prop {Image} img - The current image the sprite will render as
  456.   *
  457.   *
  458.   */
  459. function ImageSprite(img, x, y) {
  460.     this.img = img;
  461.     this.x = x;
  462.     this.y = y;
  463.     this.images = [];
  464.     this.visible = true;
  465.     this.rotation = 0;
  466.     this.images[0] = img;
  468. 	/**
  469. 	  * @memberof ImageSprite
  470. 	  * @method draw
  471. 	  * @param {Game} game - The game this sprite will be rendered onto
  472. 	  * @description Renders the sprite onto the give game canvas.
  473. 	  */
  474.     this.draw = function(game) {
  475.         if (this.visible) {
  476.             game.can.save();
  477.             game.can.translate(this.img.width + this.x, this.img.height + this.y);
  478.             game.can.rotate((Math.PI / 180) * this.rotation);
  479.             game.can.drawImage(this.img, -1 * this.img.width / 2, -1 * this.img.height / 2);
  480.             game.can.restore();
  481.         }
  482.     };
  484. 	/**
  485. 	  * @memberof ImageSprite
  486. 	  * @method hide
  487. 	  * @description Makes this sprite not visible
  488. 	  */
  489.     this.hide = function() {
  490.         this.visible = false;
  491.     };
  493. 	/**
  494. 	  * @memberof ImageSprite
  495. 	  * @method hide
  496. 	  * @description Makes this sprite visible
  497. 	  */
  498.     this.show = function() {
  499.         this.visible = true;
  500.     };
  502.     this.toggle = function() {
  503.         if (this.visible) {
  504.             this.visible = false;
  505.         } else {
  506.             this.visible = true;
  507.         }
  508.     };
  510. 	/**
  511. 	  * @memberof ImageSprite
  512. 	  * @method inHit
  513. 	  * @param {Number} cx - The x coordinate
  514. 	  * @param {Number} cy - The y coordinate
  515. 	  * @description Checks to see if the given coordinates are within the sprite's "hit box"
  516. 	  * @returns {Boolean} True is the coordinates are within the "hit box", False otherwise.
  517. 	  */	
  518.     this.inHit = function(cx, cy) {
  519.         if (this.x < cx && this.x + this.img.width > cx && cy > this.y && this.y + this.img.height > cy) {
  520.             return true;
  521.         } else {
  522.             return false;
  523.         }
  524.     };
  525. }
  528. /**
  529.   * @class ImageLoadStack
  530.   * @description An object used to load a series/collection of images all at once and give progress statistics and has an onload function once all images are loaded. Specify all images to be loaded with the addImage function and then initiate loading with the start function
  531.   * @construtor
  532.   * @param {Array} images - An array of all the images that this ImageLoadStack loaded
  533.   * @param {Boolean} finished - Tells if all of the images are loaded or not. 
  534.   *  @param {Boolean} started - Tells if the ImageLoadStack has started loading images yet or not. (Start loading by calling the start() function)
  535.   * @param {Integer} loaded - The number of images that are loaded
  536.   * @param {Integer} total - The number of images that are loaded or not loaded.
  537.   * @param {Integer} id - The id of this ImageLoadStack
  538.   */
  539. function ImageLoadStack() {
  540.     this.images = [];
  541.     this.finished = false; //Are all of the images loaded
  542.     this.loaded = 0; //The number of images that are loaded
  543.     this.total = 0; //The total number of images, finished or not
  544.     this.started = false;
  545.     this.progress = 0; //Percentage of loading done
  546.     
  547.     this.id = RouteEngine.ImageLoaders.length;
  548.     RouteEngine.ImageLoaders.push(this);
  549.     
  550.     /**
  551.       * @memberof ImageLoadStack
  552.       * @method onload
  553.       * @abstract
  554.       * @callback
  555.       * @description Meant to be overrided, called once all of the images have loaded.
  556.       */
  557.     this.onload = function() {};
  558.     
  559.     /**
  560.       * @method start
  561.       * @memberof ImageLoadStack
  562.       * @description Call this function once all images are in the que to start loading them. Will set this.started to True.
  563.       *
  564.       */
  565.     this.start = function() {
  566.         this.started = true;
  567.         if (this.total == this.loaded) {
  568.             this.finished = true;
  569.             this.onload();
  570.         }
  571.     };
  573. 	/**
  574.       * @method addImage
  575.       * @memberof ImageLoadStack
  576.       * @param {String} src - The URI of the image to be loaded
  577.       * @param {Integer} width - The width in pixels of the image
  578.       * @param {Integer} height - The height in pixels of the image
  579.       * @description Use this function to add images to the loading que before starting loading.
  580.       * @returns {Integer} The index of the image in the images array
  581.       */
  582.     this.addImage = function(src, width, height) {
  583.         var img = loadIdImage(src, width, height, "ImageId" + this.id + ":" + this.images.length);
  584.         img.addEventListener("load", RouteEngine.IdImageLoaded);
  585.         this.images.push(img);
  586.         this.total++;
  587.         return this.images.length - 1;
  588.     };
  590. 	/**
  591. 	  * @memberof ImageLoadStack
  592. 	  * @protected
  593. 	  * @param {Integer} imgId
  594. 	  * @callback
  595. 	  * @function imageLoaded
  596. 	  * @description An event handler that is called when an image is done loading. Really no reason for developers to touch this function.
  597. 	  */
  598.     this.imageLoaded = function(imgId) {
  599.         this.loaded++;
  600.         this.progress = Math.round((this.loaded / this.total) * 100);
  601.         if (this.total == this.loaded) {
  602.             this.finished = true;
  603.             this.onload();
  604.         }
  605.     };
  606. }
  608. /**
  609.   * @global
  610.   * @function loadIdImage
  611.   * @param {String} src - The source URI for the image to be loaded
  612.   * @param {Integer} width - The width in pixels of the image
  613.   * @param {Integer} height - The height in pixels of the image
  614.   * @param {Integer} id - The ID of the image. Used by {@link ImageLoadStack}s.
  615.   * @returns {Image} An Image object, regardless of whether it has loaded yet or not.
  616.   */
  617. function loadIdImage(src, width, height, id) {
  618.     var i = new Image(width, height);
  619.     i.src = src;
  620.     i.id = id;
  621.     return i;
  622. }
  624. /**
  625.   * @global
  626.   * @function loadImage
  627.   * @param {String} src - The source URI for the image to be loaded
  628.   * @param {Integer} width - The width in pixels of the image
  629.   * @param {Integer} height - The height in pixels of the image
  630.   * @returns {Image} An Image object, regardless of whether it has loaded yet or not.
  631.   */
  632. function loadImage(src, width, height) {
  633.     var i = new Image(width, height);
  634.     i.src = src;
  635.     return i;
  636. }