Add files via upload

are we allowed to use pacmans likeness? if not then direct your lawyers over to emeritas please
cattmassidy528 · Oct 27, 2022 · 7f658b2 · 7f658b2
1 parent 27c3d35
commit 7f658b2
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 0 deletions.
diff --git a/images/PacMan1.png b/images/PacMan1.png
diff --git a/images/PacMan2.png b/images/PacMan2.png
diff --git a/images/PacMan3.png b/images/PacMan3.png
diff --git a/images/PacMan4.png b/images/PacMan4.png
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>Pac-man</title>
+  </head>
+  <body>
+    <img
+      id="PacMan"
+      src="images/PacMan1.png"
+      width="200"
+      onclick="Run()"
+      style="position: absolute"
+    />
+
+    <!-- DO NOT CHANGE THIS LINE OF CODE -->
+    <script src="./pacman.js"></script>
+  </body>
+</html>
diff --git a/pacman.js b/pacman.js
@@ -0,0 +1,55 @@
+// pos is the PacMan image position variable- it is set to 0 initially
+var pos = 0;
+//pageWidth is the width of the webpage. This is later used to calculate when Pac-Man needs to turn around. 
+let pageWidth = window.innerWidth;
+
+//This array contains all the PacMan movement images
+const pacArray = [
+  ['./images/PacMan1.png', './images/PacMan2.png'],
+  ['./images/PacMan3.png', './images/PacMan4.png'],
+];
+
+// this variable defines what direction should PacMan go into:
+// 0 = left to right
+// 1 = right to left (reverse)
+var direction = 0;
+
+// This variable helps determine which PacMan image should be displayed. It flips between values 0 and 1
+var focus = 0;
+
+// This function is called on mouse click. Every time it is called, it updates the PacMan image, position and direction on the screen.
+function Run() {
+  let img = document.getElementById('PacMan');
+  let imgWidth = img.width;
+  focus = (focus + 1) % 2;
+  direction = checkPageBounds(direction, imgWidth, pos, pageWidth);
+  img.src = pacArray[direction][focus];
+  if (direction) {
+    pos -= 20;
+    img.style.left = pos + 'px';
+  } else {
+    pos += 20;
+    img.style.left = pos + 'px';
+  }
+}
+
+// TODO: Add a Javascript setInterval() method that will call the Run() function above every 300 milliseconds. Note: in the video, Dr. Williams uses the setTimeout() method, but here we are going to use a slightly different
+// method called setInterval(), so that you can have practice using this method.
+// Inside of the Run() function you will also have to add an extra argument "pageWidth", which is declared on line 4 when you call the checkPageBounds() function below. 
+setInterval(Run, 30)
+// This function determines the direction of PacMan based on screen edge detection. 
+function checkPageBounds(direction, imgWidth, pos, pageWidth) {
+  if (pos > pageWidth - imgWidth){
+    direction = 1
+  }
+    if (pos < pageWidth - pageWidth){
+    direction = 0
+  }
+  //
+  // TODO: Complete this to reverse direction upon hitting screen edge
+  //
+  return direction;
+}
+
+//Please do not change
+// module.exports = checkPageBounds;