adding testing exercises

canvas_exercise/shapes_game/index.js

@@ -1,15 +1,88 @@
 window.addEventListener("load", function() {
+  //flow of what needs to happen:
+  //drawGameStartText - game starts text is drawn, text is cleared
+  //game starts when space bar is hit
+  //drawRandomShape - draws random shape
+  // shape attached to key
+  // check if key hit matches expectedkeymap
+  // also need to reassaign expectedkey from undefined to it's shape
+  var squareSize = 150;
+  var shapesArr = [
+    "squareWhite",
+    "triWhite",
+    "squareRed",
+    "triRed",
+  ];
+  var currentShape = undefined;
 
-  function clear(ctx, width, heigt) {
+  function clear(ctx, width, height) {
+    //clears the screen
+    ctx.clearRect(0, 0, width, height);
   }
 
   function drawRandomShape(ctx, width, height) {
+    //draws square or triangle
+    //needs to be in a different location everytime called
+    clear(ctx, width, height);
+    var shapeNumber = Math.floor(Math.random() * 4);
+    var x = Math.floor(Math.random() * (width - squareSize));
+    var y = Math.floor(Math.random() * (height - squareSize));
+    draw(ctx, shapesArr[shapeNumber], x, y);
+    updateScore();
+  }
+
+  function updateScore(){
+    var span = document.getElementById("score-val");
+    span.innerText = points;
+  }
+
+  function draw(ctx, shape, x, y) {
+    currentShape = shape;
+    switch (shape) {
+      case "squareWhite":
+        ctx.fillStyle = "white";
+        ctx.fillRect(x, y, squareSize, squareSize);
+        break;
+      case "triWhite":
+        ctx.fillStyle = "white";
+        ctx.beginPath();
+        ctx.moveTo(x,y);
+        ctx.lineTo(x + squareSize, y + squareSize);
+        ctx.lineTo(x, y + squareSize);
+        ctx.fill();
+        ctx.closePath();
+        break;
+      case "squareRed":
+        ctx.fillStyle = "red";
+        ctx.fillRect(x, y, squareSize, squareSize);
+        break;
+      case "triRed":
+        ctx.fillStyle = "red";
+        ctx.beginPath();
+        ctx.moveTo(x,y);
+        ctx.lineTo(x + squareSize, y + squareSize);
+        ctx.lineTo(x, y + squareSize);
+        ctx.fill();
+        ctx.closePath();
+        break;
+    }
   }
 
   function drawGameStartText(ctx, width, height, score) {
+    gameOn = true;
+    ctx.font = '45px serif';
+    ctx.fillStyle = "white";
+    ctx.fillText('To start game, hit the space bar', 100, 300);
   }
 
   function restartGame(ctx, width, height) {
+    //gets called after finish first game
+    //timer reset
+    //score reset
+    //game cleared
+    //addEventListener for hitting the spacebar
+    //then call generate random shape
+
   }
 
   var canvas = document.getElementById("shapes-game"),
@@ -24,13 +97,42 @@ window.addEventListener("load", function() {
       timerSpan = document.getElementById("time-remaining"),
       scoreSpan = document.getElementById("score-val"),
       seconds = 3,
+      points = 0,
       intervalId;
 
   canvas.width = width;
   canvas.height = height;
 
-  document.addEventListener("keyup", function() {
-
+  document.addEventListener("keyup", function(event) {
+    if (event.keyCode === 32) { // spacebar
+      drawRandomShape(ctx, width, height);
+
+    } else if (event.keyCode === 37) { // left
+      if (currentShape === "triRed") {
+        points++;
+      } else {
+        points--;
+      }
+    } else if (event.keyCode === 38) { // up
+      if (currentShape === "triWhite") {
+        points++
+      } else {
+        points--;
+      }
+    } else if (event.keyCode === 39) { // right
+      if (currentShape === "squareWhite") {
+        points++;
+      } else {
+        points--;
+      }
+    } else if (event.keyCode === 40) { // down
+      if (currentShape === "squareRed") {
+        points++;
+      } else {
+        points--;
+      }
+    }
+    drawRandomShape(ctx, width, height);
   });
+  drawGameStartText(ctx, width, height, 0);
 });
-

es2015_exercise/readme.md

@@ -1,4 +1,4 @@
-## ES2015 Exercise
+# ES2015 Exercise
 
 Convert the following es5 code blocks into es2015 code:
 
@@ -11,23 +11,36 @@ var person = {
         }.bind(this),1000)
     }
 }
+var person2 = {
+    fullName: "Harry Potter",
+    sayHi: function(){
+        setTimeout(() => {
+            console.log(`Your name is ${this.fullName}`)
+        },1000)
+    }
+}
 ```
 
 ```javascript
 var name = "Josie"
 console.log("When " + name + " comes home, so good")
+console.log(`When ${name} comes home, so good`);
+//Steely Dan?
 ```
 
 ```javascript
 var DO_NOT_CHANGE = 42;
 DO_NOT_CHANGE = 50; // stop me from doing this!
+const doNotChange = 42;
 ```
 
 ```javascript
 var arr = [1,2]
 var temp = arr[0]
 arr[0] = arr[1]
 arr[1] = temp
+var [a, b] = [1, 2];
+[a, b] = [b, a];
 ```
 
 ```javascript
@@ -36,18 +49,24 @@ function double(arr){
         return val*2
     });
 }
