Stack3web
diff --git a/‎…h-the-Canvas-API/02-Maze copy/index.html‎ ‎…t-with-the-Canvas-API/02-Maze/index.html‎22-Javascript-with-the-Canvas-API/02-Maze copy/index.html renamed to 22-Javascript-with-the-Canvas-API/02-Maze/index.html b/‎…h-the-Canvas-API/02-Maze copy/index.html‎ ‎…t-with-the-Canvas-API/02-Maze/index.html‎22-Javascript-with-the-Canvas-API/02-Maze copy/index.html renamed to 22-Javascript-with-the-Canvas-API/02-Maze/index.html
diff --git a/‎…ith-the-Canvas-API/02-Maze copy/index.js‎ ‎…ipt-with-the-Canvas-API/02-Maze/index.js‎22-Javascript-with-the-Canvas-API/02-Maze copy/index.js renamed to 22-Javascript-with-the-Canvas-API/02-Maze/index.js
Lines changed: 26 additions & 21 deletions b/‎…ith-the-Canvas-API/02-Maze copy/index.js‎ ‎…ipt-with-the-Canvas-API/02-Maze/index.js‎22-Javascript-with-the-Canvas-API/02-Maze copy/index.js renamed to 22-Javascript-with-the-Canvas-API/02-Maze/index.js
Lines changed: 26 additions & 21 deletions
diff --git a/‎22-Javascript-with-the-Canvas-API/README.md‎
Lines changed: 2 additions & 0 deletions b/‎22-Javascript-with-the-Canvas-API/README.md‎
Lines changed: 2 additions & 0 deletions
@@ -26,6 +26,7 @@ Render.run(render)
 Runner.run(Runner.create(), engine)
 
 // Walls
+
 const walls = [
   Bodies.rectangle(width / 2, 0, width, 2, { isStatic: true }),
   Bodies.rectangle(width / 2, height, width, 2, { isStatic: true }),
@@ -53,22 +54,22 @@ const shuffle = (arr) => {
   return arr
 }
 
-const grid = Array(cells)
+const grid = Array(cellsVertical)
   .fill(null)
-  .map(() => Array(cells).fill(false))
+  .map(() => Array(cellsHorizontal).fill(false))
 
-const verticals = Array(cells)
+const verticals = Array(cellsVertical)
   .fill(null)
-  .map(() => Array(cells - 1).fill(false))
+  .map(() => Array(cellsHorizontal - 1).fill(false))
 
-const horizontals = Array(cells - 1)
+const horizontals = Array(cellsVertical - 1)
   .fill(null)
-  .map(() => Array(cells).fill(false))
+  .map(() => Array(cellsHorizontal).fill(false))
 
 // console.log(horizontals)
 
-const startRow = Math.floor(Math.random() * 3)
-const startColumn = Math.floor(Math.random() * 3)
+const startRow = Math.floor(Math.random() * cellsVertical)
+const startColumn = Math.floor(Math.random() * cellsHorizontal)
 
 // console.log(startRow, startColumn);
 
@@ -96,9 +97,9 @@ const stepThroughCell = (row, column) => {
     // See if that neighbor is out of bounds
     if (
       nextRow < 0 ||
-      nextRow >= cells ||
+      nextRow >= cellsVertical ||
       nextColumn < 0 ||
-      nextColumn >= cells
+      nextColumn >= cellsHorizontal
     ) {
       continue
     }
@@ -137,9 +138,9 @@ horizontals.forEach((row, rowIndex) => {
     }
 
     const wall = Bodies.rectangle(
-      columnIndex * unitLength + unitLength / 2,
-      rowIndex * unitLength + unitLength,
-      unitLength,
+      columnIndex * unitLengthX + unitLengthX / 2,
+      rowIndex * unitLengthY + unitLengthY,
+      unitLengthX,
       10,
       {
         label: 'wall',
@@ -157,10 +158,10 @@ verticals.forEach((row, rowIndex) => {
     }
 
     const wall = Bodies.rectangle(
-      columnIndex * unitLength + unitLength,
-      rowIndex * unitLength + unitLength / 2,
+      columnIndex * unitLengthX + unitLengthX,
+      rowIndex * unitLengthY + unitLengthY / 2,
       10,
-      unitLength,
+      unitLengthY,
       { 
         label: 'wall',
         isStatic: true,
@@ -171,11 +172,12 @@ verticals.forEach((row, rowIndex) => {
 })
 
 // Goal
+
 const goal = Bodies.rectangle(
-  width - unitLength / 2,
-  height - unitLength / 2,
-  unitLength * 0.7,
-  unitLength * 0.7,
+  width - unitLengthX / 2,
+  height - unitLengthY / 2,
+  unitLengthX * 0.7,
+  unitLengthY * 0.7,
   {
     label: 'goal',
     isStatic: true,
@@ -184,7 +186,9 @@ const goal = Bodies.rectangle(
 World.add(world, goal)
 
 // Ball
-const ball = Bodies.circle(unitLength / 2, unitLength / 2, unitLength / 4, {
+
+const ballRadius = Math.min(unitLengthX, unitLengthY) / 4
+const ball = Bodies.circle(unitLengthX / 2, unitLengthY / 2, ballRadius, {
   label: 'ball',
 })
 World.add(world, ball)
@@ -214,6 +218,7 @@ document.addEventListener('keydown', (event) => {
 })
 
 // Win Condition
+
 Events.on(engine, 'collisionStart', (event) => {
   // console.log(event);
   event.pairs.forEach((collision) => {
 
@@ -98,3 +98,5 @@ console.log(grid)
 ## 29. 33 Understanding the New Unit Variables
 
 ## 30. 34 Refactoring for Rectangular Mazes
+
+## 31. 35 Adding Fill Colors