使用canvas实现简单的贪吃蛇游戏，html+css+js
yund56 2025-07-01 01:21 1 浏览
一.话不多，先瞅效果：
又在别的地方嫖到了这个效果研究了亿下下，制作过程如下（超详细）：
二.实现过程（源码在最后）：
1.定义canvas标签：
<canvas id="canvas"></canvas>
2.基本css样式：
#canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 10px rgb(150, 150, 150);
}
position: absolute; 绝对定位。
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中。
box-shadow: 0 0 10px rgb(150, 150, 150); 阴影。
3.开始js部分，获取标签：
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
4.定义基本变量：
//画布宽
var wide=600;
//画布高
var high=600;
// 变量，判断一次渲染中只识别按键一次
var kd = 0;
//当前分数
var fraction =0;
//速度，就是执行定时器的时间参数
var speed = 250;
// 蛇的初始颜色 红色
var yanse = `red`;
// 蛇数组，组成蛇的每一个方块
var snake = [];
// 食物数组
var food = {};
// 蛇的移动方向，x轴：1为向右，-1为向左；y轴：1为向下，-1为向上 。不能斜着走，所以0为某轴无方向。
var diretion = {
x:-1,
y:0
}
// 给画布宽高赋值 打算画一个长宽都是30个20px的方块画布
canvas.width = wide;
canvas.height = high;
5. 初始化：
function chushi(){
//蛇初始长度为3个方块，位置如下（这个随意）
for(let i =0;i<3;i++){
snake.push({
x: i+10,
y: 10
})
}
// 给食物一个随机位置和随机颜色
food = {
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
}
6. 绘制图形：
// 绘制图形
function draw(){
// 绘制显示当前分数的文字
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font="50px 仿宋";
ctx.textAlign = 'center';
ctx.fillText("你的分数为："+fraction+" 分",300,300);
// 绘制方格，长宽都是30个，都是19px*19px的方格
for(let i=0;i<30;i++){
for(let j=0;j<30;j++){
ctx.fillStyle = 'rgba(255, 255, 255,.3)';
ctx.fillRect(i*20,j*20,19,19);
}
}
// 绘制蛇
for(let i=0;i<snake.length;i++){
temp = snake[i];
ctx.fillStyle = yanse;
ctx.fillRect(temp.x*20,temp.y*20,19,19);
// 判断蛇头（第一个方块）是否与身体某个方块重合 ，就是头撞到身体
if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
// 游戏结束，重新给初始化
alert('游戏结束~点击确认再来一次~');
fraction = 0;
snake.length=0;
chushi();
}
}
// 绘制食物，绘制一个圆形
ctx.beginPath();
ctx.fillStyle = food.color;
ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
// 给蛇头绘制一个字符，☆ ，好区分头尾 ，也可省略
ctx.fillStyle = 'yellow';
ctx.font="15px 仿宋";
ctx.textAlign = "start";
ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);
}
7.更新位置：
//更新
function update(){
// 建一个对象head，这个为蛇的新头，通过绘制新头，去掉尾部实现移动效果
var head = {};
//判断蛇头是否遇到边界，到边界则在另一边重新绘制 x轴
switch (snake[0].x+diretion.x){
case -1: head.x=29;break;
case 30: head.x=0;break;
// 没到边界则为当前位置加方向
default: head.x = snake[0].x+diretion.x;
}
//判断蛇头是否遇到边界，到边界则在另一边重新绘制 y轴
switch (snake[0].y+diretion.y){
case -1: head.y=29;break;
case 30: head.y=0;break;
// 没到边界则为当前位置加方向
default: head.y = snake[0].y+diretion.y;
}
// 判断新蛇头是否与食物重合，就是吃到食物
if(head.x==food.x&&head.y==food.y){
//蛇的颜色为吃到食物的颜色
yanse = food.color;
// 重新给食物初始化
food = {
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
//在蛇尾添加一节
let temp = snake[length-1];
snake.push(temp);
fraction+=1;
// 吃完食物速度加快
if(speed>80){
//定时器间隔减10
speed = speed-10;
// 清除原来定时器，重新绘制
clearInterval(time);
time = setInterval(function () {
kd = 0;
ctx.clearRect(0, 0, wide, high);
update();
draw();
}, speed);
}
}
//添加新头
snake.splice(0,0,head);
//去掉尾部
snake.pop();
}
8.判断点击键盘事件：
//判断点击事件
document.addEventListener('keydown', event=>{
switch (event.keyCode){
// 按了向上键
case 38:
// 判断当前不是向下移动与还没按过键，否则蛇会重叠
if(diretion.y!=1&&kd==0){
// 重新给移动方向赋值
diretion.x=0;
diretion.y=-1;
kd=1;
}
break;
// 下面以此类推一样的原理
case 39:
if(diretion.x!=-1&&kd==0){
diretion.x=1;
diretion.y=0;
kd=1;
}
break;
case 40:
if(diretion.y!=-1&&kd==0){
diretion.x=0;
diretion.y=1;
kd=1;
}
break;
case 37:
if(diretion.x!=1&&kd==0){
diretion.x=-1;
diretion.y=0;
kd=1;
}
break;
}
})
9.设置定时器，开始动画：
chushi();
var time = setInterval(function(){
kd=0;
ctx.clearRect(0,0,wide,high);
update();
draw();
},speed);
三.完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
}
video{
position: fixed;
z-index: -10;
width: 100%;
height: 100%;
object-fit: cover;
}
#canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 10px rgb(150, 150, 150);
}
</style>
</head>
<body>
<video src="video/rain.mp4" muted autoplay loop></video>
<canvas id="canvas"></canvas>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
//画布宽
var wide=600;
//画布高
var high=600;
// 变量，判断一次渲染中只识别按键一次
var kd = 0;
//当前分数
var fraction =0;
//速度，就是执行定时器的时间参数
var speed = 250;
// 蛇的初始颜色 红色
var yanse = `red`;
// 蛇数组，组成蛇的每一个方块
var snake = [];
// 食物数组
var food = {};
// 蛇的移动方向，x轴：1为向右，-1为向左；y轴：1为向下，-1为向上 。不能斜着走，所以0为某轴无方向。
var diretion = {
x:-1,
y:0
}
// 给画布宽高赋值 打算画一个长宽都是30个20px的方块画布
canvas.width = wide;
canvas.height = high;
function chushi(){
//蛇初始长度为3个方块，每个位置如下（这个随意）
for(let i =0;i<3;i++){
snake.push({
x: i+10,
y: 10
})
}
// 给食物一个随机位置和随机颜色
food = {
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
}
// 绘制图形
function draw(){
// 绘制显示当前分数的文字
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font="50px 仿宋";
ctx.textAlign = 'center';
ctx.fillText("你的分数为："+fraction+" 分",300,300);
// 绘制方格，长宽都是30个，都是19px*19px的方格
for(let i=0;i<30;i++){
for(let j=0;j<30;j++){
ctx.fillStyle = 'rgba(255, 255, 255,.3)';
ctx.fillRect(i*20,j*20,19,19);
}
}
// 绘制蛇
for(let i=0;i<snake.length;i++){
temp = snake[i];
ctx.fillStyle = yanse;
ctx.fillRect(temp.x*20,temp.y*20,19,19);
// 判断蛇头（第一个方块）是否与身体某个方块重合 ，就是头撞到身体
if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
// 游戏结束，重新给初始化
alert('游戏结束~点击确认再来一次~');
fraction = 0;
snake.length=0;
chushi();
}
}
// 绘制食物，绘制一个圆形
ctx.beginPath();
ctx.fillStyle = food.color;
ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
/* var img = new Image();
img.src = "img/snake/orange.png";
img.onload = function(){
ctx.drawImage(img,food.x*20,food.y*20,19,19);
} */
// 给蛇头绘制一个字符，☆ ，好区分头尾 ，也可省略
ctx.fillStyle = 'yellow';
ctx.font="15px 仿宋";
ctx.textAlign = "start";
ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);
}
//更新
function update(){
// 建一个对象head，这个为蛇的新头，通过绘制新头，去掉尾部实现移动效果
var head = {};
//判断蛇头是否遇到边界，到边界则在另一边重新绘制 x轴
switch (snake[0].x+diretion.x){
case -1: head.x=29;break;
case 30: head.x=0;break;
// 没到边界则为当前位置加方向
default: head.x = snake[0].x+diretion.x;
}
//判断蛇头是否遇到边界，到边界则在另一边重新绘制 y轴
switch (snake[0].y+diretion.y){
case -1: head.y=29;break;
case 30: head.y=0;break;
// 没到边界则为当前位置加方向
default: head.y = snake[0].y+diretion.y;
}
// 判断新蛇头是否与食物重合，就是吃到食物
if(head.x==food.x&&head.y==food.y){
//蛇的颜色为吃到食物的颜色
yanse = food.color;
// 重新给食物初始化
food = {
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
//在蛇尾添加一节
let temp = snake[length-1];
snake.push(temp);
fraction+=1;
// 吃完食物速度加快
if(speed>80){
//定时器间隔减10
speed = speed-10;
// 清除原来定时器，重新绘制
clearInterval(time);
time = setInterval(function () {
kd = 0;
ctx.clearRect(0, 0, wide, high);
update();
draw();
}, speed);
}
}
//添加新头
snake.splice(0,0,head);
//去掉尾部
snake.pop();
}
//判断点击事件
document.addEventListener('keydown', event=>{
switch (event.keyCode){
// 按了向上键
case 38:
// 判断当前不是向下移动与还没按过键，否则蛇会重叠
if(diretion.y!=1&&kd==0){
// 重新给移动方向赋值
diretion.x=0;
diretion.y=-1;
kd=1;
}
break;
// 下面以此类推一样的原理
case 39:
if(diretion.x!=-1&&kd==0){
diretion.x=1;
diretion.y=0;
kd=1;
}
break;
case 40:
if(diretion.y!=-1&&kd==0){
diretion.x=0;
diretion.y=1;
kd=1;
}
break;
case 37:
if(diretion.x!=1&&kd==0){
diretion.x=-1;
diretion.y=0;
kd=1;
}
break;
}
})
chushi();
var time = setInterval(function(){
kd=0;
ctx.clearRect(0,0,wide,high);
update();
draw();
},speed);
</script>
</body>
</html>相关推荐
- 豆包编程能力升级:支持HTML代码实时预览、交互
-
IT之家3月19日消息，IT之家从豆包官方获悉，豆包宣布AI编程功能迎来三项升级，包括HTML预览、Python运行、生成完整项目。据介绍，目前豆包支持HTML代码实时预览和交互...
- 1898款游戏!80、90回忆杀，重温旧梦，快速搭建中文DOS游戏服务
-
本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：羊刀仙大家好，我是羊刀仙。本期来介绍一个特别情怀向的游戏项目：chinese-dos-games。这套包含1898款经典中文DOS游戏的合集...
- 利用 SVG 文件内的 HTML 代码进行网络钓鱼攻击
-
随着时间的推移，网络钓鱼攻击的技术越来越精妙，旨在欺骗用户并规避安全措施。攻击者会使用欺骗性的URL重定向策略，例如将恶意网站地址附加到看似安全的链接后，在PDF中嵌入链接，以及发送HTML...
- aardio + AI 大模型自动编写 Python 代码、网页前端代码的经验与技巧
-
在AI时代，老式的编程习惯完全被颠覆。原来可能要一大堆插件或工具辛苦堆出来的程序，现在只要把AI调教好了就行。aardio支持调用十几种编程语言，这很适合发挥AI大模型的优势。对于AI...
- 用AI制作游戏就是如此简单!
-
很多人不知道如何利用AI提高效率，不知道AI能帮我们做什么，其实可以让我们实现很多自己根本不懂的领域取得直观体验，比如利用DS或者豆包，输入“我想做一个简单的单机俄罗斯方块游戏”，AI会给出phtho...
- 不会写代码?教你用DeepSeek 三步做出小游戏
-
如今，借助人工智能技术，哪怕你完全看不懂代码，也能通过DeepSeek制作出属于自己的网页版大鱼吃小鱼游戏。接下来，就为大家详细介绍制作过程。第一步、向DeepSeek描述需求为何要做网页版的...
- 《暗黑1》被移植成网页游戏 可在浏览器上玩了
-
《暗黑1》，这款1996年发售的“鼠标杀手”砍杀游戏，现在可以在浏览器上玩了。国外专注暴雪游戏的Rivsoft分享了一个《暗黑1》的共享版本，该版本只包含地下城的头2个地区和三个角色职业中的一个。不...
- 网页代码过滤 轻松获取专辑目录
-
通过过滤网页代码，可以将网页上显示不全的长文件名列表完整地提取出来。我有一个含有75个视频文件的《中医诊断学》课件，文件名是以01.RMVB、02.RMVB……75.RMVB这种格式命名的。我希望能找...
- IDEA 2021首个大版本发布，Java开发者感动哭了(附新亮点演示)
-
工欲善其事，必先利其器！就在不久之前，Java领域的开发神器IntelliJIDEA终于迎来2021年的一个重要的大版本更新：IntelliJIDEA2021.1。现如今大量的Java开发者深度...
- View Source:在 iOS 上轻松查看网页源代码
-
在移动互联网时代，移动端的应用和web体验都尤为重要，在PC上有很多web前端工具可以选择，而在移动端貌似就少之又少了，在NEXT出现的ViewSource能帮你在iOS上查看...
- 当我们《寻找房祖名》，我们能找到什么?
-
游戏葡萄原创专稿，未经允许请勿转载柯震东，因为在九把刀电影《那些年我们追过的女孩》中饰演男主角柯景腾而走红的台湾影星，在昨天被爆出了和著名演员成龙之子房祖名吸毒被抓的丑闻，一时间相关讨论席卷社交网络。...
- 多用途游戏娱乐新闻网站HTML5模板
-
Retnews是一个响应式的HTML新闻,博客,杂志网站模板,可以使用这套前端模板简约很多设计的工作。模板有许多特性适合流行的主题商业、时尚,游戏,娱乐,生活方式、体育、科技、政治、旅行、天气、视频等...
- 简约好看的个人引导页HTML源码下载
-
源码介绍一款非常简约好看的个人引导页HTML源码，非常适合个人主页以及个人导航使用，纯HTML不需要数据库，上传服务器即可使用!...
- 教你如何在微信公共平台上插入小游戏(图文教程)
-
很多玩微信公共平台的朋友都想在公共平台上面插入几个小游戏，用来跟用户之间互动，这里花生来分享一下如何在微信公共平台上插入游戏，以及如何制作html5微信小游戏。首先是找游戏，总共有三个方法，本人比较倾...
- html5重力感应剖析附源码
-
下面是测试html5重力感应的demohttp://bbs.qietu.com/html/zhongli/http://www.qietu.com/html/f2/qqqianbao/demo2是切图...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)
- 图片素材 (36)