canvas网页版贪吃蛇（完整教程）

最新推荐文章于 2024-07-30 10:31:44 发布

_Nana_

最新推荐文章于 2024-07-30 10:31:44 发布

阅读量2.1k

点赞数

分类专栏： canvas 小游戏文章标签： canvas 贪吃蛇小游戏

本文链接：https://blog.csdn.net/Nana_9457/article/details/86570234

版权

本文介绍如何利用canvas实现一个网页版的贪吃蛇游戏，包括创建canvas环境、绘制方块、设置计时器、处理键盘事件、设置撞墙逻辑、将蛇转换为列表以及处理转弯和加入食物的细节。适合初学者学习canvas和游戏开发。

摘要由CSDN通过智能技术生成

源码见github: https://github.com/NanaYang007/Canvas__DoodleSnake
喜欢请给个star，谢谢～

一起来实现一个贪吃蛇吧～

0. 创建canvas获取绘制环境

首先在网页中引入canvas标签，注意有些浏览器不支持canvas，可以给出提示。

<html>
  <meta charset="utf8">
  <style>
	  body {
    
		  background-color: black;
	  }
	  canvas {
    
		  background-color: white;
	  }
  </style>
<body>
	<canvas id="mySnake" width="400" height="300">
		<span>该浏览器不支持canvas</span>
	</canvas>
	<script>
		var cv = document.getElementById("mysnake");
		var ctx = cv.getContext("2d");
	</script>
</body>
</html>

1. 绘制方块

// 小方块的大小设置为常量，便于修改
const STEP = 10;
// 四个参数分别为（距canvas左边缘距离、距上边缘距离、矩形宽、矩形高）
ctx.fillRect(10, 10, STEP, STEP);

2. 计时器

贪吃蛇作为一个动态游戏，需要一个定时器
⚠️设置高度时不能使用var top = 0，top是window上的一个对象，会出现canvas不显示动态方块的bug（控制台无报错）

var blockLeft = STEP;
// 变量名不能设置为“top”
var blockTop = STEP;
var stepLength = STEP;
setInterval(function(){
   
	// 每次重画前需要清画布
	ctx.clearRect(cv.offsetLeft

最低0.47元/天解锁文章

_Nana_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas网页版贪吃蛇（完整教程）

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/Nana_9457/article/details/86570234一起来实现一个贪吃蛇吧～源码见github: https://github.com/NanaYang007/Canvas__DoodleSnake喜欢请给个star，谢谢～0. 创建canvas获取绘制环境...
复制链接

扫一扫

专栏目录