這篇“如何使用Vue3及Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何使用Vue3及Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲”文章吧。

創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為泉州企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站，泉州網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

規(guī)則

玩法：玩家使用方向鍵操控一條長(zhǎng)長(zhǎng)的蛇不斷吞下豆子，同時(shí)蛇身隨著吞下的豆子不斷變長(zhǎng)，當(dāng)蛇頭撞到蛇身或障壁時(shí)游戲結(jié)束。

思路

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

邊界：輸入 行數(shù) x, 列數(shù) y 生成邊界地圖，用二維坐標(biāo)標(biāo)識(shí)每個(gè)點(diǎn)的位置；

蛇頭、蛇身：蛇頭和蛇身分離，當(dāng)吃到食物后，蛇身尾部加一

食物：位置隨機(jī)生成；

流程圖

代碼實(shí)現(xiàn)

技術(shù)棧

選擇 vue3、vite 基礎(chǔ)架構(gòu)； 視圖選用 canvas 技術(shù)來實(shí)現(xiàn)，相比 dom 來說性能更好；

基本變量定義

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

初始化

在 onMounted 里執(zhí)行，主要做 地圖繪制、鼠標(biāo)坐標(biāo)檢測(cè)、方向監(jiān)測(cè)、食物繪制、定時(shí)器啟用等操作。

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(`當(dāng)前鼠標(biāo)位置：${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')
  }
}

食物繪制

當(dāng)食物被吃掉后，需要銷毀和重新生成

// 繪制食物
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)
}

蛇頭/蛇身繪制

蛇是通過二維數(shù)組來表示的，每個(gè)節(jié)點(diǎn)代表身體的一部分，第一個(gè)節(jié)點(diǎn)代表蛇頭，蛇的移動(dòng)是通過 刪除尾部節(jié)點(diǎn)，添加頭部節(jié)點(diǎn)來實(shí)現(xiàn)，中間節(jié)點(diǎn)不用動(dòng)，在四個(gè)方向上的處理略有不同。 注意當(dāng)吃到食物時(shí)，當(dāng)前幀尾部節(jié)點(diǎn)不再刪除，即可實(shí)現(xiàn)蛇身長(zhǎng)度加 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
      ...

碰撞算法、邊界條件

當(dāng)蛇頭觸碰到地圖邊緣，將 game over, 只需根據(jù)蛇頭當(dāng)前坐標(biāo)、當(dāng)前方向，計(jì)算下一步的坐標(biāo)是否會(huì)超出地圖尺寸即可。

吃到食物的計(jì)算方法：分別對(duì)蛇頭坐標(biāo)和食物坐標(biāo)的 x、y 軸進(jìn)行絕對(duì)值計(jì)算，小于元素尺寸時(shí)認(rèn)為已接觸。

// 更新校驗(yàn)
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()
  }
}

積分計(jì)算、暫停，繼續(xù)等功能

全局變量 status 代表當(dāng)前局勢(shì)的狀態(tài)，當(dāng) status === 'pause' 時(shí)，觸發(fā)暫停操作，刪除 定時(shí)器變量，點(diǎn)擊重新開始按鈕，生成新的定時(shí)器。

當(dāng)吃到食物時(shí)，全局變量 store ++, 雙向綁定到頁面上顯示，暫時(shí)設(shè)置積分超過 100 即可通關(guān)。

以上就是關(guān)于“如何使用Vue3及Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：如何使用Vue3及Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲
URL網(wǎng)址：http://www.rwnh.cn/article20/jissco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、電子商務(wù)、小程序開發(fā)、Google、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)