如何在pacman游戏中检测碰撞?

要检测吃豆人游戏中的碰撞,您需要跟踪玩家相对于迷宫网格的位置。以下是一种简化的方法:

跟踪玩家位置:根据移动更新玩家的行和列。 检查碰撞:在移动之前,检查下一个位置是否是墙。 下面是一个修改后的示例:

javascript

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],
];

// Initial position of the player
let playerPos = { x: 1, y: 1 };

//Populates the maze in the HTML
function createMaze() {
  main.innerHTML = ''; // Clear existing maze
  for (let y = 0; y < maze.length; y++) {
    for (let x = 0; x < maze[y].length; x++) {
      let block = document.createElement("div");
      block.classList.add("block");

      switch (maze[y][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);
    }
  }
}

// Move player if the next position is not a wall
function movePlayer(dx, dy) {
  const newX = playerPos.x + dx;
  const newY = playerPos.y + dy;
  if (maze[newY][newX] !== 1) { // Check for collision with wall
    maze[playerPos.y][playerPos.x] = 0; // Clear current position
    playerPos.x = newX;
    playerPos.y = newY;
    maze[playerPos.y][playerPos.x] = 2; // Update new position
    createMaze(); // Re-create the maze with updated position
  }
}

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 lbutton = document.querySelector("#lbttn");
const rbutton = document.querySelector("#rbttn");
const ubutton = document.querySelector("#ubttn");
const dbutton = document.querySelector("#dbttn");

const startBtn = document.querySelector(".start");
startBtn.addEventListener("click", startGame);

function startGame() {
  document.addEventListener("keydown", keyDown);
  document.addEventListener("keyup", keyUp);
  startBtn.style.display = "none";
}

setInterval(function () {
  if (downPressed) {
    movePlayer(0, 1);
  } else if (upPressed) {
    movePlayer(0, -1);
  } else if (leftPressed) {
    movePlayer(-1, 0);
  } else if (rightPressed) {
    movePlayer(1, 0);
  }
}, 200);

createMaze();