Im trying to build pacman with JS but im getting an error that says cannot read properties of undefined

I’m trying to build a simple pacman game before I start learning react but I keep getting three errors that says
Im trying to build pacman with JS but im getting an error that says cannot read properties of undefined

if you can’t see the image these are the errors:

cannot read properties of undefined (reading 'add' )
cannot read properties of undefined (reading 'classList' )
cannot read properties of undefined (reading 'remove' )
const grid = document.querySelector('.grid');
const width = 28;
let squares = [];
const layout = [
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
  1, 3, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 3, 1,
  1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
  1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 2, 2, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 2, 2, 2, 2, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  4, 4, 4, 4, 4, 4, 0, 0, 0, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 0, 0, 0, 4, 4, 4, 4, 4, 4,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
  1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
  1, 3, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 3, 1,
  1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
  1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
  1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
  1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
];

function createBoard() {
  for (let i = 0; i < layout.length; i++) {
    const square = document.createElement('div');
    grid.appendChild(square);
    squares.push(square);

    if (layout[i] === 0) {
      squares[i].classList.add('pac-dot');
    } else if (layout[i] === 1) {
      squares[i].classList.add('wall');
    } else if (layout[i] === 2) {
      squares[i].classList.add('ghost-lair');
    } else if (layout[i] === 3) {
      squares[i].classList.add('power-pallets');
    }
  }
}

createBoard();

class ghost {
  constructor(name, startPosition, speed) {
    this.name = name;
    this.startPosition = startPosition;
    this.position = startPosition;
    this.speed = speed;
    this.isScared = false;
  }
}

const ghosts = [
  new ghost('red', 348, 250),
  new ghost('blue', 349, 250),
  new ghost('pink', 350, 250),
  new ghost('yellow', 351, 250)
]

ghosts.forEach((ghost) => {
  squares[ghost.position].classList.add(ghost.name);
  squares[ghost.position].classList.add('ghost');
})

function moveGhost(ghost) {
  let random = Math.floor(Math.random() * 4) + 1;
  const allDirections = [-1, +1, -width, +width];
  let direction = allDirections[random];

  //
  setInterval(() => {
    if (!squares[ghost.position + direction].classList.contains('wall')) {
      //remove the ghost from the old position
      squares[ghost.position].classList.remove(ghost.name)
      squares[ghost.position].classList.remove('ghost')
      //update the ghost position
      squares[ghost.position] += direction;
      //add the ghost to the grid
      squares[ghost.position].classList.add(ghost.name);
      squares[ghost.position].classList.add('ghost');
    } else {
      direction = allDirections[Math.floor(Math.random() * allDirections.length)]
    }
  }, 2500)
}

ghosts.forEach(ghost => moveGhost(ghost))
.grid {
  width: 420px;
  height: 420px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

.grid>* {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 1px solid green;
  /*delete or change color and opacity*/
}

.pac-dot {
  border: 5px solid #fff;
  background: greenyellow;
}

.wall {
  background: blue;
}

.power-pallets {
  background: green;
  border-radius: 7.5px;
}

.ghost-lair {
  background-color: #fff;
}

.ghost {
  border-radius: 7.5px;
}

.red {
  background: red;
}

.blue {
  background-color: aqua;
}

.pink {
  background-color: palevioletred;
}

.yellow {
  background-color: yellow;
}
<div class="grid"></div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You have to change

squares[ghost.position] += direction

to

ghost.position += direction

Also the following random value

let random = Math.floor(Math.random() * 4) + 1

should instead be:

let random = Math.floor(Math.random() * 4)

so it does not occasionally result in an undefined direction value.

Method 2

There is one thing that i noticed here:

  squares[ghost.position] += direction;

squares[ghost.position] will return HTML element and you want to sum an element and a number?

So after that value of squares[ghost.position] will be "[object HTMLDivElement]1"and thats a string. Thats why you got errors.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x