今天是儿童节，思绪突然一下拉回到小时候，几块钱一个的游戏机不知道大家还记得不，里面有个记忆犹新的经典游戏——贪吃蛇，这真是在那个年代少有的，而且是你不死可以一直玩的游戏（haha）。
本文就带领大家来简单使用canvas复现一下我们的童年——贪吃蛇小游戏~
不知道能不能勾起你的曾经~
实现效果：
canvas小创作 之 实现贪吃蛇小游戏
- 地图上每两秒随机生成一个食物，最大食物个数为十个；
- 可以通过键盘wasd操控贪吃蛇上左下右移动；
- 碰到食物则食物消失同时贪吃蛇变长。
每篇前言：
作者介绍：【孤寒者】—全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、原力计划作者 |
- 本文已收录于前端系列教程专栏：《前端系列教程》
- 热门专栏推荐：《Django框架从入门到实战》、《爬虫从入门到精通系列教程》、《爬虫高级》、《前端系列教程》、《tornado一条龙+一个完整版项目》。
- 本专栏面向广大程序猿，为的是大家都做到Python从入门到精通，同时穿插有很多很多习题，巩固学习。
- 加入我一起学习进步，一个人可以走的很快，一群人才能走的更远！
源码：
<!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,){
if(block1.row == block2.row && block1.col == block2.col){
return true;
}else{
return false;
}
}</script>
</html>
