Move a Pacman image with Javascript. Only axis x movement as a first step.
In order to achieve the complete Pacman exercise, as a first step we will try to move it from right to left by adding edge detection. How will we do that? Don’t stop reading!
The html file we need is simple. Start with a standard html 5 structure. VSCode can help you by typing in the html5 editor and tab to complete that structure. What changes will you need to make to this structure?
Here’s the example, you can copy it into an index.html file.
<!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.0">
<title>Pacman</title>
</head>
<body>
<img id="PacMan" src="images/PacMan1.png" width='200'
onclick="Run()" style="position:absolute"> </img>
<script src="./pacman.js"></script>
</body>
</html>
// 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";
}
}
setInterval(Run, 100);
// TODO: Add a Javascript setInterval() method that will call the Run() function above every 200 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.
// This function determines the direction of PacMan based on screen edge detection.
function checkPageBounds(direction, imgWidth, pos, pageWidth) {
//
// TODO: Complete this to reverse direction upon hitting screen edge
if (direction == 0 && pos + imgWidth > pageWidth) {
direction = 1;
}
if (direction == 1 && pos < 0) {
direction = 0;
}
//
return direction;
}
//Please do not change
module.exports = checkPageBounds;