inland-empire-software-development · rurru · Aug 31, 2019 · Sep 1, 2019
diff --git a/README.md b/README.md
@@ -23,14 +23,49 @@
 </p>
 
 <p align="center">
-  Welcome to the official repository for the IESD Hack Day event.
+  August 2019 IESD Hack Day event.
 </p>
 
 
 ## **Getting Started**
 
-Look under branches and find the appropriate month and year for the Hack Day you're participating in. Each branch has its own documentation for getting started. 
+This repository has the resources to get you prepared for the Hack Day event. 
+
+```Starter code has been update - 8/31/19 @ 1:55 PM.```
 
 If you have any questions, please ask on our [Slack](https://ie-sd.slack.com). We welcome everyone to our Slack, so don't be afraid to join! Have fun coding!
 
 **<a href="https://bit.ly/2C0umfQ">Join our Slack!</a>**
+
+## **Concepts to Review**
+Resources section below has links for these concepts. 
+- Canvas 
+- RequestAnimationFrame (JS Method)
+- Object Oriented JavaScript 
+- Prototypal Inheritance 
+- Sprites
+- Keyboard Events 
+
+## **Resources**
+List will be updated up until the day of the Hack Day event.
+- <a href="https://jlongster.com/Making-Sprite-based-Games-with-Canvas">Making Sprite Based Games with Canvas</a> (2013 article - still relevant)
+- <a href="http://blog.sklambert.com/html5-canvas-game-2d-collision-detection#d-collision-detection">HTML5 Canvas Game: 2D Collision Detection</a>
+- <a href="https://stackoverflow.com/questions/13916966/adding-collision-detection-to-images-drawn-on-canvas">Adding collision detection to images drawn on canvas on StackOverflow</a>
+- <a href="https://lowrey.me/modals-in-pure-es6-javascript/">Modals in Pure ES6 JavaScript</a>
+- <a href="https://css-tricks.com/snippets/javascript/javascript-keycodes/">KeyboardEvent Value (keyCodes, metaKey, etc) via CSS-Tricks</a>
+
+### **RequestAnimationFrame**
+
+The `window.requestAnimationFrame()` method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">Read more about this here.</a>
+
+### **Object-Oriented JavaScript**
+Make sure you are comfortable with Object-Oriented JavaScript:
+
+- What is an object?
+- How is an object different from a primitive in JavaScript (e.g., can a primitive have methods?)
+- What are some ways to create or instantiate a new object?
+- How do you modify properties, or add/remove properties from an object?
+- What is a constructor function (or class)?
+- What is `this`? What does it refer to and how is it used in different contexts (i.e., in a constructor function, a method, etc.)?
+- How do you add a property or method to a constructor's prototype?
+- What is prototypal inheritance and how is it implemented?
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,3 @@
+body {
+    text-align: center;
+}
diff --git a/images/Heart.png b/images/Heart.png
diff --git a/images/Key.png b/images/Key.png
diff --git a/images/Rock.png b/images/Rock.png
diff --git a/images/Selector.png b/images/Selector.png
diff --git a/images/Star.png b/images/Star.png
diff --git a/images/char-boy.png b/images/char-boy.png
diff --git a/images/char-cat-girl.png b/images/char-cat-girl.png
diff --git a/images/char-horn-girl.png b/images/char-horn-girl.png
diff --git a/images/char-pink-girl.png b/images/char-pink-girl.png
diff --git a/images/char-princess-girl.png b/images/char-princess-girl.png
diff --git a/images/enemy-bug.png b/images/enemy-bug.png
diff --git a/images/gem-blue.png b/images/gem-blue.png
diff --git a/images/gem-green.png b/images/gem-green.png
diff --git a/images/gem-orange.png b/images/gem-orange.png
diff --git a/images/grass-block.png b/images/grass-block.png
diff --git a/images/stone-block.png b/images/stone-block.png
diff --git a/images/water-block.png b/images/water-block.png
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hack Day - Frogger Clone Starter Code</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <script src="js/resources.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/engine.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,183 @@
+//Parent object for sprites
+class Populate {
+  constructor () {
+    this.x = 0;
+    this.y = 0;
+    this.speed = 0;
+    this.sprite = "";
+    this.sideways = 101;
+    this.upDown = 83;
+  }
+
+  render () {
+    ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
+  }
+
+  reset () {
+    this.x = 0;
+    this.y = 415;
+  }
+}
+
+//Player class
+class Player extends Populate {
+  constructor () {
+    super();
+    this.x = 0;
+    this.y = 415;
+    this.sprite = "images/char-boy.png";
+    this.blueGemsCollected = 0;
+    this.greenGemsCollected = 0;
+    this.orangeGemsCollected = 0;
+    this.gemsLeft = 0;
+    this.score = 0;
+  }
+
+//key input for Player
+  handleInput (input) {
+    switch (input) {
+      case "left":
+        if (this.x >= this.sideways) {
+          this.x -= this.sideways;
+        }
+        break;
+      case "right":
+        if (this.x <= this.sideways * 3) {
+          this.x += this.sideways;
+        }
+        break;
+      case "up":
+        if (this.y >= 83) {
+          this.y -= this.upDown;
+        }
+        break;
+      case "down":
+        if (this.y <= this.upDown * 4) {
+          this.y += this.upDown;
+        }
+        break;
+    }
+  }
+
+  //updates player and sets condition for collision & win
+  update () {
+    for (let enemy of allEnemies) {
+      if (this.y === enemy.y && (enemy.x + enemy.sideways / 2 > this.x && enemy.x < this.x + this.sideways / 2)) {
+        this.reset();
+      }
+    }
+
+      for (let gem of allGems) {
+        if ((gem.x + gem.sideways / 2 > this.x && gem.x < this.x + this.sideways / 2) &&
+            (gem.y - gem.upDown / 2 < this.y && gem.y > this.y - this.upDown / 2)) {
+              console.log(gemsLeft);
+          gem.x = -10000;
+          gem.y = -10000;
+          gemsLeft--;
+
+          switch (gem.color) {
+            case "blue": 
+              this.blueGemsCollected++;
+              this.score += 100;
+              break;
+            case "green":
+              this.greenGemsCollected++;
+              this.score += 250;
+              break;
+            case "orange": 
+              this.orangeGemsCollected++;
+              this.score += 500;
+              break;
+            default:
+              break;
+          }
+
+        }
+
+        if (gemsLeft === 0 && this.score > 0) {
+          resetGems();
+        }
+
+    }
+  }
+}
+
+const player = new Player();
+
+//Array to hold Enemy objects
+const allEnemies = [];
+
+//Array to hold gems for points
+let allGems = [];
+
+//Enemy class
+class Enemy extends Populate {
+  constructor (x, y, speed) {
+    super();
+    this.x = x;
+    this.y = y;
+    this.speed = speed;
+    this.sprite = "images/enemy-bug.png";
+    this.enemySprite = this.sprite;
+  }
+
+  //Smooth movement of Enemy objects across gameboard
+  update (dt) {
+    if (this.x < this.sideways * 5) {
+      this.x += this.speed * dt;
+    } else {
+      this.x = -100;
+    }
+  }
+}
+
+class Gem extends Populate {
+  constructor (color) {
+    super();
+    this.x = Math.floor(Math.random() * 5) * 101 + 25;
+    this.y = Math.floor(Math.random() * 5) * 83 + 35; 
+    this.color = color;
+    this.speed = 0;
+    this.sprite = "images/gem-"+color+".png";
+    this.sideways = 50;
+    this.upDown = 85;
+  }
+}
+
+const enemy1 = new Enemy(101, 83, 150);
+const enemy2 = new Enemy(404, 166, 350);
+const enemy3 = new Enemy(0, 249, 375);
+const enemy4 = new Enemy(0, 83, 100);
+let gemsLeft = 0;
+resetGems();
+
+function resetGems() {
+  allGems = [];
+
+  for (i = 0; i < Math.random() * 3 + 1; i++) 
+  {allGems.push(new Gem("blue"));
+  gemsLeft++;
+console.log(gemsLeft);}
+
+  for (i = 0; i < Math.random() * 3 + 1; i++) 
+  {allGems.push(new Gem("green"));
+  gemsLeft++;}
+
+  for (i = 0; i < Math.random() * 3 + 1; i++) 
+  {allGems.push(new Gem("orange"));
+  gemsLeft++;}
+}
+
+allEnemies.push(enemy1, enemy2, enemy3, enemy4);
+
+// Player.handleInput() method. You don't need to modify this.
+document.addEventListener("keyup", function (e) {
+  var allowedKeys = {
+    37: "left",
+    38: "up",
+    39: "right",
+    40: "down"
+  };
+
+  player.handleInput(allowedKeys[e.keyCode]);
+});