H5贪吃蛇小游戏

最新推荐文章于 2024-07-14 18:10:31 发布

有点困了.

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量301

点赞数 1

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/weixin_55541470/article/details/136811733

版权

本文详细介绍了如何使用HTML、CSS和JavaScript构建一个简单的蛇游戏，包括游戏板的布局、蛇和苹果的生成，以及键盘控制的事件监听和游戏结束的处理。

摘要由CSDN通过智能技术生成

html

<div id="game-board"></div>

css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}
#game-board {
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(20, 1fr);
  border: 2px solid #333;
}
.cell {
  border: 1px solid #fff;
  transition: background-color 0.1s;
}
.apple {
  background-color: red;
}
.snake {
  background-color: green;
}

const board = document.getElementById("game-board");
let cells = [];

for (let i = 0; i < 400; i++) {
  const cell = document.createElement("div");
  cell.classList.add("cell");
  board.appendChild(cell);
  cells.push(cell);
}

let currentSnake = [2, 1, 0];
let direction = 1;
let appleIndex = 0;
let speed = 300;
let intervalId = 0;

function startGame() {
  currentSnake.forEach((index) => cells[index].classList.remove("snake"));
  cells[appleIndex].classList.remove("apple");
  clearInterval(intervalId);
  currentSnake = [2, 1, 0];
  direction = 1;
  speed = 300;
  generateApple();
  currentSnake.forEach((index) => cells[index].classList.add("snake"));
  intervalId = setInterval(move, speed);
}

function move() {
  if (
    (currentSnake[0] + 1 >= 400 && direction === 20) ||
    (currentSnake[0] - 20 < 0 && direction === -20) ||
    (currentSnake[0] % 20 === 0 && direction === -1) ||
    (currentSnake[0] + 1 === currentSnake[1] && direction === 1) ||
    (currentSnake[0] - 1 === currentSnake[1] && direction === -1) ||
    (currentSnake[0] - 20 === currentSnake[1] && direction === -20) ||
    (currentSnake[0] + 20 === currentSnake[1] && direction === 20)
  ) {
    alert("Game over!");
    return clearInterval(intervalId);
  }

  const tail = currentSnake.pop();
  cells[tail].classList.remove("snake");
  currentSnake.unshift(currentSnake[0] + direction);

  if (cells[currentSnake[0]].classList.contains("apple")) {
    cells[currentSnake[0]].classList.remove("apple");
    cells[tail].classList.add("snake");
    currentSnake.push(tail);
    generateApple();
    speed -= 10;
    clearInterval(intervalId);
    intervalId = setInterval(move, speed);
  }

  cells[currentSnake[0]].classList.add("snake");
}

function generateApple() {
  do {
    appleIndex = Math.floor(Math.random() * 400);
  } while (cells[appleIndex].classList.contains("snake"));
  cells[appleIndex].classList.add("apple");
}

function control(e) {
  if (e.keyCode === 39) {
    direction = 1;
  } else if (e.keyCode === 38) {
    direction = -20;
  } else if (e.keyCode === 37) {
    direction = -1;
  } else if (e.keyCode === 40) {
    direction = 20;
  }
}

document.addEventListener("keyup", control);
startGame();