enlarged the star systems and slowed the ship down

zachio · Nov 5, 2018 · d473b37 · d473b37
1 parent a095b0b
commit d473b37
Show file tree

Hide file tree

Showing 13 changed files with 266 additions and 81 deletions.
diff --git a/audio/Eluvium.mp3 b/audio/Eluvium.mp3
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Orbitron');
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>StarBorn</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css" />
     <script src="js/game.js" charset="utf-8"></script>
     <script type="text/javascript">
       /* global game */

diff --git a/js/game.config.js b/js/game.config.js
@@ -14,7 +14,10 @@ game.config = {
     "js/game.assets.js",
     "js/game.star.js",
     "js/game.planet.js",
+    "js/game.title.js",
     ],
     sprites : [],
-    audio: []
+    audio: [
+      "audio/Eluvium.mp3"
+      ]
 }
diff --git a/js/game.controls.js b/js/game.controls.js
@@ -13,13 +13,17 @@ game.controls = {
       }
     },
     action: function() {
-      if(game.view == "galaxy" && game.galaxy.starAt(Math.floor(game.player.x), Math.floor(game.player.y))) {
-        game.player.galaxy.x = game.player.x;
-        game.player.galaxy.y = game.player.y;
+      var isStar = game.galaxy.starAt(Math.floor(game.player.x), Math.floor(game.player.y));
+      if(game.view == "galaxy" && isStar) {
+        game.player.galaxy.x = Math.floor(game.player.x);
+        game.player.galaxy.y = Math.floor(game.player.y);
         game.player.x = 0;
         game.player.y = 0;
         game.view = "star";
       }
+      if(game.view == "title") {
+        game.view = "galaxy";
+      }
     }
 };
 

