From 8affbdfdd6006dbce4080b9cd921c161f16c9de0 Mon Sep 17 00:00:00 2001
From: Israel Ochoa <isuraeru@gmail.com>
Date: Tue, 9 Jul 2024 10:19:36 +0200
Subject: [PATCH] Refactoring all some code in app.js

---
 apps/bbreaker/app.js | 384 ++++++++++++++++++++++++-------------------
 1 file changed, 215 insertions(+), 169 deletions(-)

diff --git a/apps/bbreaker/app.js b/apps/bbreaker/app.js
index a3b2ac8254..169c545a29 100644
--- a/apps/bbreaker/app.js
+++ b/apps/bbreaker/app.js
@@ -4,7 +4,7 @@
  * Author: Israel Ochoa https://github.com/IsReal8a/
  * Created: July 2020
  *
- * Inspired and copy-pasted from:
+ * Inspired by:
  * BangleJS Pong game : Frederic Rousseau https://github.com/fredericrous
  */
 
@@ -16,21 +16,19 @@ let winnerMessage = '';
 
 const sound = {
   ping: () => Bangle.beep(8, 466),
-  pong: () => Bangle.beep(8, 220),
+  //pong: () => Bangle.beep(8, 220),
   fall: () => Bangle.beep(16*3, 494).then(_ => Bangle.beep(32*3, 3322))
 };
 
