Estoy tratando de hacer que esta animación de pacman recorra una serie de imágenes e invierta la dirección cuando llegue al borde de la página.
Intenté depurar en Chrome y me dio el siguiente error
"no se pueden leer las propiedades de nulo (ancho de lectura)"
var pos = 0; //pageWidth is the width of the webpage. This is later used to calculate when Pac-Man needs to turn around. const 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; let pageWidth = window.innerWidth; 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,200) // This function determines the direction of PacMan based on screen edge detection. function checkPageBounds(direction, imgWidth, pos, pageWidth) { if (direction == 1 & pos + imgWidth > pageWidth) direction== 0; if (direction == 0 & pos < 0) direction == 1; // return direction; } module.exports = checkPageBounds;
Su ejemplo no muestra la plantilla/html. ¿La identificación del elemento (PacMan) está escrita correctamente?
Este ejemplo debería imprimir un 200 en la consola:
<img id="PacMan" src="https://picsum.photos/200/300" />
const img = document.getElementById('PacMan'); let imgWidth = img.width;
Solo una pequeña sugerencia fuera de tema: observe la diferencia entre "var", "const" y "let".