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;