🌲🍳 Updated with Glitch

.glitch-assets

@@ -0,0 +1,20 @@
+{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
+{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
+{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
+{"uuid":"adSBq97hhhpFNUna","deleted":true}
+{"uuid":"adSBq97hhhpFNUnb","deleted":true}
+{"uuid":"adSBq97hhhpFNUnc","deleted":true}
+{"name":"pacman-right.png","date":"2021-07-16T19:47:19.930Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-right.png","type":"image/png","size":15632,"imageWidth":242,"imageHeight":265,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-right.png","thumbnailWidth":242,"thumbnailHeight":265,"uuid":"tPaoeNQlBxyq1f96"}
+{"name":"pacman-up.png","date":"2021-07-16T19:47:20.140Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-up.png","type":"image/png","size":16570,"imageWidth":265,"imageHeight":242,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-up.png","thumbnailWidth":265,"thumbnailHeight":242,"uuid":"GlUQt7Wvof4cskIT"}
+{"name":"pacman-left.png","date":"2021-07-16T19:47:21.802Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-left.png","type":"image/png","size":16531,"imageWidth":242,"imageHeight":265,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-left.png","thumbnailWidth":242,"thumbnailHeight":265,"uuid":"XRoPL6IaAuyqivQX"}
+{"name":"pacman-down.png","date":"2021-07-16T19:47:23.374Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-down.png","type":"image/png","size":16560,"imageWidth":265,"imageHeight":242,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-down.png","thumbnailWidth":265,"thumbnailHeight":242,"uuid":"Rzf2M940OupH3Qzf"}
+{"name":"panda one.jpeg","date":"2021-07-16T22:10:20.728Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpanda%20one.jpeg","type":"image/jpeg","size":53162,"imageWidth":640,"imageHeight":480,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2Fpanda%20one.jpeg","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"iA8kidBJN9bAiZax"}
+{"name":"kisspng-pac-man-world-3-ghosts-clip-art-pac-man-ghost-png-transparent-image-5a7561ae2a7482.6496024615176421581739.jpg","date":"2021-07-16T22:16:27.527Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fkisspng-pac-man-world-3-ghosts-clip-art-pac-man-ghost-png-transparent-image-5a7561ae2a7482.6496024615176421581739.jpg","type":"image/jpeg","size":45509,"imageWidth":900,"imageHeight":900,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2Fkisspng-pac-man-world-3-ghosts-clip-art-pac-man-ghost-png-transparent-image-5a7561ae2a7482.6496024615176421581739.jpg","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"yxMpVTj9YBo4BpUQ"}
+{"name":"kisspng-pac-man-left.png","date":"2021-07-16T22:21:06.077Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fkisspng-pac-man-left.png","type":"image/png","size":11137,"imageWidth":900,"imageHeight":900,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2Fkisspng-pac-man-left.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"k5xG67KBD5lrXqNY"}
+{"name":"kisspng-pac-man-games-ghosts-blue-ghost-cliparts-5a8481acad2b23.0337823915186333887093.jpg","date":"2021-07-16T22:29:57.394Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fkisspng-pac-man-games-ghosts-blue-ghost-cliparts-5a8481acad2b23.0337823915186333887093.jpg","type":"image/jpeg","size":32916,"imageWidth":900,"imageHeight":600,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2Fkisspng-pac-man-games-ghosts-blue-ghost-cliparts-5a8481acad2b23.0337823915186333887093.jpg","thumbnailWidth":330,"thumbnailHeight":220,"uuid":"PWTiCmFAky4WvsUG"}
+{"name":"kisspng-pac-man-left2.png","date":"2021-07-16T22:31:33.359Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fkisspng-pac-man-left2.png","type":"image/png","size":14073,"imageWidth":900,"imageHeight":600,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2Fkisspng-pac-man-left2.png","thumbnailWidth":330,"thumbnailHeight":220,"uuid":"ZUuoFhTB9dWGmwsY"}
+{"name":"Pinky.png","date":"2021-07-16T22:36:08.358Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FPinky.png","type":"image/png","size":77886,"imageWidth":960,"imageHeight":720,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2FPinky.png","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"0ALpzvTprJ4pheyE"}
+{"name":"Pinky (1).png","date":"2021-07-16T22:37:18.102Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FPinky%20(1).png","type":"image/png","size":181378,"imageWidth":960,"imageHeight":720,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2FPinky%20(1).png","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"j9NlyDyguvRtAWnU"}
+{"name":"Pinky (2).png","date":"2021-07-16T22:38:31.582Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FPinky%20(2).png","type":"image/png","size":42444,"imageWidth":960,"imageHeight":720,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2FPinky%20(2).png","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"EkmDeHR1RidmRfLF"}
+{"name":"Blinky.png","date":"2021-07-16T22:40:15.111Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FBlinky.png","type":"image/png","size":226876,"imageWidth":960,"imageHeight":720,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2FBlinky.png","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"L8pmzaN9rlaRESkD"}
+{"name":"Blinky (1) .png","date":"2021-07-16T22:41:30.188Z","url":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FBlinky%20(1)%20.png","type":"image/png","size":47236,"imageWidth":960,"imageHeight":720,"thumbnail":"https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fthumbnails%2FBlinky%20(1)%20.png","thumbnailWidth":330,"thumbnailHeight":248,"uuid":"LDtggroK93JeY8Ye"}

README.md

@@ -0,0 +1,26 @@
+CSSI Extension Friday Project: Pacman
+=================
+
+Your Project
+------------
+
+### ← README.md
+
+Not much to say other than it's a scuffed version of Pacman :D I mainly worked on creating the world array, the drawMap() function, and implementing the coins.
+You can play the game on the Glitch IDE: https://pacman-sample.glitch.me
+
+### ← index.html
+
+Focused mainly on exploring the p5 library in Javascript so not much emphasis was placed on html or css 
+
+### ← style.css
+
+See html
+
+### ← script.js
+
+Utilized the p5 library in Javascript to create our version of Pacman! This was a timed project and we completed it in around 3 hours.
+
+### ← assets
+
+There are several assets (including the ghosts which have not been implemented yet) included.

index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>CSSI Day 1</title>
+
+    <!-- import the webpage's stylesheet -->
+    <link rel="stylesheet" href="/style.css">
+
+    <!-- import the webpage's javascript file -->
+    <script src="/script.js" defer></script>
+
+    <!-- import p5 things -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>
+    <script src="https://cdn.JsDelivr.net/gh/bmoren/p5.collide2D/p5.collide2d.min.js"></script>
+  </head>  
+  <body>
+  </body>
+</html>

script.js

@@ -0,0 +1,177 @@
+/* global
+ *    background, createCanvas, ellipse, noFill, stroke, strokeWeight, rect, image, loadImage, fill, colorMode, HSB, y, keyCode, pManCurrX, circle, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, pinkGhostRight
+ */
+
+let startingX;
+let startingY;
+
+let speedX;
+let speedY;
+
+let pManCurrPosX; 
+let pManCurrPosY;
+
+//2d array for the map.  0 = wall, 1 = open space,
+let world = [
+    [0, 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
+
+    [0, 1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0,  0,  0,  1,  1,  1,  1,  0,  0],
+
+    [0, 1,  0,  0,  1,  0,  0,  0,  0,  0,  1,  0,  1,  0,  1,  1,  1,  0,  0,  1,  0,  0],
+
+    [0, 1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0,  1,  1,  1,  0,  1,  0,  0,  1,  0,  0],
+
+    [0, 1,  0,  1,  0,  1,  0,  1,  0,  0,  0,  0,  1,  0,  1,  0,  1,  1,  1,  1,  0,  0],
+
+    [0, 1,  0,  1,  0,  1,  0,  1,  0,  1,  1,  0,  1,  0,  1,  0,  1,  0,  0,  1,  1,  0],
+
+    [0, 1,  0,  1,  0,  0,  0,  1,  0,  0,  0,  0,  1,  1,  1,  0,  1,  0,  0,  0,  1,  0],
+
+    [0, 1,  1,  1,  1,  1,  1,  1,  0,  1,  1,  1,  1,  0,  1,  1,  1,  1,  1,  1,  1,  0],
+
+    [0, 1,  0,  1,  0,  0,  0,  0,  0,  1,  0,  1,  0,  0,  1,  0,  0,  1,  0,  0,  1,  0],
+
+    [0, 1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
+
+    [0, 0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
+];
+
+let cellSize = 50;
+
+
+//pacman images
+let pacmanAvatar; 
+let pacManUp;
+let pacManDown;
+let pacManRight;
+let pacManLeft;
+
+let panda;
+
+let wallColor ;
+
+let score;
+
+const DIRECTIONS = {
+  LEFT: "left",
+  RIGHT: "right",
+  UP: "up",
+  DOWN: "down",
+  IDLE: "idle",
+}
+
+let direction = DIRECTIONS.IDLE;
+
+function setup()
+{
+  createCanvas(1050, 550);
+  colorMode(HSB, 360, 100, 100);
+  // We only want to load the logo once.
+  pManCurrPosX = 150;
+  pManCurrPosY = 150;
+  pinkGhostPosX = 450;
+  pinkGhostPosY = 250;
+  blueGhostPosX = 500;
+  blueGhostPosY = 250;
+  startingX = 50;
+  startingY = 50;
+  speedX = 10;
+  speedY = 10;
+
+  wallColor = color(235, 100, 100);
+  pacManRight = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-right.png?v=1626464839930"); // loads in Pacman/ghosts facing different directions
+  pacManUp = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-up.png?v=1626464840140");
+  pacManDown = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-down.png?v=1626464843374");
+  pacManLeft = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2Fpacman-left.png?v=1626464841802");
+//   pinkGhostRight = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FPinky%20(1).png?v=1626475038102"); 
+//   pinkGhostLeft = loadImage("hhttps://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FPinky%20(2).png?v=1626475111582");
+//   blueGhostRight = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FBlinky.png?v=1626475215111");
+//   blueGhostLeft = loadImage("https://cdn.glitch.com/6ed26b30-fe55-4022-8423-cd86038b8441%2FBlinky%20(1)%20.png?v=1626475290188");
+
+  pacmanAvatar = pacManRight;
+  score = 0;
+}
+
+function draw(){ // continuously draws the maze
+  background(0);
+  image(pacmanAvatar, pManCurrPosX, pManCurrPosY, 50, 50);
+//   image(pinkGhostRight, pinkGhostPosX, pinkGhostPosY, 50, 50);
+//   image(blueGhostLeft, blueGhostPosX, blueGhostPosY, 50, 50);
+  drawMap(); 
+  fill(255,100,100)
+  rect(675,0,100,100)
+  drawScore();
+
+}
+
+function drawMap(){ // creates the maze
+  for(let i = 0; i < world.length; i++) {
+    for (let j = 0; j < world[0].length; j++) {
+      if (world[i][j] == 0) {
+        // draws a wall
+        fill(wallColor);
+        strokeWeight(1);
+        rect(50*j, 50*i, 50, 50);
+      } else if (world[i][j] == 1){ // position of coins
+        fill(63, 100, 100);
+        ellipse((j * 50) + 25, (i * 50) + 25, 10);
+      } else if (world[i][j] == 2) {
+        fill(0);
+        ellipse((j * 50) + 25, (i * 50) + 25, 10);
+      }
+    }
+  }
+}
+
+function drawScore() { // displays the score
+  if(score < 10){
+    fill(100)
+   .strokeWeight(0)
+   .textSize(80);
+  } else if( score < 100){
+     fill(100)
+   .strokeWeight(0)
+   .textSize(50);
+  } else {
+    fill(100)
+   .strokeWeight(0)
+   .textSize(40);
+  }
+
+  text(score, 700, 80);
+}
+
+function keyPressed() // controls for Pacman and increases score each time Pacman moves onto a block with a coin
+{
+
+  if(keyCode === DOWN_ARROW){
+     if(!(world[(pManCurrPosY + 50)/50][(pManCurrPosX/50)] === 0)){
+      pacmanAvatar = pacManDown;
+      pManCurrPosY += 50;
+      direction = DIRECTIONS.DOWN;
+     }
+  } else if(keyCode === UP_ARROW){
+    if(!(world[(pManCurrPosY - 50)/50][(pManCurrPosX/50)] === 0)){
+      pacmanAvatar = pacManUp;
+      pManCurrPosY -= 50;
+      direction = DIRECTIONS.UP;
+    }
+  } else if(keyCode === RIGHT_ARROW){
+    if(!(world[(pManCurrPosY)/50][((pManCurrPosX + 50) /50)] === 0)){
+      pacmanAvatar = pacManRight;
+      pManCurrPosX += 50;
+      direction = DIRECTIONS.RIGHT;
+    }
+  } else if (keyCode === LEFT_ARROW){
+    if(!(world[(pManCurrPosY)/50][((pManCurrPosX -50) /50)] === 0)){
+      pacmanAvatar = pacManLeft;
+      pManCurrPosX -= 50;
+      direction = DIRECTIONS.LEFT;
+    } 
+  }
+  if(world[(pManCurrPosY) / 50][(pManCurrPosX / 50)] === 1){
+    world[(pManCurrPosY) / 50][(pManCurrPosX / 50)] = 2;
+    score++;
+  }
+
+}

style.css

@@ -0,0 +1,11 @@
+/* CSS files add styling rules to your content */
+
+body {
+  font-family: helvetica, arial, sans-serif;
+  margin: 2em;
+}
+
+h1 {
+  font-style: italic;
+  color: #373fff;
+}