added AMD/CommonJS export and play options

iamchrismiller · Jun 18, 2014 · 7468321 · 7468321
1 parent 6b90bb7
commit 7468321
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -57,6 +57,7 @@ A Responsive HTML5 Snake Game with a particle explosion on food impact!
 
 ## Release History
 
+ * 2014-06-17   v0.1.1   Added "play" options, exports for AMD/CommonJS
  * 2014-06-17   v0.1.0   Initial Release
 
 ---
diff --git a/build/snake.build.js b/build/snake.build.js
@@ -119,7 +119,6 @@ Bot.prototype.isMoveSafe = function (snake, head, currentDirection, newDirection
 
 module.exports = Bot;
 },{}],2:[function(require,module,exports){
-
 /**
  * Food Class
  * Creating a simple 2d object
@@ -131,7 +130,7 @@ function Food(options) {
   this.x = this.options.x ? this.options.x : 0;
   this.y = this.options.y ? this.options.y : 0;
 
-  this.border = this.options.border ?  this.options.border : false;
+  this.border = this.options.border ? this.options.border : false;
   this.color = this.options.color ? this.options.color : "#FFF";
 }
 
@@ -525,7 +524,7 @@ var Snake = function(options) {
     snakeSize      : 3,
     foodColor      : null,
     bot            : true,
-    timeout        : 3000,
+    timeout        : 1000,
     explosion      : true
   }, options);
 
@@ -544,6 +543,15 @@ var Snake = function(options) {
   this.directionQueue = [];
 };
 
+/**
+ * Set Options For Current Snake
+ * @param options
+ * @returns {*}
+ */
+Snake.prototype.setOptions = function(options) {
+  return $.extend(this.settings, options);
+};
+
 /**
  * Start Snake Game
  */
@@ -930,15 +938,17 @@ var ResponsiveSnake = {
    * Initialize a new Game
    */
   game : new GameContainer({
-    canvas : "#canvas",
-    inst : new SnakeGame("#canvas"),
-    explosion : true
+    inst : new SnakeGame()
   }),
 
   /**
    * Start Game and Bind Window Events
    */
-  start : function () {
+  start : function (options) {
+    if (options) {
+      ResponsiveSnake.game.inst.setOptions(options);
+    }
+
     ResponsiveSnake.game.start();
     ResponsiveSnake.bindEvents();
   },
@@ -950,13 +960,28 @@ var ResponsiveSnake = {
     if (this.game.started) {
       //Pause Game on Window Blur
       $(window)
-        .focus(this.game.play.bind(this.game))
-        .blur(this.game.pause.bind(this.game));
+        .focus(function() {
+          if (this.game.started) {
+            this.game.play.bind(this.game);
+          }
+        }.bind(this))
+        .blur(function() {
+          if (this.game.started) {
+            this.game.pause.bind(this.game);
+          }
+        }.bind(this));
     }
   }
 };
 
-window.ResponsiveSnake = ResponsiveSnake;
+//Handle Module Exports
+if (typeof module !== 'undefined' && !window) {
+  //Export to NODE
+  module.exports = ResponsiveSnake;
+} else if (typeof window !== 'undefined') {
+  //Export To Browser
+  window.ResponsiveSnake = ResponsiveSnake;
+}
 
 },{"./GameContainer":3,"./SnakeGame":6}],8:[function(require,module,exports){
 /*global module*/

diff --git a/build/snake.build.min.js b/build/snake.build.min.js
diff --git a/example/assets/css/main.css b/example/assets/css/main.css
@@ -34,22 +34,33 @@ body .intro p {
 }
 @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000334}}
 body .container {
-  background: url("/example/assets/img/sand.jpg");
+  background: url("/example/assets/img/sand.jpg") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  -webkit-backface-visibility: hidden;
+  -webkit-animation: fadeIn 1s linear 0s;
+  -moz-animation: fadeIn 1s linear 0s;
+  -o-animation: fadeIn 1s linear 0s;
+  -ms-animation: fadeIn 1s linear 0s;
+  animation: fadeIn 1s linear 0s;
 }
-@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000338}}
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000352}}
 body #snake-canvas {
   position: relative;
 }
-@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000342}}
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000356}}
 body a {
-  text-decoration: none;
-  color: #329ECC;
+  color: white;
 }
-@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000347}}
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000360}}
 body .hidden {
   display: none;
 }
-@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000352}}
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000365}}
 body #scoreboard {
   position: absolute;
   bottom: 0;
@@ -58,14 +69,14 @@ body #scoreboard {
   background: rgba(0, 0, 0, 0.3);
   color: white;
 }
-@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000360}}
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000373}}
 body #scoreboard div {
   opacity: .6;
   float: right;
   margin-right: 30px;
   margin-top: 10px;
 }
