Vue3+Canvas實現(xiàn)簡易的貪吃蛇游戲
前言
貪吃蛇作為一個經(jīng)典的小游戲，是很多人兒時的記憶，當時的掌機、諾基亞手機里面都有它的身影，隨著時間流逝，當年的我們已經(jīng)變成大人模樣，玩著王者，吃雞等大型游戲；貪吃蛇這種小游戲已經(jīng)吊不起我們的興趣了，不過如果你是一名程序員，那還是建議實現(xiàn)一下，畢竟作為 leetcode 353 算法題你總不想在面試的時候遇到它卻不會吧。
本文讓我們來復刻一下這款經(jīng)典的小游戲吧
規(guī)則
玩法：玩家使用方向鍵操控一條長長的蛇不斷吞下豆子，同時蛇身隨著吞下的豆子不斷變長，當蛇頭撞到蛇身或障壁時游戲結束。
思路
元素：邊界、蛇頭、蛇身、食物
邊界：輸入 行數(shù) x, 列數(shù) y 生成邊界地圖，用二維坐標標識每個點的位置；
蛇頭、蛇身：蛇頭和蛇身分離，當吃到食物后，蛇身尾部加一
食物：位置隨機生成；
流程圖
代碼實現(xiàn)
技術棧
選擇 vue3、vite 基礎架構； 視圖選用 canvas 技術來實現(xiàn)，相比 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) // 分數(shù)
let status = ref('start') // unStart | start | pause ｜ over | success(通關) // 狀態(tài)
let foodCoordinate: any = [
((Math.random() * width.value) / 10) | 0,
((Math.random() * height.value) / 10) | 0,
] // 食物坐標
let process: any = null // 定時器 Id
</script>初始化
在 onMounted 里執(zhí)行，主要做 地圖繪制、鼠標坐標檢測、方向監(jiān)測、食物繪制、定時器啟用等操作。
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)
}蛇頭/蛇身繪制
蛇是通過二維數(shù)組來表示的，每個節(jié)點代表身體的一部分，第一個節(jié)點代表蛇頭，蛇的移動是通過 刪除尾部節(jié)點，添加頭部節(jié)點來實現(xiàn)，中間節(jié)點不用動，在四個方向上的處理略有不同。 注意當吃到食物時，當前幀尾部節(jié)點不再刪除，即可實現(xiàn)蛇身長度加 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, 只需根據(jù)蛇頭當前坐標、當前方向，計算下一步的坐標是否會超出地圖尺寸即可。
吃到食物的計算方法：分別對蛇頭坐標和食物坐標的 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()
}
}
積分計算、暫停，繼續(xù)等功能
全局變量 status 代表當前局勢的狀態(tài)，當 status === 'pause' 時，觸發(fā)暫停操作，刪除 定時器變量，點擊重新開始按鈕，生成新的定時器。
當吃到食物時，全局變量 store ++, 雙向綁定到頁面上顯示，暫時設置積分超過 100 即可通關。
后記
通過接近 200行的代碼，實現(xiàn)了這款貪吃蛇的核心玩法; 另外對于初次使用 vue3 和 vite 也會有一些小收獲，比如
- vite 自帶了
less sass支持，不再需要 安裝less-loader了，如果強行安裝 loader 終端會報警告； - 通過
ref定義的響應式變量在 Dom 中可以直接使用，在 js 中則需要通過.value屬性訪問和修改，啥時候能再簡化些直接用就好了； - canvas 畫線條的時候觸發(fā)了 bug 無意中明白了 畫筆工具的原理；
到此這篇關于Vue3+Canvas實現(xiàn)簡易的貪吃蛇游戲的文章就介紹到這了,更多相關Vue3 Canvas貪吃蛇內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue 在methods中調用mounted的實現(xiàn)操作
這篇文章主要介紹了vue 在methods中調用mounted的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
kiss-vuex 是一個非常簡單的語法糖類庫，這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理，非常具有實用價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要給大家分享關于Vue 購物車案例的小練習，文章個悲劇購物車為標題需求利用HTML代碼實現(xiàn)整個過程,需要的朋友可以參考一下文章的具體內容2021-10-10
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細 ,需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本篇文章主要介紹了vue動態(tài)生成dom并且自動綁定事件，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
本文主要介紹了Vue實現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要給大家介紹了關于vue2.0/3.0響應式原理及區(qū)別的相關資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
把vue-router和express項目部署到服務器的方法
下面小編就為大家分享一篇把vue-router和express項目部署到服務器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
基于vue實現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決
這篇文章主要介紹了基于vue實現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04