Ниже приведен шаблон для игры Pacman, который мне нужно завершить. У меня проблемы с определением того, когда игрок собирается столкнуться со стенами. Проблема в том, что я не знаю, где находится игрок относительно лабиринта. Например, если игрок переместил одну плитку из массива лабиринта при нажатии клавиши, я мог бы определить положение и проверить соседние плитки на предмет столкновения. Но поскольку при нажатии клавиши игрок перемещается с шагом в 1 пиксель, я не могу отследить, на какой плитке он находится в данный момент.
Что я пробовал:
Я создал две переменные для хранения текущей строки и столбца игрока. Всякий раз, когда игрок движется, я проверяю, находится ли игрок полностью внутри блока, используя метод getBoundingClientRect(), а когда игрок полностью находится внутри блока, я обновляю трекеры строк и столбцов. Но я столкнулся с узким местом, так как игрок также может перемещаться между двумя плитками.
Пожалуйста, предложите мне несколько идей.
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
const main = document.querySelector("main");
//Player = 2, Wall = 1, Enemy = 3, Point = 0
let maze = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 2, 0, 1, 0, 0, 0, 0, 3, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 1, 1],
[1, 0, 0, 1, 0, 3, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 3, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
//Populates the maze in the HTML
for (let y of maze) {
for (let x of y) {
let block = document.createElement("div");
block.classList.add("block");
switch (x) {
case 1:
block.classList.add("wall");
break;
case 2:
block.id = "player";
let mouth = document.createElement("div");
mouth.classList.add("mouth");
block.appendChild(mouth);
break;
case 3:
block.classList.add("enemy");
break;
default:
block.classList.add("point");
block.style.height = "1vh";
block.style.width = "1vh";
}
main.appendChild(block);
}
}
//Player movement
const lbutton = document.querySelector("#lbttn");
const rbutton = document.querySelector("#rbttn");
const ubutton = document.querySelector("#ubttn");
const dbutton = document.querySelector("#dbttn");
function keyUp(event) {
if (event.key === "ArrowUp") {
upPressed = false;
ubutton.style.borderStyle = "outset";
} else if (event.key === "ArrowDown") {
downPressed = false;
dbutton.style.borderStyle = "outset";
} else if (event.key === "ArrowLeft") {
leftPressed = false;
lbutton.style.borderStyle = "outset";
} else if (event.key === "ArrowRight") {
rightPressed = false;
rbutton.style.borderStyle = "outset";
}
}
function keyDown(event) {
if (event.key === "ArrowUp") {
upPressed = true;
ubutton.style.borderStyle = "inset";
} else if (event.key === "ArrowDown") {
downPressed = true;
dbutton.style.borderStyle = "inset";
} else if (event.key === "ArrowLeft") {
leftPressed = true;
lbutton.style.borderStyle = "inset";
} else if (event.key === "ArrowRight") {
rightPressed = true;
rbutton.style.borderStyle = "inset";
}
}
const player = document.querySelector("#player");
const playerMouth = player.querySelector(".mouth");
let playerTop = 0;
let playerLeft = 0;
setInterval(function () {
if (downPressed) {
playerTop++;
player.style.top = playerTop + "px";
playerMouth.classList = "down";
} else if (upPressed) {
playerTop--;
player.style.top = playerTop + "px";
playerMouth.classList = "up";
} else if (leftPressed) {
playerLeft--;
player.style.left = playerLeft + "px";
playerMouth.classList = "left";
} else if (rightPressed) {
playerLeft++;
player.style.left = playerLeft + "px";
playerMouth.classList = "right";
}
}, 10);
function startGame() {
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);
startBtn.style.display = "none";
}
const startBtn = document.querySelector(".start");
startBtn.addEventListener("click", startGame);
Подробнее здесь: https://stackoverflow.com/questions/787 ... acman-game
