时间戳

首页 > 解决方案 > 我试图用 JS 构建 pacman，但我得到一个错误，说无法读取未定义的属性

javascript - 我试图用 JS 构建 pacman，但我得到一个错误，说无法读取未定义的属性

问题描述

在开始学习反应之前，我正在尝试构建一个简单的 pacman 游戏，但我不断收到三个错误，上面写着 错误

如果您看不到图像，这些是错误：

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>

标签： javascripthtml

解决方案

我在这里注意到一件事：

  squares[ghost.position] += direction;

squares[ghost.position]将返回 HTML 元素，并且您想对一个元素和一个数字求和？

所以在 squares[ghost.position] 的值之后将是"[object HTMLDivElement]1"一个字符串。这就是你出错的原因。

推荐阅读