js手寫(xiě)貪吃蛇游戲?qū)嵗创a

更新時(shí)間：2023年09月05日 09:06:21 作者：下一站丶

這篇文章主要給大家介紹了關(guān)于js手寫(xiě)貪吃蛇游戲的相關(guān)資料,貪吃蛇游戲是一款經(jīng)典的游戲,在很多平臺(tái)上都有出現(xiàn),文中給出了詳細(xì)源代碼,需要的朋友可以參考下

前端手寫(xiě)貪吃蛇游戲

貪吃蛇游戲場(chǎng)景使用了js 和 html /css 就可以完成一個(gè)貪吃蛇小游戲

技術(shù)分析

主要用到的幾個(gè)技術(shù)點(diǎn)：

clientWidth ：元素的寬度，包含內(nèi)邊距
clientHeight ：元素的高度，包含內(nèi)邊距
setInterval：開(kāi)啟定時(shí)器
clearInterval：關(guān)閉定時(shí)器
keydown：鍵盤(pán)事件
createElement ：創(chuàng)建節(jié)點(diǎn)

首先需要一個(gè)背景板需要吧蛇和食物在指定內(nèi)容里不能超出接下來(lái)就是蛇的移動(dòng) 使用定時(shí)間一秒移動(dòng)一格食物就是根據(jù)計(jì)算隨機(jī)生成當(dāng)蛇和食物的位置重疊了就可以認(rèn)為蛇吃到了食物當(dāng)蛇的x，y 大于元素的寬度/高度,就認(rèn)為碰到了墻壁直接ov

以上就是關(guān)鍵技術(shù)點(diǎn) 直接源碼

源碼

HTML

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

JS

<script>
  const gameBoard = document.getElementById("game-board");
  let snake = [{ x: 0, y: 0 }];
  let food = { x: 0, y: 0 };
  let direction = "right";
  function createSnake() {
    for (let segment of snake) {
      const snakeSegment = document.createElement("div");
      snakeSegment.className = "snake";
      snakeSegment.style.left = segment.x + "px";
      snakeSegment.style.top = segment.y + "px";
      gameBoard.appendChild(snakeSegment);
    }
  }
  function createFood() {
    const maxX = gameBoard.clientWidth - 20;
    const maxY = gameBoard.clientHeight - 20;
    food.x = Math.floor(Math.random() * maxX);
    food.y = Math.floor(Math.random() * maxY);
    const foodElement = document.createElement("div");
    foodElement.className = "food";
    foodElement.style.left = food.x + "px";
    foodElement.style.top = food.y + "px";
    gameBoard.appendChild(foodElement);
  }
  function updateGame() {
    const snakeHead = { x: snake[0].x, y: snake[0].y };
    // Move the snake
    if (direction === "right") snakeHead.x += 20;
    else if (direction === "left") snakeHead.x -= 20;
    else if (direction === "up") snakeHead.y -= 20;
    else if (direction === "down") snakeHead.y += 20;
    // Check for collision with food
    if (snakeHead.x === food.x && snakeHead.y === food.y) {
      snake.push({ x: snakeHead.x, y: snakeHead.y });
      const foodElement = document.querySelector(".food");
      foodElement.remove();
      createFood();
    }
    // Remove the tail segment
    snake.pop();
    // Check for collision with walls or itself
    if (
      snakeHead.x < 0 ||
      snakeHead.x >= gameBoard.clientWidth ||
      snakeHead.y < 0 ||
      snakeHead.y >= gameBoard.clientHeight
    ) {
      clearInterval(gameInterval);
      alert("Game Over!");
      return;
    }
    for (let segment of snake) {
      if (segment.x === snakeHead.x && segment.y === snakeHead.y) {
        clearInterval(gameInterval);
        alert("Game Over!");
        return;
      }
    }
    // Update the snake on the game board
    snake.unshift({ x: snakeHead.x, y: snakeHead.y });
    const snakeSegments = document.querySelectorAll(".snake");
    for (let i = 0; i < snakeSegments.length; i++) {
      snakeSegments[i].style.left = snake[i].x + "px";
      snakeSegments[i].style.top = snake[i].y + "px";
    }
  }
  createSnake();
  createFood();
  const gameInterval = setInterval(updateGame, 150);
  document.addEventListener("keydown", (event) => {
    if (event.key === "ArrowRight" && direction !== "left") direction = "right";
    else if (event.key === "ArrowLeft" && direction !== "right") direction = "left";
    else if (event.key === "ArrowUp" && direction !== "down") direction = "up";
    else if (event.key === "ArrowDown" && direction !== "up") direction = "down";
  });
</script>

CSS

<style>
  #game-board {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }
  .snake {
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute;
  }
  .food {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
  }
</style>

以上就實(shí)現(xiàn)了簡(jiǎn)單的貪吃蛇功能