bouncing-balls setup

hugoromao · hugoromao · commit e96994743637 · 2021-10-19T09:34:12.000-04:00
diff --git a/bouncing-balls/README.md b/bouncing-balls/README.md
@@ -0,0 +1,12 @@
+# BounceBalls
+
+![BounceBalls](https://mdn.mozillademos.org/files/13865/bouncing-balls.png)  
+
+This page was given as a challenge in the MDN JS guide!
+To show how powerful JavaScript objects can be, we use the CanvasAPI and the requestAnimationFrameAPI method to create animations across the entire screen.
+
+## Important Learning Points
+
+- CanvasAPI Basics
+- Understanding the prototype in JS
+- Creating methods and properties
diff --git a/bouncing-balls/favicon/favicon.png b/bouncing-balls/favicon/favicon.png
diff --git a/bouncing-balls/index.html b/bouncing-balls/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bouncing balls</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" href="favicon/favicon.png" type="image/x-icon" />
+  </head>
+  <body>
+    <h1>Bouncing balls</h1>
+    <canvas></canvas>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/bouncing-balls/main.js b/bouncing-balls/main.js
@@ -0,0 +1,116 @@
+// setup canvas
+
+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
+
+function random(min, max) {
+  const num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+
+// define Ball constructor
+
+function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}
+
+// define ball draw method
+
+Ball.prototype.draw = function () {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+
+// define ball update method
+
+Ball.prototype.update = function () {
+  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;
+};
+
+// define ball collision detection
+
+Ball.prototype.collisionDetect = function () {
+  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].color = this.color =
+          "rgb(" +
+          random(0, 255) +
+          "," +
+          random(0, 255) +
+          "," +
+          random(0, 255) +
+          ")";
+      }
+    }
+  }
+};
+
+// define array to store balls and populate it
+
+let balls = [];
+
+while (balls.length < 25) {
+  const size = random(10, 20);
+  let ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the adge 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
+  );
+  balls.push(ball);
+}
+
+// define loop that keeps drawing the scene constantly
+
+function loop() {
+  ctx.fillStyle = "rgba(0,0,0,0.50)";
+  ctx.fillRect(0, 0, width, height);
+
+  for (let i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+    balls[i].collisionDetect();
+  }
+
+  requestAnimationFrame(loop);
+}
+
+loop();
diff --git a/bouncing-balls/style.css b/bouncing-balls/style.css
@@ -0,0 +1,25 @@
+html,
+body {
+  margin: 0;
+}
+
+html {
+  font-family: "Helvetica Neue", Arial, Helvetica, 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 1px white;
+}
