规则玩法：玩家使用方向键操控一条长长的蛇不断吞下豆子，同时蛇身随着吞下的豆子不断变长，当蛇头撞到蛇身或障壁时游戏结束。
思路元素：边界、蛇头、蛇身、食物
边界：输入 行数 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 即可通关。
以上就是怎么使用vue3+canvas实现简易的贪吃蛇游戏的详细内容。