-@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000367}}
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/cmiller\/development\/src\/snake-game\/example\/assets\/scss\/layout\.scss}line{font-family:\0000380}}
 body #scoreboard span {
   font-weight: bold;
 }

diff --git a/example/assets/scss/layout.scss b/example/assets/scss/layout.scss
@@ -32,16 +32,29 @@ body {
   }
 
   .container {
-    background : url('/example/assets/img/sand.jpg');
+
+    background                  : url('/example/assets/img/sand.jpg') no-repeat center center fixed;
+    -webkit-background-size     : cover;
+    -moz-background-size        : cover;
+    -o-background-size          : cover;
+    background-size             : cover;
+    height                      : 100%;
+    width                       : 100%;
+
+    -webkit-backface-visibility : hidden;
+    -webkit-animation           : fadeIn 1s linear 0s;
+    -moz-animation              : fadeIn 1s linear 0s;
+    -o-animation                : fadeIn 1s linear 0s;
+    -ms-animation               : fadeIn 1s linear 0s;
+    animation                   : fadeIn 1s linear 0s;
   }
 
   #snake-canvas {
     position : relative;
   }
 
   a {
-    text-decoration : none;
-    color           : #329ECC;
+    color           : white;
   }
 
   .hidden {

diff --git a/example/index.html b/example/index.html
@@ -21,7 +21,8 @@
 <body>
     <div class="intro">
         <h2>Responsive Snake</h2>
-        <p>Created By Chris Miller</p>
+        <p>(R) - Reset | (Space) - Pause | (B) - Bot </p>
+        <p>Created By <a href="https://github.com/iamchrismiller" target="_BLANK">Chris Miller</a></p>
     </div>
 
     <div class="container absolute">
@@ -55,7 +56,14 @@ <h2>Responsive Snake</h2>
 
 <script>
     //Start Snake Game
-    $(document).ready(ResponsiveSnake.start);
+    $(document).ready(function() {
+        ResponsiveSnake.start({
+            snakePixels    : 12,
+            snakeSize      : 4,
+            bot            : true,
+            explosion      : true
+        });
+    });
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "responsive-snake",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Basic Responsive Snake Game",
   "contributors": [],
   "devDependencies": {

diff --git a/src/Food.js b/src/Food.js
@@ -1,4 +1,3 @@
-
 /**
  * Food Class
  * Creating a simple 2d object
@@ -10,7 +9,7 @@ function Food(options) {
   this.x = this.options.x ? this.options.x : 0;
   this.y = this.options.y ? this.options.y : 0;
 
-  this.border = this.options.border ?  this.options.border : false;
+  this.border = this.options.border ? this.options.border : false;
   this.color = this.options.color ? this.options.color : "#FFF";
 }
 

diff --git a/src/SnakeGame.js b/src/SnakeGame.js
@@ -41,7 +41,7 @@ var Snake = function(options) {
     snakeSize      : 3,
     foodColor      : null,
     bot            : true,
-    timeout        : 3000,
+    timeout        : 1000,
     explosion      : true
   }, options);
 
@@ -60,6 +60,15 @@ var Snake = function(options) {
   this.directionQueue = [];
 };
 
+/**
+ * Set Options For Current Snake
+ * @param options
+ * @returns {*}
+ */
+Snake.prototype.setOptions = function(options) {
+  return $.extend(this.settings, options);
+};
+
 /**
  * Start Snake Game
  */

diff --git a/src/main.js b/src/main.js
@@ -15,15 +15,17 @@ var ResponsiveSnake = {
    * Initialize a new Game
    */
   game : new GameContainer({
-    canvas : "#canvas",
-    inst : new SnakeGame("#canvas"),
-    explosion : true
+    inst : new SnakeGame()
   }),
 
   /**
    * Start Game and Bind Window Events
    */
-  start : function () {
+  start : function (options) {
+    if (options) {
+      ResponsiveSnake.game.inst.setOptions(options);
+    }
+
     ResponsiveSnake.game.start();
     ResponsiveSnake.bindEvents();
   },
@@ -35,11 +37,25 @@ var ResponsiveSnake = {
     if (this.game.started) {
       //Pause Game on Window Blur
       $(window)
-        .focus(this.game.play.bind(this.game))
-        .blur(this.game.pause.bind(this.game));
+        .focus(function() {
+          if (this.game.started) {
+            this.game.play.bind(this.game);
+          }
+        }.bind(this))
+        .blur(function() {
+          if (this.game.started) {
+            this.game.pause.bind(this.game);
+          }
+        }.bind(this));
     }
   }
 };
 
-
-window.ResponsiveSnake = ResponsiveSnake;
+//Handle Module Exports
+if (typeof module !== 'undefined' && !window) {
+  //Export to NODE
+  module.exports = ResponsiveSnake;
+} else if (typeof window !== 'undefined') {
+  //Export To Browser
+  window.ResponsiveSnake = ResponsiveSnake;
+}