diff --git a/images/PacMan1.png b/images/PacMan1.png
new file mode 100644
index 0000000..3df5764
Binary files /dev/null and b/images/PacMan1.png differ
diff --git a/images/PacMan2.png b/images/PacMan2.png
new file mode 100644
index 0000000..5bc1a2b
Binary files /dev/null and b/images/PacMan2.png differ
diff --git a/images/PacMan3.png b/images/PacMan3.png
new file mode 100644
index 0000000..ff0e74e
Binary files /dev/null and b/images/PacMan3.png differ
diff --git a/images/PacMan4.png b/images/PacMan4.png
new file mode 100644
index 0000000..fcdf128
Binary files /dev/null and b/images/PacMan4.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..15298b1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+
+
+ Pac-man
+
+
+
+
+
+
+
+
diff --git a/pacman.js b/pacman.js
new file mode 100644
index 0000000..e029561
--- /dev/null
+++ 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;