testing_exercise

canvas_exercise/shapes_game/index.js

@@ -1,36 +1,94 @@
 window.addEventListener("load", function() {
+  var canvas = document.getElementById("shapes-game"),
+    height = canvas.scrollHeight,
+    width = canvas.scrollWidth,
+    gameOn = false,
+    expectedKey = undefined,
+    ctx = canvas.getContext('2d'),
+    // white triangle = up, red square = down,
+    // red triangle = left, white square = right
+    expectedKeysMap = {white0: 38, red1: 40, red0: 37, white1: 39},
+    timerSpan = document.getElementById("time-remaining"),
+    scoreSpan = document.getElementById("score-val"),
+    seconds = 3,
+    intervalId;
+
+  canvas.width = width;
+  canvas.height = height;
 
-  function clear(ctx, width, heigt) {
+  drawGameStartText()
+
+  function clear() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
   }
 
-  function drawRandomShape(ctx, width, height) {
+  function drawRandomShape() {
+    var randomShape = ['white0', 'red1', 'red0', 'white1'][Math.floor(Math.random()*4)],
+        x = Math.floor(Math.random()*(width-100)),
+        y = Math.floor(Math.random()*(height-100));
+        ctx.fillStyle = randomShape.slice(0, -1);
+
+    clear()
+
+    function square(){
+      ctx.fillRect(x,y,100,100);
+    }
+
+    function triangle(){
+      ctx.beginPath();
+      ctx.moveTo(x,y);
+      ctx.lineTo(100+x, 100+y);
+      ctx.lineTo(x, 100+y);
+      ctx.fill();
+      ctx.closePath();
+    }
+
+    if(+randomShape[randomShape.length-1] === 1){
+      square()
+    } else {
+      triangle()
+    }
+    expectedKey = randomShape;
   }
 
-  function drawGameStartText(ctx, width, height, score) {
+
+  function drawGameStartText() {
+    clear()
+    ctx.font = '30px serif';
+    ctx.fillStyle = 'white';
+    ctx.fillText('Press the space bar to start a new game', 150, 350);
   }
 
-  function restartGame(ctx, width, height) {
+  function restartGame() {
+    timerSpan.innerText = 30;
+    scoreSpan.innerText = 0;
+    gameOn = false;
+
+    drawGameStartText()
   }
 
-  var canvas = document.getElementById("shapes-game"),
-      height = canvas.scrollHeight,
-      width = canvas.scrollWidth,
-      gameOn = false,
-      expectedKey = undefined,
-      ctx = canvas.getContext('2d'),
-      // white triangle = up, red square = down,
-      // red triangle = left, white square = right
-      expectedKeysMap = {white0: 38, red1: 40, red0: 37, white1: 39},
-      timerSpan = document.getElementById("time-remaining"),
-      scoreSpan = document.getElementById("score-val"),
-      seconds = 3,
-      intervalId;
+  document.addEventListener("keyup", function(e) {
+    if(gameOn){
+      if(e.keyCode === expectedKeysMap[expectedKey]){
+        scoreSpan.innerText = +scoreSpan.innerText + 1;
+      } else {
+        scoreSpan.innerText = +scoreSpan.innerText - 1;
+      }
+      drawRandomShape()
+    }
 
-  canvas.width = width;
-  canvas.height = height;
+    if(!gameOn && e.keyCode === 32){
+      gameOn = true;
+      var timerId = setInterval(function(){
+          timerSpan.innerText = +timerSpan.innerText - 1;
+      },1000);
 
-  document.addEventListener("keyup", function() {
-
+      setTimeout(function(){
+         clearTimeout(timerId);
+         restartGame();
+      },31000);
+    }
   });
+
 });
 

es2015_exercise/es2015.js

@@ -0,0 +1,75 @@
+// ## ES2015 Exercise
+
+// Convert the following es5 code blocks into es2015 code:
+
+// javascript
+var person = {
+  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`)
+
+
+// javascript
+// const DO_NOT_CHANGE = 42;
+// DO_NOT_CHANGE = 50; // stop me from doing this!
+
+
+// javascript
+var arr = [1,2]
+// var temp = arr[0]
+// arr[0] = arr[1]
+// arr[1] = temp
+var [a,b] = arr,
+    arr = [b,a];
+
+console.log(arr)
+
+
+// javascript
+function double(arr){
+    return arr.map(val => val*2);
+}
+
+// javascript
+var obj = {
+  numbers: {
+    a: 1,
+    b: 2
+  }
+}
+
+// var a = obj.numbers.a;
+// var b = obj.numbers.b;
+
+var {a, b} = obj.numbers;
+
+// javascript
+function add(a=10,b=10){
+  return a+b
+}
+
+
+// Research the following functions - what do they do?
+
+// `Array.from` -
+  // creates a new Array instance from an array-like or iterable object
+  // for strings, split('') is similar to this. What is the difference?
+
+// `Object.assign` -
+  //merge and/or clone objects
+
+// `Array.includes` -
+  //Checks to see if an element is in an array.
+
+// `String.startsWith` -
+  //Checks to see if the beginning characters starts with a specific string.
+