+
+function double1(arr){
+  return arr.map(value => value * 2);
+}
 ```
 
 ```javascript
 var obj = {
     numbers: {
         a: 1,
         b: 2
-    } 
+    }
 }
 
 var a = obj.numbers.a;
 var b = obj.numbers.b;
+
+var {a, b, c} = obj.numbers;
 ```
 
 ```javascript
@@ -62,14 +81,91 @@ function add(a,b){
     }
     return a+b
 }
+function add(a = 10, b = 10) {
+  return a + b;
+}
+//or better
+var add = (a = 10, b = 10) => a + b;
 ```
 
 Research the following functions - what do they do?
 
-`Array.from` -
+`Array.from` - It allows you to create arrays from array like objects, things with a length property and indexed elements - has the optional parameter .map() to perform a function on each element in the new array. which syntax would be like: Array.from(obj, mapFn, thisArg) Fancy using arrow functions: Array.from([1, 2, 3], x => x + x) //[2, 4, 6]
+
+`Object.assign` - _not a deep clone_ but basically copies the enumerable and own properties from a source object to a target object. Uses get on source and set on target - so it assigns properties vs just copying or defining new properties example of cloning an object - BUT not a deep clone
+
+```javascript
+var obj = {a: 1};
+var copy = Object.assign({}, obj)
+console.log(copy); //{a: 1}
+```
+
+using to merge objects:
+
+```javascript
+var o1 = {a : 1};
+var o2 = {b : 2};
+var o3 = {c : 3};
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); //{a: 1, b: 2, c: 3}
+```
+
+watch out when you merge objects with the same properties though ==> the properties are overwritten by other objects that have the properties later in the parameters order
+
+```javascript
+var o1 = {a : 1, b: 1, c: 1};
+var o2 = {b : 2, c: 2};
+var o3 = {c : 3};
+var obj =Object.assign({}, o1, o2, o3);
+console.log(obj); //{a: 1, b: 2, c: 3}
+```
+
+Also:
+
+```javascript
+var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('foo');
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Primitives will be wrapped, null and undefined will be ignored.
+// Note, only string wrappers can have own enumerable properties.
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+```
 
-`Object.assign` -
+`Array.includes` - determines if an array includes a certain element, returns a boolean.
 
-`Array.includes` -
+syntax:
 
-`String.startsWith` -
+```javascript
+arr.includes(searchElement);
+arr.includes(searchElement, fromIndex);
+```
+
+Parameters: the element to search for and the optional fromIndex: the position in this array at which to begin searching for the searched element, a negative value searches from the index of array.length + fromIndex. defaults to zero
+
+```javascript
+var a = [1, 2, 3];
+a.includes(2); //true
+a.includes(4); //false
+```
+
+`String.startsWith` - determines whether a string begins with the characters of a specified string, returning boolean
+
+syntax:
+
+```javascript
+stringWhatever.startsWith("thing I', searching for", position);
+```
+
+parameters: searchString: characters to be searched for at the start of this string position: (optional) the position in this string at which to begin searching for searchString, defaults to zero _Also case sensitive_
+
+```javascript
+//startswith
+var str = 'To be, or not to be, that is the question.';
+
+console.log(str.startsWith('To be'));         // true
+console.log(str.startsWith('not to be'));     // false
+console.log(str.startsWith('not to be', 10)); // true
+```