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

I'm trying to build a simple pacman game before I start learning react but I keep getting three errors that says

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>

CodePudding user response：

You have to change

squares[ghost.position]  = direction

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.

CodePudding user response：

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.