本文详细讲解使用 JavaScript 和 Canvas 实现贪吃蛇小游戏的完整思路。内容涵盖初始化画布、蛇身坐标控制、碰撞检测、食物生成及键盘监听等核心逻辑，并附带完整可运行代码，适合前端初学者参考学习。
本文通过 JavaScript 实现贪吃蛇小游戏的思路进行讲解，并提供完整代码供参考，具体内容如下。
效果流程
第一步，我们需要操作 Canvas 元素来绘制游戏画面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>
<body>
<canvas id="canvas"></canvas> <!-- 我们要操作的canvas -->
<input type="button" value="开始游戏" /><!-- 开始游戏按钮 -->
<script>
//获取元素
var canvas = document.getElementById("canvas"); //找到我们要操作的canvas
var context = canvas.getContext("2d"); //规定在canvas上操作的环境为2d
var but = document.getElementsByTagName("input")[0]; //找到开始按钮
</script>第二步，进行初始化设置，包括定义画布尺寸、蛇的初始状态及游戏参数。
canvas.width = 500; //定义canvas宽度
canvas.height = 500; //定义canvas高度
canvas.style.border = "5px solid #000"; //定义canvas边框
var times = 100; //默认时间200毫秒
var long = 10; //蛇身相对于步长的个数
var x = y =8; //蛇的初始坐标
var direction = 3; // 1 上 2 右 3 下 0 左
var size = 8; //蛇每次移动的长度（步长）
var map = []; //用来记录蛇每次移动的坐标
var foodx = 0; //食物的初始X轴坐标
var foody = 0; //食物的初始y轴坐标
var onOff = true;
var foodT = true;
var timer = null;第三步，根据方向控制蛇的坐标变化，判断蛇的坐标是否超出 Canvas 边界，并检测蛇是否碰到自己。
//根据方向控制蛇的坐标变化
switch(direction){
case 1: y = y - size; break; //上
case 2: x = x + size; break; //右
case 3: y = y + size; break; //下
case 0: x = x - size; break; //左
}
//判断蛇的坐标是否超出canvas边界，超出则出现碰壁提示，游戏结束
if(x>500 || x<0 || y>500 || y<0){
// alert("你碰壁挂了！继续努力吧……");
window.location.reload();
}
//判断蛇有没有碰到自己，碰到自己游戏结束
for(var i=0; i<map.length; i++){
if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
// alert("你碰到自己挂了！继续努力吧……");
window.location.reload(); //重新载入
}
}第四步，绘制蛇身，根据移动逻辑更新画面。
//绘制蛇
if(map.length>long){
var cl = map.shift();
context.clearRect(cl['x'],cl['y'],size,size);
}
map.push({'x':x,'y':y});
context.fillStyle = "#777"; //填充蛇的颜色
context.fillRect(x,y,size,size); //绘制蛇第五步，判断食物坐标是否等于蛇头坐标，若相等则视为蛇吃掉食物。
//判断食物坐标等于蛇的坐标时（蛇吃掉食物）
if(foodx*8 == x && foody*8 == y ){
food(); //再次绘制食物
long++; //蛇的长度增加
times = times - 10; //速度加快
clearInterval(timer);
onOff = true;
setTimeout(goto,times); //开始新的一轮
}第六步，确定食物随机显示的坐标，并绘制食物。
//确定食物随机显示坐标，绘制食物
function food(){
foodx = Math.ceil(Math.random()*40); //食物的X轴随机坐标
foody = Math.ceil(Math.random()*40); //食物的Y轴随机坐标
context.fillStyle = "mediumvioletred"; //食物的填充颜色
context.fillRect(foodx*8,foody*8,8,8); //绘制食物
}第七步，监听键盘方向键的按下事件，获取蛇前进的方向。
//监听按下方向键，获得蛇前进的方向
document.onkeydown = function(ev){
var ev = ev || event;
var cod = ev.keyCode - 37;
switch(cod){
case 1: direction = 1; break; //向上
case 2: direction = 2; break; //向右
case 3: direction = 3; break; //向下
case 0: direction = 0; break; //向左
}
}以下是贪吃蛇游戏的完整代码实现。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>
<body>
<canvas id="canvas"></canvas> <!-- 我们要操作的canvas -->
<input type="button" value="开始游戏" /><!-- 开始游戏按钮 -->
<script>
//获取元素
var canvas = document.getElementById("canvas"); //找到我们要操作的canvas
var context = canvas.getContext("2d"); //规定在canvas上操作的环境为2d
var but = document.getElementsByTagName("input")[0]; //找到开始按钮
//初始化
canvas.width = 500; //定义canvas宽度
canvas.height = 500; //定义canvas高度
canvas.style.border = "5px solid #000"; //定义canvas边框
var times = 100; //默认时间200毫秒
var long = 10; //蛇身相对于步长的个数
var x = y =8; //蛇的初始坐标
var direction = 3; // 1 上 2 右 3 下 0 左
var size = 8; //蛇每次移动的长度（步长）
var map = []; //用来记录蛇每次移动的坐标
var foodx = 0; //食物的初始X轴坐标
var foody = 0; //食物的初始y轴坐标
var onOff = true;
var foodT = true;
var timer = null;
function star(){
//根据方向控制蛇的坐标变化
switch(direction){
case 1: y = y - size; break; //上
case 2: x = x + size; break; //右
case 3: y = y + size; break; //下
case 0: x = x - size; break; //左
}
//判断蛇的坐标是否超出canvas边界，超出则出现碰壁提示，游戏结束
if(x>500 || x<0 || y>500 || y<0){
// alert("你碰壁挂了！继续努力吧……");
window.location.reload();
}
//判断蛇有没有碰到自己，碰到自己游戏结束
for(var i=0; i<map.length; i++){
if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
// alert("你碰到自己挂了！继续努力吧……");
window.location.reload(); //重新载入
}
}
//绘制蛇
if(map.length>long){
var cl = map.shift();
context.clearRect(cl['x'],cl['y'],size,size);
}
map.push({'x':x,'y':y});
context.fillStyle = "#777"; //填充蛇的颜色
context.fillRect(x,y,size,size); //绘制蛇
//判断食物坐标等于蛇的坐标时（蛇吃掉食物）
if(foodx*8 == x && foody*8 == y ){
food(); //再次绘制食物
long++; //蛇的长度增加
times = times - 10; //速度加快
clearInterval(timer);
onOff = true;
setTimeout(goto,times); //开始新的一轮
}
}
//确定食物随机显示坐标，绘制食物
function food(){
foodx = Math.ceil(Math.random()*40); //食物的X轴随机坐标
foody = Math.ceil(Math.random()*40); //食物的Y轴随机坐标
context.fillStyle = "mediumvioletred"; //食物的填充颜色
context.fillRect(foodx*8,foody*8,8,8); //绘制食物
}
//开始游戏
function goto(){
if(onOff){
timer = setInterval(star,times);
onOff = false;
}
if(foodT){
food();
foodT = false;
}
}
//点击按钮开始游戏开始
but.onclick = goto;//点击按钮，开始游戏
//监听按下方向键，获得蛇前进的方向
document.onkeydown = function(ev){
var ev = ev || event;
var cod = ev.keyCode - 37;
switch(cod){
case 1: direction = 1; break; //向上
case 2: direction = 2; break; //向右
case 3: direction = 3; break; //向下
case 0: direction = 0; break; //向左
}
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。