fixing undefined variables and adding ES class version of OOJS assess…

…ment
jackcoolpython · Sep 19, 2018 · da4f13e · da4f13e
1 parent e977f44
commit da4f13e
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 1 deletion.
diff --git a/javascript/apis/fetching-data/can-store-xhr/can-script.js b/javascript/apis/fetching-data/can-store-xhr/can-script.js
@@ -161,7 +161,7 @@ function initialize() {
           // Convert the blob to an object URL — this is basically an temporary internal URL
           // that points to an object stored inside the browser
           var blob = request.response;
-          objectURL = URL.createObjectURL(blob);
+          var objectURL = URL.createObjectURL(blob);
           // invoke showProduct
           showProduct(objectURL, product);
       } else {

diff --git a/...pis/fetching-data/can-store/can-store.zip → ...is/fetching-data/can-store/can-script.zip b/...pis/fetching-data/can-store/can-store.zip → ...is/fetching-data/can-store/can-script.zip
diff --git a/javascript/oojs/assessment-es-class/index.html b/javascript/oojs/assessment-es-class/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bouncing balls</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <h1>bouncing balls</h1>
+    <p>Ball count: </p>
+    <canvas></canvas>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/javascript/oojs/assessment-es-class/main.js b/javascript/oojs/assessment-es-class/main.js
@@ -0,0 +1,201 @@
+// Thanks to Renan Martineli for this version of the demo
+
+// setup canvas
+
+const para = document.querySelector('p');
+let count = 0;
+
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;
+
+// function to generate random number
+
+const random = (min,max) =>  {
+	const num = Math.floor(Math.random()*(max-min)) + min;
+	return num;
+};
+
+class Shape {
+	constructor(x, y, velX, velY, exists) {
+		this.x = x;
+		this.y = y;
+		this.velX = velX;
+		this.velY = velY;
+		this.exists = exists;
+	}
+}
+
+class Ball extends Shape {
+	constructor(x, y, velX, velY, color, size, exists) {
+		super(x, y, velX, velY, exists);
+
+		this.color = color;
+		this.size = size;
+	}
+
+	draw() {
+		ctx.beginPath();
+		ctx.fillStyle = this.color;
+		ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+		ctx.fill();
+	}
+
+	update() {
+		if ((this.x + this.size) >= width) {
+			this.velX = -(this.velX);
+		}
+
+		if ((this.x - this.size) <= 0) {
+			this.velX = -(this.velX);
+		}
+
+		if ((this.y + this.size) >= height) {
+			this.velY = -(this.velY);
+		}
+
+		if ((this.y - this.size) <= 0) {
+			this.velY = -(this.velY);
+		}
+
+		this.x += this.velX;
+		this.y += this.velY;
+	}
+
+	collisionDetect() {
+		for (let j = 0; j < balls.length; j++) {
+			if (!(this === balls[j])) {
+				const dx = this.x - balls[j].x;
+				const dy = this.y - balls[j].y;
+				const distance = Math.sqrt(dx * dx + dy * dy);
+
+				if (distance < this.size + balls[j].size && balls[j].exists) {
+					balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';
+				}
+			}
+		}
+	}
+}
+
+class EvilCircle extends Shape {
+	constructor(x, y, exists) {
+		super(x, y, exists);
+
+		this.velX = 20;
+		this.velY = 20;
+		this.color = "white";
+		this.size = 10;
+	}
+
+	draw() {
+		ctx.beginPath();
+		ctx.strokeStyle = this.color;
+		ctx.lineWidth = 3;
+		ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+		ctx.stroke();
+	}
+
+	checkBounds() {
+		if ((this.x + this.size) >= width) {
+			this.x -= this.size;
+		}
+
+		if ((this.x - this.size) <= 0) {
+			this.x += this.size;
+		}
+
+		if ((this.y + this.size) >= height) {
+			this.y -= this.size;
+		}
+
+		if ((this.y - this.size) <= 0) {
+			this.y += this.size;
+		}
+	}
+
+	setControls() {
+		const _this = this;
+		window.onkeydown = function(e) {
+			switch(e.keyCode) {
+				case 65:
+					_this.x -= _this.velX;
+					break;
+				case 68:
+					_this.x += _this.velX;
+					break;
+				case 87:
+					_this.y -= _this.velY;
+					break;
+				case 83:
+					_this.y += _this.velY;
+					break;
+			}
+		}
+	}
+
+	collisionDetect() {
+		for (let j = 0; j < balls.length; j++) {
+			if (balls[j].exists) {
+				const dx = this.x - balls[j].x;
+				const dy = this.y - balls[j].y;
+				const distance = Math.sqrt(dx * dx + dy * dy);
+
+				if (distance < this.size + balls[j].size) {
+					balls[j].exists = false;
+					count--;
+					para.textContent = 'Ball count: ' + count;
+				}
+			}
+		}
+	}
+}
+
+const balls = [];
+
+const evilBall = new EvilCircle(
+	random(0, width),
+	random(0, height),
+	true
+);
+evilBall.setControls();
+
+const loop = () => {
+	ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+	ctx.fillRect(0, 0, width, height);
+
+	while (balls.length < 25) {
+		const size = random(10, 20);
+		const ball = new Ball(
+			// ball position always drawn at least one ball width
+			// away from the edge of the canvas, to avoid drawing errors
+			random(0 + size, width - size),
+			random(0 + size, height - size),
+			random(-7, 7),
+			random(-7, 7),
+			'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')',
+			size,
+			true
+		);
+		balls.push(ball);
+		count++;
+    para.textContent = 'Ball count: ' + count;
+	}
+
+	for (let i = 0; i < balls.length; i++) {
+		if (balls[i].exists) {
+			balls[i].draw();
+			balls[i].update();
+			balls[i].collisionDetect();
+		}
+	}
+
+	evilBall.draw();
+	evilBall.checkBounds();
+	evilBall.collisionDetect();
+
+	requestAnimationFrame(loop);
+}
+
+loop();
diff --git a/javascript/oojs/assessment-es-class/style.css b/javascript/oojs/assessment-es-class/style.css
@@ -0,0 +1,33 @@
+html, body {
+  margin: 0;
+}
+
+html {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+  height: inherit;
+}
+
+h1 {
+  font-size: 2rem;
+  letter-spacing: -1px;
+  position: absolute;
+  margin: 0;
+  top: -4px;
+  right: 5px;
+
+  color: transparent;
+  text-shadow: 0 0 4px white;
+}
+
+p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}