diff --git a/js/game.debug.js b/js/game.debug.js
@@ -14,6 +14,8 @@ game.debug = {
     draw: {
       star: function() {
         var debug = game.debug;
+        game.ctx.font = "10px Arial";
+        game.ctx.textAlign = "left";
         game.ctx.fillStyle = debug.background;
         game.ctx.fillRect(20, 20, 200, 250);
         game.ctx.fillStyle = debug.textColor;
@@ -30,6 +32,8 @@ game.debug = {
       }
     },
     drawLog: function () {
+      game.ctx.font = "10px Arial";
+      game.ctx.textAlign = "left";
       game.ctx.fillStyle = this.background;
       game.ctx.fillRect(20, 20, 200, 250);
       game.ctx.fillStyle = this.textColor;
@@ -49,28 +53,35 @@ game.debug = {
       this.log("total planets: " + game.galaxy.planetCount(Math.floor(game.player.galaxy.x), Math.floor(game.player.galaxy.y)));
     },
     drawGrid: function(){
+        var scale = game.getScale();
+        var tile = {
+          width: game.tile.width * scale,
+          height: game.tile.height * scale
+        };
+
         game.ctx.lineWidth = 1;
         //Chunks are drawn 4 x 4
         for(var chunkX = game.chunk.x - 2; chunkX <= game.chunk.x + 2; chunkX++ ) {
           for(var chunkY = game.chunk.y - 2; chunkY <= game.chunk.y + 2; chunkY++) {
             game.ctx.strokeStyle = "red";
-            for(var x = chunkX * game.chunk.width * game.scale; x < game.chunk.width * game.scale * chunkX + game.chunk.width * game.scale; x++) {
-              for(var y = chunkY * game.chunk.height * game.scale; y < game.chunk.height * game.scale * chunkY + game.chunk.height * game.scale; y++) {
+            for(var x = chunkX * game.chunk.width ; x < game.chunk.width  * chunkX + game.chunk.width; x++) {
+              for(var y = chunkY * game.chunk.height ; y < game.chunk.height  * chunkY + game.chunk.height; y++) {
+
                 game.ctx.strokeRect(
-                    x * game.tile.width * game.scale - game.player.x * game.tile.width * game.scale + window.innerWidth / 2,
-                    y * game.tile.height * game.scale - game.player.y * game.tile.height * game.scale + window.innerHeight / 2,
-                    game.tile.width * game.scale,
-                    game.tile.height * game.scale
+                    x * tile.width - game.player.x * tile.width + window.innerWidth / 2,
+                    y * tile.height - game.player.y * tile.height  + window.innerHeight / 2,
+                    tile.width,
+                    tile.height 
                 );
               }
             }
             //draw chunk
             game.ctx.strokeStyle = "lime";
             game.ctx.strokeRect(
-              chunkX * game.chunk.width * game.scale * game.tile.width * game.scale - game.player.x * game.tile.width * game.scale + window.innerWidth / 2,
-              chunkY * game.chunk.height * game.scale * game.tile.height * game.scale - game.player.y * game.tile.height * game.scale + window.innerHeight / 2,
-              game.tile.width * game.scale * game.chunk.width,
-              game.tile.height * game.scale * game.chunk.height * game.scale
+              chunkX * game.chunk.width * tile.width - game.player.x * tile.width  + window.innerWidth / 2,
+              chunkY * game.chunk.height * tile.height - game.player.y * tile.height  + window.innerHeight / 2,
+              tile.width * game.chunk.width,
+              tile.height * game.chunk.height 
             );
           }
         }

diff --git a/js/game.galaxy.js b/js/game.galaxy.js
@@ -3,6 +3,7 @@ var game = game || {};
 game.galaxy = {
     width: 65535,
     height: 65535,
+    scale: 2,
     idAt: function (x, y) {
       var id = y * this.width + x;
       return id;
@@ -18,6 +19,11 @@ game.galaxy = {
         }
     },
     draw: function () {
+      var scale = game.getScale();
+      var tile = {
+        width: game.tile.width * scale,
+        height: game.tile.height * scale
+      };
       //Chunks are drawn 4 x 4
       for(var chunkX = game.chunk.x - 2; chunkX <= game.chunk.x + 2; chunkX++ ) {
         for(var chunkY = game.chunk.y - 2; chunkY <= game.chunk.y + 2; chunkY++) {
@@ -30,8 +36,8 @@ game.galaxy = {
                 game.ctx.lineWidth = 5;
                 game.ctx.beginPath();
                 game.ctx.arc(
-                  x * game.tile.width - game.player.x * game.tile.width + game.tile.width / 2 + window.innerWidth / 2,
-                  y * game.tile.height - game.player.y * game.tile.height + game.tile.height / 2 + window.innerHeight / 2,
+                  x * tile.width - game.player.x * tile.width + tile.width / 2 + window.innerWidth / 2,
+                  y * tile.height - game.player.y * tile.height + tile.height / 2 + window.innerHeight / 2,
                   game.star.size(x, y), //star size
                   0,
                   2 * Math.PI

diff --git a/js/game.js b/js/game.js
@@ -13,23 +13,37 @@ var game = game || {
       } else {
         this.isStar = false;
       }
-    },
-    scale: 1,
+    }
+  },
+  getScale: function() {
+    if(game.view == "star") {
+      return game.star.scale;
+    } else {
+      return game.galaxy.scale;
+    }
   },
   ctx: null,
   draw: function () {
     switch(this.view) {
+      case "title":
+        game.galaxy.draw();
+        game.debug.drawGrid();
+        //game.player.draw();
+        game.title.draw();
+        // game.debug.drawLog();
+        break;
       case "galaxy":
         game.galaxy.draw();
-        // game.debug.drawGrid();
+        game.debug.drawGrid();
         game.player.draw();
         game.debug.drawLog();
         break;
       case "star":
+        game.star.background.draw();
         game.star.draw.sun();
         game.star.draw.planets();
         game.player.radar.draw();
-        // game.debug.drawGrid();
+        game.debug.drawGrid();
         game.player.draw();
         game.debug.draw.star();
         break;
@@ -65,6 +79,7 @@ var game = game || {
     });
 
   },
+  audio: [],
   load: {
         total: {
           scripts: 0,
@@ -87,11 +102,13 @@ var game = game || {
                 script.addEventListener("load", function() {
                     game.load.total.scripts++;
                     if(game.load.total.scripts == game.config.scripts.length) {
-                            game.load.sprites();
-                            game.load.audio();
-                            //perlin.js noise
-                            /* global noise */
-                            noise.seed(game.config.seed);
+                      //Scripts are ready to use
+                      game.star.background.init();
+                      game.loop();
+                      game.load.audio();
+                      //perlin.js noise
+                      /* global noise */
+                      noise.seed(game.config.seed);
                     }
                     console.log(this.src.substring(this.src.lastIndexOf('/')+1) + " loaded...");
                 });
@@ -102,6 +119,7 @@ var game = game || {
 
         },
         sprites: function () {
+          //Plan to use this part for loading the sprites
           if(game.config.sprites.length) {
             for(var i = 0; i < game.config.sprites.length; i++) {
              // game.config.sprites[i] = new game.graphics.Sprite(game.config.sprites[i]);
@@ -111,8 +129,16 @@ var game = game || {
           }
         },
         audio: function () {
-          if(game.config.audio.length) {
-
+          for(var i = 0; i < game.config.audio.length; i++) {
+            var src = game.config.audio[i];
+            var audio = document.createElement("audio");
+            audio.setAttribute("type", "audio/mpeg");
+            audio.setAttribute("src", src); 
+            this.total.audio++;
+            game.audio.push(audio);
+            audio.addEventListener("canplay", function(){
+              audio.play();
+            });
           }
         }
     },
@@ -128,5 +154,5 @@ var game = game || {
     game.player.update();
     game.debug.fps.update();
   },
-  view: "galaxy"
+  view: "title",
 }
diff --git a/js/game.load.js b/js/game.load.js
@@ -7,7 +7,14 @@ game.load = {
           audio: 0
         },
         scripts: function () {
-          if(game.config.scripts.length) {
+          console.log("loading config script...");
+          var script = document.createElement("script");
+          script.setAttribute("src", "js/game.config.js");
+          document.head.appendChild(script);
+          script.addEventListener("load", function(){
+            console.log(this.src.substring(this.src.lastIndexOf('/')+1) + " loaded...");
+            if(game.config.scripts.length) {
+            console.log("loading game scripts...");
             for(var i = 0; i < game.config.scripts.length; i++) {
                 var script = document.createElement("script");
                 var src = game.config.scripts[i];
@@ -18,13 +25,16 @@ game.load = {
                             game.load.sprites();
                             game.load.audio();
                             //perlin.js noise
+                            /* global noise */
                             noise.seed(game.config.seed);
                     }
-                    console.log(this.src.substring(url.lastIndexOf('/')+1) + " loaded...");
+                    console.log(this.src.substring(this.src.lastIndexOf('/')+1) + " loaded...");
                 });
                 document.head.appendChild(script);
             }
           }
+          });
+
         },
         sprites: function () {
           if(game.config.sprites.length) {
@@ -37,7 +47,13 @@ game.load = {
         },
         audio: function () {
           if(game.config.audio.length) {
-
+            var eluvium = game.config.audio[0];
+            var audio = document.createElement("audio");
+            audio.setAttribute("type", "audio/mpeg");
+            audio.setAttribute("src", eluvium); 
+            audio.addEventListener("load", function(){
+              audio.play();
+            });
           }
         }
     };
diff --git a/js/game.math.js b/js/game.math.js
@@ -1,7 +1,7 @@
 var game = game || {};
 
 game.math = {
-    //Gives the angle in radians
+    //Returns the angle in radians
     angle: function (p1x, p1y, p2x, p2y) {
       return Math.atan2(p2y - p1y, p2x - p1x);
     },
@@ -13,6 +13,14 @@ game.math = {
       /* global noise */
       return Math.floor(Math.abs(noise.simplex2(x + game.config.seed, y + game.config.seed)) * (max - min) + min);
     },
+    random: {
+      choice: function(choices) {
+        return choices[Math.round(this.range(0, choices.length-1))];
+      },
+      range: function(min, max) {
+        return (min + (Math.random() * (max - min)));
+      }
+    },
     // Position relative to the player position used to draw on canvas
     position: function(x, y) {
       return {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import url('https://fonts.googleapis.com/css?family=Orbitron');