canvas实现贪食蛇的实践

2024-11-3 02:39| 发布者: 4d5a8576d| 查看: 96| 评论: 0

摘要: 贪食蛇迩来 dan 有在油管上直播,播放量最多的就是手写一个贪食蛇。原来想学一下大佬写代码的姿势，看了几分钟就没了耐烦，心想我为什么不能本身写一个呢。一步一步跟着敲代码，我实践了一段时间但是收效甚微,由于

贪食蛇

迩来 dan 有在油管上直播,播放量最多的就是手写一个贪食蛇。原来想学一下大佬写代码的姿势，看了几分钟就没了耐烦，心想我为什么不能本身写一个呢。一步一步跟着敲代码，我实践了一段时间但是收效甚微,由于中间少了本身的思索。初期大概有些作用，可以学到一些技巧和规范。但是本身实现一个东西带来的成绩感，你不停的 debug 和查文档查资料留下的影象和风俗，这大概就是这个玩意带给我最大的收获吧。

在线演示 github 我的 github 不绝是单机模式，假如这篇文章对您有所资助的话接待点个 star

数据布局及变量

[code] const canvas = document.getElementById("canvas") const ctx = canvas.getContext("2d") const width = 400 const height = 400 const cellLength = 20 let foodPosition let initSnake = [ [0, 0], [1, 0], [2, 0], ] let snake = [...initSnake] let direction = "right" let canChangeDirection = true[/code]

canvas 绘制页面

[code] // 配景 function drawBackground() { ctx.strokeStyle = "#bfbfbf" for (let i = 0; i <= height / cellLength; i++) { ctx.beginPath() ctx.moveTo(0, cellLength * i) ctx.lineTo(width, cellLength * i) ctx.stroke() } for (let i = 0; i <= width / cellLength; i++) { ctx.beginPath() ctx.moveTo(cellLength * i, 0) ctx.lineTo(cellLength * i, height) ctx.stroke() } } // 蛇 function drawSnake() { let step = 100 / (snake.length - 1) for (let i = 0; i < snake.length; i++) { // 这里做了渐变色的蛇，添加动态色彩。尾部有个最小白色阀值，免得跟配景混为一体 const percent = Math.min(100 - step * i, 90) ctx.fillStyle = `hsl(0,0%,${percent}%)` ctx.fillRect( snake[i][0] * cellLength, snake[i][1] * cellLength, cellLength, cellLength ) } } // 绘制食品 // 随机生成食品的位置 function generateRandomFood() { // 假如没有位置可以生成 if (snake.length > width * height) { return alert("you win") } const randomX = Math.floor(Math.random() * (width / cellLength)) const randomY = Math.floor(Math.random() * (height / cellLength)) // 生成的位置假如跟蛇体积碰撞，则重新生成。 for (let i = 0; i < snake.length; i++) { if (snake[i][0] === randomX && snake[i][1] === randomY) { return generateRandomFood() } } foodPosition = [randomX, randomY] } // 绘制 function drawFood() { ctx.fillStyle = "#ff7875" ctx.fillRect( foodPosition[0] * cellLength, foodPosition[1] * cellLength, cellLength, cellLength ) } [/code]

蛇的移动

[code] // 蛇的移动 // 确定下一次移动的位置，将这个点push到数组末尾（头的位置）， // 将数组第一项shift出来（尾的位置） // 吃食品的逻辑 // 假如食品的位置跟下一次移动的位置相同，将这个点到场头部，不推出尾部 function snakeMove() { let next let last = snake[snake.length - 1] // 根据方向确定下一个蛇头的位置 switch (direction) { case "up": { next = [last[0], last[1] - 1] break } case "down": { next = [last[0], last[1] + 1] break } case "left": { next = [last[0] - 1, last[1]] break } case "right": { next = [last[0] + 1, last[1]] break } } // 边沿碰撞 const boundary = next[0] < 0 || next[0] >= width / cellLength || next[1] < 0 || next[1] >= height / cellLength // 自身碰撞 const selfCollision = snake.some(([x, y]) => next[0] === x && next[1] === y) // 碰撞重新开始游戏 if (boundary || selfCollision) { return restart() } snake.push(next) // 假如下一个点是食品的位置，不推出头部 if (next[0] === foodPosition[0] && next[1] === foodPosition[1]) { generateRandomFood() return } snake.shift() canChangeDirection = true }[/code]

事故监听

[code] document.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowUp": if (direction === "down" || !canChangeDirection) return direction = "up" canChangeDirection = false break case "ArrowDown": if (direction === "up" || !canChangeDirection) return direction = "down" canChangeDirection = false break case "ArrowLeft": if (direction === "right" || !canChangeDirection) return direction = "left" canChangeDirection = false break case "ArrowRight": if (direction === "left" || !canChangeDirection) return direction = "right" canChangeDirection = false break } })[/code]

requestAnimationFrame 实现动画

[code] // 默认的requestAnimationFrame循环应该是60帧，对于这个游戏来说太快了。 // 所以做了限定，5次loop才渲染（蛇移动一格）一次 function animate() { let count = 0 function loop() { if (++count > 5) { draw() count = 0 } requestAnimationFrame(loop) } requestAnimationFrame(loop) } [/code]

BUG 解决

游戏规则中，蛇是不能反向移动的。但是在事故回调中，假如改变方向过快，（5 次 loop 才执行一次重绘），就会出现方向变了，但是蛇的位置没变（比如蛇向右移动，我们先按上再按左），他就和自身碰撞了解决方案：我加了一个 canChangeDirection 变量，当你改变方向之后，必须等候蛇移动了才气再次改变方向 [code] // 事故回调 case "ArrowUp": if (direction === "down" |!canChangeDirection) return direction = "up" canChangeDirection = false break[/code]

到此这篇关于canvas实现贪食蛇的实践的文章就先容到这了,更多干系 canvas贪食蛇内容请搜索脚本之家以前的文章或继承欣赏下面的干系文章，渴望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/810952.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：bootstrapv4轮播图去除两侧阴影及线框的方法下一篇：利用feDisplacementMap+feImage滤镜实现水波纹效果(盘算动态值)

账号		自动登录	找回密码
密码			立即注册