六一礼物之贪吃蛇小游戏送给大家
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了六一礼物之贪吃蛇小游戏送给大家相关的知识，希望对你有一定的参考价值。
今天是儿童节，思绪突然一下拉回到小时候，几块钱一个的游戏机不知道大家还记得不，里面有个记忆犹新的经典游戏——贪吃蛇，这真是在那个年代少有的，而且是你不死可以一直玩的游戏（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:68
var keyCode = e.keyCode;
console.log(keyCode)
switch(keyCode)
// 按w
case 87:
s.direction = "up";
break;
// 按s
case 83:
s.direction = "down";
break;
// 按a
case 65:
s.direction = "left";
break;
// 按d
case 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>
以上是关于六一礼物之贪吃蛇小游戏送给大家的主要内容，如果未能解决你的问题，请参考以下文章