Vue3+Canvas實現簡易的貪吃蛇遊戲

Posted on by

前言

貪吃蛇作為一個經典的小遊戲，是很多人兒時的記憶，當時的掌機、諾基亞手機裡面都有它的身影，隨著時間流逝，當年的我們已經變成大人模樣，玩著王者，吃雞等大型遊戲；貪吃蛇這種小遊戲已經吊不起我們的興趣瞭，不過如果你是一名程序員，那還是建議實現一下，畢竟作為 leetcode 353 算法題你總不想在面試的時候遇到它卻不會吧。

本文讓我們來復刻一下這款經典的小遊戲吧

在線地址

規則

玩法：玩傢使用方向鍵操控一條長長的蛇不斷吞下豆子，同時蛇身隨著吞下的豆子不斷變長，當蛇頭撞到蛇身或障壁時遊戲結束。

思路

元素：邊界、蛇頭、蛇身、食物

邊界：輸入 行數 x, 列數 y 生成邊界地圖，用二維坐標標識每個點的位置；

蛇頭、蛇身：蛇頭和蛇身分離，當吃到食物後，蛇身尾部加一

食物：位置隨機生成；

流程圖

代碼實現

技術棧

選擇 vue3、vite 基礎架構； 視圖選用 canvas 技術來實現，相比 dom 來說性能更好；

基本變量定義

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  
  let width = ref(600) // 地圖默認寬度
  let height = ref(400) // 地圖默認高度
  let canvas: any = null // canvas 對象
  let ctx: any = null // canvas 渲染上下文對象
  let snakeList = [[0, 100], [10, 100],] // 蛇的點位坐標
  let direction = 'right' // top | down | left | right // 當前方向
  let elementWidth = 10 // 元素尺寸
  let step = 10 // 速度
  let store = ref(0) // 分數
  let status = ref('start') // unStart | start | pause ｜ over | success(通關) // 狀態
  let foodCoordinate: any = [
    ((Math.random() * width.value) / 10) | 0,
    ((Math.random() * height.value) / 10) | 0,
  ] // 食物坐標
  let process: any = null // 定時器 Id
</script>

初始化

在 onMounted 裡執行，主要做 地圖繪制、鼠標坐標檢測、方向監測、食物繪制、定時器啟用等操作。

function handleInit() {
  canvas = document.getElementById('canvas')

  if (canvas?.getContext) {
    ctx = canvas?.getContext('2d')

    canvas.addEventListener('mousemove', e => {
      ctx.clearRect(10, height.value - 20, 120, 40)
      ctx.fillText(`當前鼠標位置：${e.offsetX}, ${e.offsetY}`, 10, height.value - 10)
    })

    document.addEventListener('keydown', e => {
      e.preventDefault()

      if (Direction[e.keyCode]) {
        direction = Direction[e.keyCode]
      }
    })

    process = setInterval(handleRenderSnake, 150)
    handleRenderFood()
    // window.requestAnimationFrame(handleRenderSnake)
  } else {
    alert('您的瀏覽器不支持 canvas')
  }
}

食物繪制

當食物被吃掉後，需要銷毀和重新生成

// 繪制食物
function handleRenderFood() {
  ctx.clearRect(foodCoordinate[0], foodCoordinate[1], 10, 10)
  foodCoordinate = [(Math.random() * width.value) | 0, (Math.random() * height.value) | 0]
  ctx.fillStyle = '#eb2f96'
  ctx.fillRect(foodCoordinate[0], foodCoordinate[1], 10, 10)
}

蛇頭/蛇身繪制

蛇是通過二維數組來表示的，每個節點代表身體的一部分，第一個節點代表蛇頭，蛇的移動是通過 刪除尾部節點，添加頭部節點來實現，中間節點不用動，在四個方向上的處理略有不同。 註意當吃到食物時，當前幀尾部節點不再刪除，即可實現蛇身長度加 1。

function handleRenderSnake() {
  switch (direction) {
    case 'top':
      if (snakeList.slice(-1)[0][1] <= 0) {
        status.value = 'over'
        return
      }

      snakeList.push([
        snakeList[snakeList.length - 1][0],
        snakeList[snakeList.length - 1][1] - step,
      ])
      handleUpdateVerify()
      break
    case 'down':
      if (snakeList.slice(-1)[0][1] >= height.value - 1) {
        status.value = 'over'
        return
      }

      snakeList.push([
        snakeList[snakeList.length - 1][0],
        snakeList[snakeList.length - 1][1] + step,
      ])
      handleUpdateVerify()

      break
      ...

碰撞算法、邊界條件

當蛇頭觸碰到地圖邊緣，將 game over, 隻需根據蛇頭當前坐標、當前方向，計算下一步的坐標是否會超出地圖尺寸即可。

吃到食物的計算方法：分別對蛇頭坐標和食物坐標的 x、y 軸進行絕對值計算，小於元素尺寸時認為已接觸。

// 更新校驗
function handleUpdateVerify() {
  if (status.value === 'pause') {
    clearInterval(process)
  }

  if (store.value >= 100) {
    status.value = 'success'
    return
  }

  for (let i of snakeList) {
    ctx.clearRect(i[0], i[1], elementWidth, elementWidth)
  }

  let currentSnake = snakeList.slice(-1)[0]
  if (
    Math.abs(currentSnake[0] - foodCoordinate[0]) < 10 &&
    Math.abs(currentSnake[1] - foodCoordinate[1]) < 10
  ) {
    store.value++
    handleRenderFood()
  } else {
    snakeList.shift()
  }
}

積分計算、暫停，繼續等功能

全局變量 status 代表當前局勢的狀態，當 status === 'pause' 時，觸發暫停操作，刪除 定時器變量，點擊重新開始按鈕，生成新的定時器。

當吃到食物時，全局變量 store ++, 雙向綁定到頁面上顯示，暫時設置積分超過 100 即可通關。

後記

通過接近 200行的代碼，實現瞭這款貪吃蛇的核心玩法; 另外對於初次使用 vue3 和 vite 也會有一些小收獲，比如

  • vite 自帶瞭 less sass 支持，不再需要 安裝 less-loader 瞭，如果強行安裝 loader 終端會報警告；
  • 通過 ref 定義的響應式變量在 Dom 中可以直接使用，在 js 中則需要通過 .value 屬性訪問和修改，啥時候能再簡化些直接用就好瞭；
  • canvas 畫線條的時候觸發瞭 bug 無意中明白瞭 畫筆工具的原理；

到此這篇關於Vue3+Canvas實現簡易的貪吃蛇遊戲的文章就介紹到這瞭,更多相關Vue3 Canvas貪吃蛇內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：