Initial commit

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,11 @@
+# Bug Saves World
+You are the last bug left on planet Earth, the only way to make it out (to safety) alive is to collect all the secret tokens hidden in each level. Sounds easy enough right? :)
+
+The map will feature terrains meant to test your skills as a bug, that is crawling, jumping and sometimes flying enemy monsters that will always attack you if your in their range. 
+
+# Have 1-3 different game levels
+Featuring different background colors. And maybe monsters or map changes?
+
+# Bugs
+Ladybug - 6 limbs (very speedy, not the best at jumping)
+Bee - 6 limbs (three pairs of segmented legs) + wings but the wings don't count in this game :)

game-design.html

@@ -0,0 +1,40 @@
+<div class="sky">
+  <div class="cloud"></div>
+  <div class="cloud cloud--two"></div>
+  <div class="cloud cloud--three"></div>
+<!--   <h1>Bug Saves The World</h1> -->
+</div>
+
+<div class="lightning"></div>
+
+<div class="ladybug">
+  <div class="spot"></div>
+  <div class="spot spot--two"></div>
+  <div class="spot spot--three"></div>
+  <div class="spot spot--four"></div>
+  <div class="spot spot--five"></div>
+  <div class="ladybug-face">
+    <div class="ladybug-eye">
+      <div class="pupil"></div>
+    </div>
+    <div class="ladybug-eye eye--two">
+      <div class="pupil"></div>
+    </div>
+    <div class="mouth"></div>
+  </div>
+  <div class="ladybug-leg"></div>
+  <div class="ladybug-leg ladybug-leg--two"></div>
+  <div class="ladybug-leg ladybug-leg--three"></div>
+  <div class="ladybug-leg ladybug-leg--four"></div>
+  <div class="ladybug-leg ladybug-leg--five"></div>
+  <div class="ladybug-leg ladybug-leg--six"></div>
+</div>
+
+<div class="light-background"></div>
+
+<!-- Platforms for light background -->
+<div class="platform-light-bg"></div>
+
+<!-- todo: create realistic looking grass using a few gradients -->
+
+<div class="rain-drop"></div>

game.js

@@ -0,0 +1,84 @@
+let config = {
+    // tries to use WebGL renderer if supported and falls back to canvas
+    type: Phaser.AUTO,
+    // Set the dimensions for canvas element that
+    // Phaser creates, this is the resolution
+    // game displays in
+    width: 800,
+    height: 600, 
+    // handle physics
+    physics: {
+        default: 'arcade',
+        acade: {
+            gravity: {
+                y: 200
+            }
+        }
+    },
+    // Default scene
+    scene: {
+        preload: preload,
+        create: create
+    }
+
+}
+
+// Create an instance of a Phaser.Game object 
+// with the configuration above passed to it
+var game = new Phaser.Game(config);
+
+// Load Assets 
+// Define a Scene function called "preload"
+// where assets are loaded
+function preload ()
+{
+    // Load Image Assets
+    this.load.image("deepBlueSky", "assets/sky-deep-blue.png");
+    this.load.image("lightBackground", "assets/yellow-bg.png");
+    this.load.image("cloud", "assets/tacky-cloud.png");
+    this.load.image("star", "assets/star.png");
+
+    // todo: make ladybug a spritesheet
+    this.load.image("ladybug", "assets/ladybug-transparent.png");
+
+    // todo: add special items/keys to be found e.g. stars/special item
+
+    // todo: load platforms
+
+    // load a spritesheet
+    this.load.spritesheet("dude", "assets/dude.png", {
+        frameWidth: 32,
+        frameHeight: 48
+    });
+}
+
+// Creating Game Objects
+// game objects are displayed in the order
+// you create them (in a stack context)
+function create ()
+{
+    // syntax: add.image(xCoord, yCoord, key)
+    this.add.image(400, 300, "deepBlueSky");
+    this.add.image(400, 300, "lightBackground");
+    this.add.image(150, 200, "cloud").setScale(.25);
+    this.add.image(300, 100, "cloud").setScale(.3);
+    this.add.image(580, 100, "cloud").setScale(.3);
+    this.add.image(100, 100, "star").setScale(.9);
+    this.add.image(450, 50, "star").setScale(.9);
+    this.add.image(650, 180, "star").setScale(.9);
+    this.add.image(400, 400, "ladybug").setScale(.2);
+
+    // todo: add physics, create staticGroup()
+
+    // handle jumping interation from platform to platform
+}
+
+
+class BugCharacter {
+    constructor(username, color) {
+        this.username = username;
+        this.color = color;
+        this.posX = 0;
+        this.posY = 0;
+    }
+}

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Phaser Starter</title>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
+</head>
+<body>
+    <script src="./game.js"></script>
+</body>
+</html>