Basic Items and Players (#26)

* Added `dots` and `powerPills` to map

* Created basic Item object

* Created Dot and PowerPill items

* Draw items on board in `loadGameBoard`

* Moved Player to `Players` directory

* Created special player classes and cleaned imports

Created special player classes Pac-Man, Blinky, Clyde, Inky, & Pinky

* Completed Dot and PowerPill classes

* Added "lair" paths

* Game utilizes new spawning, dots, pills, and lairs

* Game with all players and random CPU movement

* Improved UI and updated `.gitignore`

.gitignore

@@ -1,6 +1,9 @@
 # Generated files
 src/frontend/styles.css
 
+#DS_Store files
+*.DS_Store
+
 # Logs
 logs
 *.log

src/frontend/app.js

@@ -1,19 +1,68 @@
 import Game from './utilities/Game.js';
-import Player from './utilities/Player.js';
+import { PacMan, Blinky, Clyde, Inky, Pinky } from './utilities/Players/index.js';
 
 const foregroundCanvas = document.getElementById('foreground-layer');
 const playerCanvas = document.getElementById('player-layer');
 
 const movementKeys = ['w', 'a', 's', 'd', 'ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight'];
 
 const game = new Game(foregroundCanvas, playerCanvas);
-const player = new Player();
+const player = new PacMan();
+const blinky = new Blinky();
+const clyde = new Clyde();
+const inky = new Inky();
+const pinky = new Pinky();
 
 await game.loadGameBoard('./assets/map.json'); // load the gameboard/map from json file
 
 game.addPlayer(player);
+game.addPlayer(blinky);
+game.addPlayer(clyde);
+game.addPlayer(inky);
+game.addPlayer(pinky);
 game.start();
 
+// TODO: remove this
+// This is temporary to show many players moving at once.
+// AI logic will be implemented in player classes
+setInterval(() => {
+  if (Math.floor(Math.random() * 2)) {
+    if (Math.floor(Math.random() * 2)) {
+      blinky.setMovement({ x: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+    else {
+      blinky.setMovement({ y: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+  }
+
+  if (Math.floor(Math.random() * 2)) {
+    if (Math.floor(Math.random() * 2)) {
+      clyde.setMovement({ x: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+    else {
+      clyde.setMovement({ y: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+  }
+
+  if (Math.floor(Math.random() * 2)) {
+    if (Math.floor(Math.random() * 2)) {
+      inky.setMovement({ x: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+    else {
+      inky.setMovement({ y: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+  }
+
+  if (Math.floor(Math.random() * 2)) {
+    if (Math.floor(Math.random() * 2)) {
+      pinky.setMovement({ x: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+    else {
+      pinky.setMovement({ y: Math.floor(Math.random() * 2) ? -1 : 1 });
+    }
+  }
+}, 200);
+
 document.addEventListener('keydown', (event) => {
   if (movementKeys.includes(event.key)) {
     event.preventDefault();