2. it技术
  3. 纯JS手写超级简单贪吃蛇

纯JS手写超级简单贪吃蛇

it2024-12-02  18

看看效果

先上代码，表示尊敬

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇画布</title> <!-- css部分需要放在头部，因为浏览器绘制好dom树后，需要再有cssTree结合成RenderTree，假如把css部分放在body的最下面 可能会出现白屏，因为这个时候浏览器先解析dom树，再去解析css文件，再绘制到浏览器屏幕 css部分放在头部，会提前加载好cssTree，接下来，遇到dom，遇到一个就直接渲染到浏览器屏幕，提升用户体验 --> <style> canvas { display: block; margin: 0 auto; background: #B0C4DE; } </style> </head> <body> <canvas width="600" height="600" id="huabu"></canvas> <!-- 放在这部分，因为浏览器的执行顺序是从上到下，先加载完dom结点，下面的getElementById才能正确获取到dom, 如果是回调函数，可以放在head里面 --> <script> var huabu = document.getElementById("huabu") var tools = huabu.getContext("2d") // 食物的默认位置 var x = Math.floor(Math.random() * 20) * 30 var y = Math.floor(Math.random() * 20) * 30 //添加标记，食物是否被吃,默认值，没有被吃 var isEated = false //蛇的默认位置 var snake = [{ x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }] //蛇的移动方向 var directionX = 1 var directionY = 0 //判断游戏是否结束 var isGameOver = false //监听键盘按下的行为 document.addEventListener('keydown', (event) => { // console.log('当前按下的值是', event.keyCode) //上：38 //下：40 //左: 37 //右：39 if (event.keyCode === 37) { directionX = -1; directionY = 0; } else if (event.keyCode === 38) { directionX = 0; directionY = -1; } else if (event.keyCode === 39) { directionX = 1; directionY = 0; } else if (event.keyCode === 40) { directionX = 0; directionY = 1; } }) //通过使用定时器，产生动画效果 setInterval(() => { if (isGameOver) { return } //清除上一次的画布 tools.clearRect(0, 0, 600, 600) if (isEated) { //绘制随机食物,x,y的取值是[0,19] x = Math.floor(Math.random() * 20) * 30 y = Math.floor(Math.random() * 20) * 30 } tools.fillStyle = "#cccc00" tools.fillRect(x, y, 30, 30) //水平线 for (let i = 1; i < 20; i++) { tools.moveTo(0, 30 * i + 0.5) tools.lineTo(600, 30 * i + 0.5) } //垂直线 for (let i = 1; i < 20; i++) { tools.moveTo(30 * i + 0.5, 0) tools.lineTo(30 * i + 0.5, 600) } tools.strokeStyle = 'white' tools.stroke() if (snake[0].x * 30 === x && snake[0].y * 30 === y) { //蛇头位置和食物位置重合了，这时候不用snake.pop()，相当于蛇的长度增加了 isEated = true; } else { isEated = false; snake.pop() } var oldHead = snake[0] var newHead = { x: oldHead.x + directionX, y: oldHead.y + directionY, } //游戏结束的判定 if (newHead.x < 0 || newHead.x > 19 || newHead.y < 0 || newHead.y > 19) { isGameOver = true } else { snake.unshift(newHead) //绘制蛇 for (let i = 0; i < snake.length; i++) { if (i === 0) { // 蛇头 tools.fillStyle = '#ff0033' } else { //蛇身 tools.fillStyle = '#333399' } tools.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30) } tools.fill() } }, 1000 / 3) </script> </body> </html>

这里需要先学一丢丢的canvas知识，对于新手朋友来说，canvas可以很简单的说，就是画图工具，就是这个

不同的是，canvas画图是用代码画的，这里是canvas中文文档

这里分析一下里面的逻辑：

1. 首先，怎么实现动画效果，因为canvas是一张画布，是静态的，但是使用计时器，每次都清除画布，并且新的画布的内容和旧的画布的内容稍微有点区别，是不是就是可以产生动画效果啦

setInterval(() => { if (isGameOver) { return } //清除上一次的画布 tools.clearRect(0, 0, 600, 600) if (isEated) { //绘制随机食物,x,y的取值是[0,19] x = Math.floor(Math.random() * 20) * 30 y = Math.floor(Math.random() * 20) * 30 } tools.fillStyle = "#cccc00" tools.fillRect(x, y, 30, 30) //水平线 for (let i = 1; i < 20; i++) { tools.moveTo(0, 30 * i + 0.5) tools.lineTo(600, 30 * i + 0.5) } //垂直线 for (let i = 1; i < 20; i++) { tools.moveTo(30 * i + 0.5, 0) tools.lineTo(30 * i + 0.5, 600) } tools.strokeStyle = 'white' tools.stroke() if (snake[0].x * 30 === x && snake[0].y * 30 === y) { //蛇头位置和食物位置重合了，这时候不用snake.pop()，相当于蛇的长度增加了 isEated = true; } else { isEated = false; snake.pop() } var oldHead = snake[0] var newHead = { x: oldHead.x + directionX, y: oldHead.y + directionY, } //游戏结束的判定 if (newHead.x < 0 || newHead.x > 19 || newHead.y < 0 || newHead.y > 19) { isGameOver = true } else { snake.unshift(newHead) //绘制蛇 for (let i = 0; i < snake.length; i++) { if (i === 0) { // 蛇头 tools.fillStyle = '#ff0033' } else { //蛇身 tools.fillStyle = '#333399' } tools.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30) } tools.fill() } }, 1000 / 3)

2. 怎么绘制贪吃蛇吃的食物的随机位置，这里是利用Math.random()产生的随机数，再加上一些参数,用来确定坐标

// 食物的默认位置 var x = Math.floor(Math.random() * 20) * 30 var y = Math.floor(Math.random() * 20) * 30

3. 怎么绘制新的贪吃蛇，就是利用pop()将旧的贪吃蛇的最后一节去除，然后利用unshift()添加新的头部

//蛇的默认位置 var snake = [{ x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }] if (snake[0].x * 30 === x && snake[0].y * 30 === y) { //蛇头位置和食物位置重合了，这时候不用snake.pop()，相当于蛇的长度增加了 isEated = true; } else { isEated = false; snake.pop() } var oldHead = snake[0] var newHead = { x: oldHead.x + directionX, y: oldHead.y + directionY, }

4. 怎么通过键盘的上下左右键控制贪吃蛇的移动呢，利用dom的监听函数

//监听键盘按下的行为 document.addEventListener('keydown', (event) => { // console.log('当前按下的值是', event.keyCode) //上：38 //下：40 //左: 37 //右：39 if (event.keyCode === 37) { directionX = -1; directionY = 0; } else if (event.keyCode === 38) { directionX = 0; directionY = -1; } else if (event.keyCode === 39) { directionX = 1; directionY = 0; } else if (event.keyCode === 40) { directionX = 0; directionY = 1; } })

可能我的表达能力可能有所欠缺，或者大家想自己对着视频学习，推荐这个视频

最新回复(0)