-class Vector {
-  constructor(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-  add(x) {
-    this.x += x.x || 0;
-    this.y += x.y || 0;
-    return this;
-  }
+function Vector(x, y) {
+  this.x = x;
+  this.y = y;
 }
+Vector.prototype.add = function (x) {
+  this.x += x.x || 0;
+  this.y += x.y || 0;
+  return this;
+};
 
 const constrain = (n, low, high) => Math.max(Math.min(n, high), low);
 const random = (min, max) => Math.random() * (max - min) + min;
@@ -49,61 +47,61 @@ const intersects = (circ, rect, right) => {
 
 /////////////////////////////  Ball  //////////////////////////////////////////
 
-class Ball {
-  constructor() {
-    this.r = 4;
-    this.prevPos = null;
-    this.originalSpeed = 4;
-    this.maxSpeed = 6;
-    this.reset();
-  }
-  reset() {
-    this.speed = this.originalSpeed;
-    var x = scores[0] < scores[1] || (scores[0] === 0 && scores[1] === 0) ? -this.speed : this.speed;
-    var bounceAngle = Math.PI / 6;
-    this.velocity = new Vector(x * Math.cos(bounceAngle), this.speed * -Math.sin(bounceAngle));
-    this.pos = new Vector(SCREEN_WIDTH / 2, random(230, SCREEN_WIDTH));
-   // this.ballReturn = 0;
-  }
-  restart() {
-    this.reset();
-    brickBreaker.pos = new Vector(brickBreaker.width * 2, SCREEN_WIDTH / 2 - brickBreaker.height / 2);
-    this.pos = new Vector(SCREEN_WIDTH / 2, SCREEN_WIDTH / 2);
-  }
-  show(invert) {
-    if (this.prevPos != null) {
-      g.setColor(invert ? -1 : 0);
-      g.fillCircle(this.prevPos.x, this.prevPos.y, this.prevPos.r);
-    }
-    g.setColor(invert ? 0 : -1);
-    g.fillCircle(this.pos.x, this.pos.y, this.r);
-    this.prevPos = {
-      x: this.pos.x,
-      y: this.pos.y,
-      r: this.r
-    };
+function Ball() {
+  this.r = 4;
+  this.prevPos = null;
+  this.originalSpeed = 4;
+  this.maxSpeed = 6;
+  this.reset();
+}
+Ball.prototype.reset = function() {
+  this.speed = this.originalSpeed;
+  var x = scores[0] < scores[1] || (scores[0] === 0 && scores[1] === 0) ? -this.speed : this.speed;
+  var bounceAngle = Math.PI / 6;
+  this.velocity = new Vector(x * Math.cos(bounceAngle), this.speed * -Math.sin(bounceAngle));
+  this.pos = new Vector(SCREEN_WIDTH / 2, random(230, SCREEN_WIDTH));
+  this.ballReturn = 0;
+};
+Ball.prototype.restart = function() {
+  this.reset();
+  brickBreaker.pos = new Vector(brickBreaker.width * 2, SCREEN_WIDTH / 2 - brickBreaker.height / 2);
+  this.pos = new Vector(SCREEN_WIDTH / 2, SCREEN_WIDTH / 2);
+};
+Ball.prototype.show = function(invert) {
+  if (this.prevPos != null) {
+    g.setColor(invert ? -1 : 0);
+    g.fillCircle(this.prevPos.x, this.prevPos.y, this.prevPos.r);
   }
-  bounceBrickBreaker(directionX, directionY, brickBreaker) {
-   // this.ballReturn++;
-    this.speed = constrain(this.speed + 2, this.originalSpeed, this.maxSpeed);
-    var MAX_BOUNCE_ANGLE = 4 * Math.PI / 12;
-    var angle = bounceAngle(brickBreaker.pos.y, this.pos.y, brickBreaker.height, MAX_BOUNCE_ANGLE);
-    this.velocity.x = this.speed * angle.x * directionX;
-    this.velocity.y = this.speed * angle.y * directionY;
+  g.setColor(invert ? 0 : -1);
+  g.fillCircle(this.pos.x, this.pos.y, this.r);
+  this.prevPos = {
+    x: this.pos.x,
+    y: this.pos.y,
+    r: this.r
+  };
+};
+Ball.prototype.bounceBrickBreaker = function (directionX, directionY, brickBreaker) {
+  this.ballReturn++;
+  this.speed = constrain(this.speed + 2, this.originalSpeed, this.maxSpeed);
+  var MAX_BOUNCE_ANGLE = 4 * Math.PI / 12;
+  var angle = bounceAngle(brickBreaker.pos.y, this.pos.y, brickBreaker.height, MAX_BOUNCE_ANGLE);
+  this.velocity.x = this.speed * angle.x * directionX;
+  this.velocity.y = this.speed * angle.y * directionY;
+  sound.ping();
    // this.ballReturn % 2 === 0 ? sound.ping() : sound.pong();
+};
+Ball.prototype.bounce = function (directionX, directionY, brickBreaker) {
+  if (brickBreaker) {
+    return this.bounceBrickBreaker(directionX, directionY, brickBreaker);
   }
-  bounce(directionX, directionY, brickBreaker) {
-    if (brickBreaker) {
-      return this.bounceBrickBreaker(directionX, directionY, brickBreaker);
-    }
-    if (directionX) {
-      this.velocity.x = Math.abs(this.velocity.x) * directionX;
-    }
-    if (directionY) {
-      this.velocity.y = Math.abs(this.velocity.y) * directionY;
-    }
+  if (directionX) {
+    this.velocity.x = Math.abs(this.velocity.x) * directionX;
   }
-  fall(brickBreakerId) {
+  if (directionY) {
+    this.velocity.y = Math.abs(this.velocity.y) * directionY;
+  }
+};
+Ball.prototype.fall = function (brickBreakerId) {
     scores[brickBreakerId]--;
     if (scores[brickBreakerId] === 0) {
       this.restart();
@@ -117,49 +115,62 @@ class Ball {
       sound.fall();
       this.reset();
     }
+};
+Ball.prototype.wallCollision = function () {
+  if (this.pos.y < 0) {
+    this.bounce(0, 1);
+  } else if (this.pos.y > SCREEN_WIDTH) {
+    this.fall(1);
+  } else if (this.pos.x < 0) {
+    this.bounce(1, 0);
+  } else if (this.pos.x > SCREEN_WIDTH) {
+    this.bounce(-1, 0);
+  } else {
+    return false;
   }
-  wallCollision() {
-    if (this.pos.y < 0) {
-      this.bounce(0, 1);
-    } else if (this.pos.y > SCREEN_WIDTH) {
-      this.fall(1);
-    } else if (this.pos.x < 0) {
-      this.bounce(1, 0);
-    } else if (this.pos.x > SCREEN_WIDTH) {
-      this.bounce(-1, 0);
+  return true;
+};
+Ball.prototype.brickBreakerCollision = function (brickBreaker) {
+  if (intersects(this, brickBreaker)) {
+    if (this.pos.x < SCREEN_WIDTH / 2) {
+      this.bounce(1, 1, brickBreaker);
+      this.pos.add(new Vector(this.width, 0));
     } else {
-      return false;
-    }
-    return true;
-  }
-  brickBreakerCollision(brickBreaker) {
-    if (intersects(this, brickBreaker)) {
-      if (this.pos.x < SCREEN_WIDTH / 2) {
-        this.bounce(1, 1, brickBreaker);
-        this.pos.add(new Vector(this.width, 0));
-      } else {
-        this.bounce(-1, 1, brickBreaker);
-        this.pos.add(new Vector(-(this.width / 2 + 1), 0));
-    }
-      return true;
-    }
-      return false;
+      this.bounce(-1, 1, brickBreaker);
+      this.pos.add(new Vector(-(this.width / 2 + 1), 0));
   }
-  collisions() {
-    return this.wallCollision() || this.brickBreakerCollision(brickBreaker); // || this.brickBreakerCollision(ai);
+    return true;
   }
-  updatePosition() {
-    var elapsed = new Date().getTime() - this.lastUpdate;
-    var x = (elapsed / 50) * this.velocity.x;
-    var y = (elapsed / 50) * this.velocity.y;
-    this.pos.add(new Vector(x, y));
+    return false;
+};
+Ball.prototype.bricksCollision = function (bricks) {
+  if (intersects(this, bricks)) {
+    if (this.pos.x < SCREEN_WIDTH / 2) {
+      this.bounce(1, 1, bricks);
+      this.pos.add(new Vector(this.width, 0));
+    } else {
+      this.bounce(-1, 1, bricks);
+      this.pos.add(new Vector(-(this.width / 2 + 1), 0));
   }
-  update() {
-    this.updatePosition();
-    this.lastUpdate = new Date().getTime();
-    this.collisions();
+    return true;
   }
-}
+    return false;
+};
+Ball.prototype.collisions = function () {
+  return this.wallCollision() || this.brickBreakerCollision(brickBreaker) || this.bricksCollision(bricks);
+};
+Ball.prototype.updatePosition = function () {
+  var elapsed = new Date().getTime() - this.lastUpdate;
+  var x = (elapsed / 50) * this.velocity.x;
+  var y = (elapsed / 50) * this.velocity.y;
+  this.pos.add(new Vector(x, y));
+};
+Ball.prototype.update = function () {
+  this.updatePosition();
+  this.lastUpdate = new Date().getTime();
+  this.collisions();
+};
+
 function bounceAngle(brickBreakerY, ballY, brickBreakerHeight, maxHangle) {
   let relativeIntersectY = (brickBreakerY + (brickBreakerHeight/2)) - ballY;
   let normalizedRelativeIntersectionY = relativeIntersectY / (brickBreakerHeight/2);
@@ -167,79 +178,109 @@ function bounceAngle(brickBreakerY, ballY, brickBreakerHeight, maxHangle) {
   return { x: Math.cos(bounceAngle), y: -Math.sin(bounceAngle) };
 }
 
-////////////////////////////  BrickBreaker  /////////////////////////////////////////
+//------------  BrickBreaker  ------------\\
 
-class BrickBreaker {
-  constructor(right) {
-    this.width = 30;
-    this.height = 4;
-    this.pos = new Vector(SCREEN_WIDTH / 2 - this.width / 2, SCREEN_WIDTH - this.height);
-    this.acc = new Vector(0, 0);
-    this.speed = 15;
-    this.maxSpeed = 25;
-    this.prevPos = null;
-    this.right = right;
-  }
-  show() {
-    if (this.prevPos != null) {
-      g.setColor(0);
-      g.fillRect(this.prevPos.x1, this.prevPos.y1, this.prevPos.x2, this.prevPos.y2);
-    }
-    g.setColor(-1);
-    g.fillRect(this.pos.x, this.pos.y, this.pos.x + this.width, this.pos.y + this.height);
-    this.prevPos = {
-      x1: this.pos.x,
-      y1: this.pos.y,
-      x2: this.pos.x + this.width,
-      y2: this.pos.y + this.height
-    };
-  }
-  leftMove() {
-    this.acc.x -= this.speed;
-  }
-  rightMove() {
-    this.acc.x += this.speed;
-  }
-  stop() {
-    this.acc.x = 0;
-  }
-  update() {
-    this.acc.x = constrain(this.acc.x, -this.maxSpeed, this.maxSpeed);
-    this.pos.add(this.acc);
-    this.pos.x = constrain(this.pos.x, 0, SCREEN_WIDTH - this.width);
-  }
+function BrickBreaker(right) {
+  this.width = 30;
+  this.height = 4;
+  this.pos = new Vector(SCREEN_WIDTH / 2 - this.width / 2, SCREEN_WIDTH - this.height);
+  this.acc = new Vector(0, 0);
+  this.speed = 15;
+  this.maxSpeed = 25;
+  this.prevPos = null;
+  this.right = right;
 }
+BrickBreaker.prototype.show = function () {
+  if (this.prevPos != null) {
+    g.setColor(0);
+    g.fillRect(this.prevPos.x1, this.prevPos.y1, this.prevPos.x2, this.prevPos.y2);
+  }
+  g.setColor(-1);
+  g.fillRect(this.pos.x, this.pos.y, this.pos.x + this.width, this.pos.y + this.height);
+  this.prevPos = {
+    x1: this.pos.x,
+    y1: this.pos.y,
+    x2: this.pos.x + this.width,
+    y2: this.pos.y + this.height
+  };
+};
+BrickBreaker.prototype.leftMove = function () {
+  this.acc.x -= this.speed;
+};
+BrickBreaker.prototype.rightMove = function () {
+  this.acc.x += this.speed;
+};
+BrickBreaker.prototype.stop = function () {
+  this.acc.x = 0;
+};
+BrickBreaker.prototype.update = function () {
+  this.acc.x = constrain(this.acc.x, -this.maxSpeed, this.maxSpeed);
+  this.pos.add(this.acc);
+  this.pos.x = constrain(this.pos.x, 0, SCREEN_WIDTH - this.width);
+};
 
-var brickRowCount = 5;
-var brickColumnCount = 8;
-var brickWidth = 22;
-var brickHeight = 5;
-var brickPadding = 5;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 15;
-
-var bricks = [];
-for(var c = 0; c < brickColumnCount; c++) {
-  bricks[c] = [];
-    for(var r = 0; r < brickRowCount; r++) {
-      bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
+//------------  Bricks  ------------\\
 
-function drawBricks() {
+function Bricks() {
+  this.brickRowCount = 5;
+  this.brickColumnCount = 8;
+  this.brickWidth = 22;
+  this.brickHeight = 5;
+  this.brickPadding = 5;
+  this.brickOffsetTop = 30;
+  this.brickOffsetLeft = 15;
+  this.status = 0;
+  this.pos = new Vector(SCREEN_WIDTH / 2, SCREEN_WIDTH - 30);
+  this.bricks = [];
+};
+Bricks.prototype.buildBricks = function () {
+  x = this.pos.x;
+  y = this.pos.y;
+  status = this.status;
+  for(var c = 0; c < this.brickColumnCount; c++) {
+    this.bricks[c] = [];
+      for(var r = 0; r < this.brickRowCount; r++) {
+        this.bricks[c][r] = { x: 0, y: 0, status: 1 };
+      }
+  }
+};
+Bricks.prototype.show = function () {
   g.setColor(-1);
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
-      if (bricks[c][r].status == 1) {
-        var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
-        var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
-        bricks[c][r].x = brickX;
-        bricks[c][r].y = brickY;
-        g.fillRect(brickX, brickY, brickX + brickWidth, brickY + brickHeight);
+  for (var c = 0; c < this.brickColumnCount; c++) {
+    for (var r = 0; r < this.brickRowCount; r++) {
+      if (this.bricks[c][r].status == 1) {
+        var brickX = (c * (this.brickWidth + this.brickPadding)) + this.brickOffsetLeft;
+        var brickY = (r * (this.brickHeight + this.brickPadding)) + this.brickOffsetTop;
+        this.bricks[c][r].x = brickX;
+        this.bricks[c][r].y = brickY;
+        g.fillRect(brickX, brickY, brickX + this.brickWidth, brickY + this.brickHeight);
       }
     }
   }
-}
+};
+Bricks.prototype.update = function () {
+  x = this.pos.x;
+  y = this.pos.y;
+  status = this.status;
+  for (c = 0; c < this.brickColumnCount; c++) {
+    for (r = 0; r < this.brickRowCount; r++) {
+      var b = this.bricks[c][r];
+      if (b.status == 1) {
+        if (
+          this.pos.x > b.x &&
+          this.pos.x < b.x + this.brickWidth &&
+          this.pos.y > b.y &&
+          this.pos.y < b.y + this.brickHeight
+        ) {
+          //dy = -dy;
+          b.status = 0;
+        }
+      }
+    }
+  }
+};
+
+//------------  Draw things  ------------\\
 
 function drawScores() {
   let x1 = SCREEN_WIDTH / 16 + 2;
@@ -293,8 +334,10 @@ function onFrame() {
   if (state === 1) {
     ball.update();
     brickBreaker.update();
+    bricks.update();
     ball.show();
     brickBreaker.show();
+    bricks.update();
     ball.show();
     g.flip();
   } else if (state === 3) {
@@ -312,13 +355,15 @@ function onFrame() {
 
 function startThatGame() {
   brickBreaker.show();
-  drawBricks();
+  bricks.buildBricks();
+  bricks.show();
   drawScores();
   drawStartTimer(3, () => setInterval(onFrame, 1000 / FPS));
 }
 
-var brickBreaker = new BrickBreaker();
 var ball = new Ball();
+var brickBreaker = new BrickBreaker();
+var bricks = new Bricks();
 var state = 0;
 var prevScores = [0, 0];
 
@@ -353,12 +398,13 @@ setWatch(o => {
     g.fillRect(0, 0, 240, 240);
     ball.show(true);
     scores = [0, LIVES];
-    brickBreaker = new BrickBreaker();
     ball = new Ball();
+    //brickBreaker = new BrickBreaker();
+    //bricks = new Bricks();
     state = 1;
     startThatGame();
   } else {
     drawStartScreen(true);
     startThatGame();
   }
-}, BTN3, {repeat: true});
\ No newline at end of file
+}, BTN3, {repeat: true});