Add level 5 with PORTALS

games/redbricks/game.js

@@ -131,6 +131,9 @@ class Game {
  case "blackHole":
  this.blackHoles.push(entity);
  break;
+ case "portal":
+ this.enablePortals = true;
+ break;
  }
  }
 
@@ -174,11 +177,17 @@ class Game {
  this.ball.velocity.x +=
  this.paddleSurface * (this.ball.x < this.paddle.x ? -1 : 1);
  }
+ if (collisionY.kind == "portal") collisionY = {};
 
  const testX = new Point(nextBallPos().x, this.ball.y);
  let collisionX = this.getBallCollision(testX);
- if (collisionX.kind == "paddle") collisionX = {};
- if (collisionX.kind) this.ball.velocity.x *= -1;
+ if (collisionX.kind == "paddle") {
+ collisionX = {};
+ } else if (collisionX.kind == "portal") {
+ this.ball.position.x = this.gameSize.x - this.ball.position.x;
+ } else if (collisionX.kind) {
+ this.ball.velocity.x *= -1;
+ }
 
  if(collisionX.kind === "brick" && collisionX.entity === collisionY.entity) {
  collisionY = {};
@@ -189,6 +198,9 @@ class Game {
  case "viewport":
  sound.play("wallbump", 2);
  break;
+ case "portal":
+ sound.play("portal", 6);
+ break;
  case "paddle":
  this.brickStreak = 0;
  sound.play("paddlebump", 2);
@@ -272,6 +284,9 @@ class Game {
  if (ballRect.origin.y > this.gameSize.y) {
  return { kind: "bottom" };
  } else if (ballRect.origin.x < 0 || ballRect.end.x > this.gameSize.x) {
+ if (this.enablePortals) {
+ return { kind: "portal" };
+ }
  return { kind: "viewport" };
  } else if (this.ball.velocity.y > 0 && ballRect.overlaps(paddleRect)) {
  return { kind: "paddle" };

games/redbricks/levels.js

@@ -55,6 +55,20 @@ const levels = [
  patternSpacing: 20,
  patternOffset: 10,
  },
+ {
+ getObjectKind: (x, y) => {
+ if (x != 0 && x != 6) {
+ return { kind: "brick", variant: y == 4 && "solid" };
+ }
+ return {};
+ },
+ patternSize: new Point(7, 5),
+ patternSpacing: 20,
+ patternOffset: 20,
+ },
+ // Level 6: white hole
+ // Level 7: BRUTAL classic-style challenge
+ // Level 8: white hole with screen wrapping
 ];
 
 export function getObjects(level, viewportRect) {
@@ -69,6 +83,7 @@ export function getObjects(level, viewportRect) {
  (viewportRect.size.x - brickGap.x * 2) / patternSize.x,
  patternSpacing + brickGap.y
  );
+ const patternBottom = brickSpacing.y * patternSize.y;
  const brickSize = new Point(brickSpacing.x - brickGap.x, patternSpacing);
 
  const objects = [];
@@ -93,5 +108,21 @@ export function getObjects(level, viewportRect) {
  }
  }
 
+ if (level == 5) {
+ const portalSize = new Point(4, viewportRect.size.y - brickGap.y*2);
+ const portalY = brickGap.y + portalSize.y/2;
+ objects.push({
+ position: new Point(portalSize.x, portalY),
+ size: portalSize,
+ kind: "portal",
+ variant: "left",
+ });
+ objects.push({
+ position: new Point(viewportRect.size.x - portalSize.x, portalY),
+ size: portalSize,
+ kind: "portal",
+ });
+ }
+
  return objects;
 }

games/redbricks/sound.js

@@ -5,6 +5,7 @@ const filenames = [
  "launch",
  "miss",
  "deathblock",
+ "portal",
 ];
 
 const sound = filenames.reduce((acc, filename) => {

games/redbricks/style.css

@@ -135,7 +135,6 @@ pre {
  outline: 1px solid;
  border-radius: 50%;
  animation: .5s linear 0s infinite forwards holezoom;
-
 }
 
 @keyframes holezoom {
@@ -149,7 +148,19 @@ pre {
  }
 }
 
-#scoreboard {
- position: absolute;
- z-index: 1;
+.portal {
+ background: repeating-linear-gradient(60deg, #f08, #0f4 10%, #f08 20%);
+ background-size: 200% 200%;
+ border-radius: 2px;
+ box-shadow: 0px 0px 4px #f0f;
+ animation: 1s linear 0s infinite forwards portal;
+}
+
+@keyframes portal {
+ 0% { background-position: 0% 40% }
+ 100% { background-position: 0% 0% }
+}
+
+.portal.left {
+ animation-direction: reverse;
 }