先上效果图：
点击这里试玩
使用html5创建一个canvas画布，使画面可以被操作，相当于是给画面的一个容器。
html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #canvas { 8 border: thin solid blue; 9 } 10 </style> 11 </head> 12 13 <body> 14 <center> 15 <p id="message"></p> 16 <canvas id="canvas" width="900" height="1500"></canvas> 17 </center> 18 </body> 19 <script src="1.js" ></script> 20 </html>
上面的文件在body标签内写了一个p标签，用来显示坐标信息，还有一个canvas标签 用来显示画面。
在第19行的Script标签里面用src属性引用了一个js文件，这个js文件就是用来控制游戏逻辑的。
贪吃蛇是身体和头部，简化用圆来表示。在html5中的canvas里自带了路径绘制。
用它自带的方法来绘制圆形形状，稍微封装一下方便调用，封装成如下函数形状。
1 function context_Write(colour="#FF0000",X=X,Y=Y,R=R){ 2 context.beginPath() 3 context.fillStyle=colour; 4 context.arc(X,Y,R,0,360); 5 context.fill() 6 context.closePath() 7 context.strokeStyle="black"; 8 context.stroke(); 9 }
上面的函数用来绘制圆形，其中有4个参数。第一个是颜色，第二个和第三个是坐标，第四个是半径
用上面的4个参数可以确定一个圆，和它的形状。
使用html5的canvas画布和JavaScript做一个贪吃蛇大作战
原文：https://www.cnblogs.com/ksxh/p/13169129.html