六一礼物之贪吃蛇小游戏送给大家
今天是儿童节，思绪突然一下拉回到小时候，几块钱一个的游戏机不知道大家还记得不，里面有个记忆犹新的经典游戏——贪吃蛇，这真是在那个年代少有的，而且是你不死可以一直玩的游戏（haha）。
本文就带领大家来简单使用canvas复现一下我们的童年——贪吃蛇小游戏~
不知道能不能勾起你的曾经~
实现效果：
canvas小创作 之 实现贪吃蛇小游戏
- 地图上每两秒随机生成一个食物，最大食物个数为十个；
- 可以通过键盘wasd操控贪吃蛇上左下右移动；
- 碰到食物则食物消失同时贪吃蛇变长。
每篇前言：
🏆🏆作者介绍：【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者
- 🔥🔥本文已收录于前端系列教程专栏：《前端系列教程》
- 🔥🔥热门专栏推荐：《Django框架从入门到实战》、《爬虫从入门到精通系列教程》、《爬虫高级》、《前端系列教程》、《tornado一条龙+一个完整版项目》。
- 📝📝本专栏面向广大程序猿，为的是大家都做到Python从入门到精通，同时穿插有很多很多习题，巩固学习。
- 🎉🎉订阅专栏后可私聊进一千多人Python全栈交流群（手把手教学，问题解答）； 进群可领取Python全栈教程视频 + 多得数不过来的计算机书籍：基础、Web、爬虫、数据分析、可视化、机器学习、深度学习、人工智能、算法、面试题等。
- 🚀🚀加入我一起学习进步，一个人可以走的很快，一群人才能走的更远！
源码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>贪吃蛇</title><style type="text/css">#c{border: 1px solid red;}</style></head><body><canvas id="c" width="1200" height="680"></canvas></body><script type="text/javascript">var c = document.getElementById("c");var ctx = c.getContext("2d");// size用于表示每个小方格的尺寸var size = 20;// 计算画布最大行数，最大列数var maxRow = c.height / size;var maxCol = c.width / size;function randomNum(min,max){var num = Math.floor(Math.random()*(max-min+1)) + min;return num;}function randomColor(){var r = randomNum(0,255);var g = randomNum(0,255);var b = randomNum(0,255);var color = "rgb("+r+","+g+","+b+")";return color;}// 定义一个小方块类function Block(row,col,color){this.row = row;this.col = col;this.w = size;this.h = size;this.color = color;this.draw = function(){ctx.beginPath();ctx.fillStyle = this.color;ctx.strokeStyle = "chartreuse";var x = this.col * size;var y = this.row * size;ctx.fillRect(x,y,this.w,this.h);ctx.strokeRect(x,y,this.w,this.h);}}// 定义一个蛇类function Snake(){// 生成蛇的身体加头this.body = [new Block(maxRow/2,20,"red"),new Block(maxRow/2,19,"gray"),new Block(maxRow/2,18,"gray"),new Block(maxRow/2,17,"gray")];// 蛇移动的方向this.direction = "right"; // 默认方向是右// 绘制蛇的身体加头this.draw = function(){for(var i = 0; i < this.body.length; i++){this.body[i].draw();};};// 蛇的移动————蛇身移动+蛇头移动this.move = function(){// 在修改蛇身位置之前，先记录一下蛇尾的行号和列号var row = this.body[this.body.length-1].row;var col = this.body[this.body.length-1].col;// 修改蛇身的位置，从蛇尾开始往前修改，不修改蛇头for(var i = this.body.length - 1; i > 0; i--){this.body[i].row = this.body[i-1].row;this.body[i].col = this.body[i-1].col;};// 修改蛇头switch(this.direction){case "right":{this.body[0].col += 1;break;}case "left":{this.body[0].col -= 1;break;}case "up":{this.body[0].row -= 1;break;}case "down":{this.body[0].row += 1;break;}};// 判断蛇头是否与食物(每一个)相交for(var i = 0; i < foodArr.length; i++){// 通过下标找到食物var food = foodArr[i];if(interect(this.body[0],food) == true){// 让食物从食物数组中移除foodArr.splice(i,1);// 给蛇的身子加一段var b = new Block(row,col,"gray");this.body.push(b);}}};};// 创建一条蛇var s = new Snake();var count = 0; // 计数器// 定义一个存放食物的数组var foodArr = [];start(); // 开始// 开始游戏的函数function start(){count++;// 通过循环控制使得蛇移动的速度变慢if(count == 10){// 清空画布ctx.clearRect(0,0,1200,680);// 绘制食物for(var i = 0;i < foodArr.length;i++){foodArr[i].draw();}// 蛇移动s.move();// 绘制蛇s.draw();count = 0;}requestAnimationFrame(start);}// 给窗口（网页）添加一个按键按下的事件window.onkeydown = function(e){// 每个按键都有一个编号，我们拿到当前按键的编号// w:87, s:83, a:65, d:68var keyCode = e.keyCode;console.log(keyCode)switch(keyCode){// 按wcase 87:{s.direction = "up";break;}// 按scase 83:{s.direction = "down";break;}// 按acase 65:{s.direction = "left";break;}// 按dcase 68:{s.direction = "right";break;}}}// 定时执行一个任务（函数），这个任务会重复执行// 按规定时间间隔执行（ms）setInterval(function(){if(foodArr.length < 10){// 画布上随机生成食物// 随机一个行号var row = randomNum(0,maxRow);// 随机一个列号var col = randomNum(0,maxCol);// 随机一个颜色var color = randomColor();var food = new Block(row,col,color);// 把food放到数组中,放到数组的末尾foodArr.push(food);}},2000);// 判断两个block是否相交function interect(block1, block2){if(block1.row == block2.row && block1.col == block2.col){return true;}else{return false;}}</script></html>
