这个例子为大家分享js贪吃蛇游戏相关代码，供大家参考，具体内容如下








贪吃蛇游戏

*边距：0；填充：0；}
标题{
显示块；
保证金：0汽车；
宽度：500px；
文本对齐：中心；
}
标题h1 {
Arial字体；
字体粗细：粗体；
}
头# newgamebutton {
显示块；
保证金：20px汽车；
宽度：100px；
填料：10px 10px；
背景颜色：# 8f7a66；
Arial字体；
颜色：白色；
边界半径：10px；
文字装饰：无；
}
标题：# newgamebutton悬停{
背景颜色：# 9f8b77；
}
头P {
Arial字体；
字体大小：25px；
保证金：20px汽车；
}
帆布{
显示块；
边框：中双黑色；
保证金：4px汽车；
}




贪吃蛇游戏
新的游戏
得分：0


您的浏览器不支持画布元素。


Var CANVAS = document.getElementById (canvas);
VaR CTX = canvas.getcontext（2D）；
var =新的（数组）；
var；用于控制方向。
var大小= 20； /主体宽度
无功foodx = 0； / /的X坐标的食物
VaR Foody = 0； / / Y坐标的食物
无功headx = 0；这条蛇 / / X坐标
var = 0；蛇的坐标
VaR最大= 200； / /画布的高度
VaR最大高度= 200； / /画布的宽度
var时间= 400； /蛇的速度
var得分= 0；游戏玩家得分计算
var间隔= null；

canvas.width =最大；
canvas.height =最大高度；

在window.onload =函数（）{
新游戏（）；
}；
document.getelementbyid（newgamebutton）。Click（function（）{）
新游戏（）；
}）；
功能的新游戏（）{
贪吃蛇；
；用于控制方向。
headx = 0；这条蛇 / / X坐标
令人兴奋的= 0；蛇的坐标
得分= 0；
window.clearinterval（间隔）；
区间=空；
初始化画布
ctx.clearrect（0, 0，最大，最大高度）；
画蛇
DrawSnake ();
地点/食物
SetFood（）；
移动/蛇
区间= window.setinterval（移动、时间）；

}
函数移动（）{
开关（目录）{
案例起来：令人兴奋的= heady-size；打破；
案例右：headx = headx +大小；打破；
案例下：令人兴奋的=令人兴奋的+大小的；破碎的；
案例左：headx = headx-size；打破；
}
如果（headx > maxwidth-size兴奋> maxheight-size headx＜0 | | | | | |醉人的< 0）{
警告（你的分数是：++ +点，继续努力工作！失败的原因：撞到墙上……；
Window.location.reload（）；
}
对于（var i = 1；i < snake.length；i++）{
如果（蛇{ 0 } =蛇{ { 0 } { 0 } }毒蛇{ { 1 } =蛇{ 0 } { 1 }）{
警告（你的分数是：++ +点，继续努力工作！失败的原因：打你自己…；
Window.location.reload（）；
}
}
如果（snake.length = =最大*最大高度）{
警报（）！；
Window.location.reload（）；
}
在（headx，风头正劲的）； / /移动
}
document.onkeydown =功能（e）{ / /改变蛇的方向
无功能代码= 37；
开关（代码）{
案例1：目录；中断；
案例2：目录；右；中断；
案例3：目录
案例0：左；破；左/左
}
}
/ / =============================画蛇=======================================================
功能drawsnake（）{
ctx.fillstyle =黑；
绘制/头
ctx.fillrect（headx，风头正劲，尺寸，大小）；
SNAKE.push（{ headx，风头正劲的}）；

绘制/蛇
开关（目录）{
：
放出体（headx，风头正劲的+大小，headx，风头正劲的+ 2 *尺寸）；
打破；
案例右：
（headx放出体大小，风头正劲，headx - 2 *大小，兴奋的）；
打破；
：
放出体（headx，风头正劲的大小，headx，兴奋- 2 *尺寸）；
打破；
案例左：
放出体（headx +规模，风头正劲，headx + 2 *大小，兴奋的）；
打破；
}
}
功能（X1，Y1放出体，x2，y2）{
ctx.fillrect（X1，Y1，尺寸，大小）；
ctx.fillrect（X2，Y2，尺寸，大小）；
SNAKE.push（{ x1，y1 }）；
SNAKE.push（{ x2，y2 }）；
}
/ / ===========================放置食品==============================
功能setfood（）{
做{
foodx =面积* Math.floor（Math.random（）*最大 /尺寸）；
Foody =规模* Math.floor（Math.random（）*最大高度/尺寸）；
}而（foodinsnake（））；
ctx.fillstyle =红色；
ctx.fillrect（foodx，富迪，尺寸，大小）；
}
功能foodinsnake（）{
对于（var i = 0；i < snake.length；i++）{
如果（foodx = =蛇{我} { 0 } Foody = =蛇{我} { 1 }）{
返回true；
}
}
返回false；
}
/ / ========================================移动一===========================
函数（x，y）{移动
ctx.fillstyle =黑；
ctx.fillrect（X，Y，尺寸大小）； / /重绘的头
新的头添加到蛇形数组中
无功newsnake = { { x，y } }；
蛇= newsnake.concat（蛇）；

如果（假）=吃（{ / /）如果不吃食物，减少尾
var = snake.pop（snaketail / /）；获得一个位置
ctx.clearrect（snaketail { 0 }，snaketail { 1 }，大小、尺寸）； / /甩掉尾巴
}
}
功能的食物（）{
如果（headx = = foodx兴奋= = Foody）{
ctx.fillstyle =块；
ctx.fillrect（foodx，富迪，尺寸，大小）；

SetFood（）；
分数+；
/ / $（#得分）文本（评分）；
document.getelementbyid（得分）.innerHTML =得分；
返回true；
}
返回false；
}






设计素描 uff1a


思想:




功能的新游戏（）{
重置蛇和分数的数据；
清除间隔；
初始化画布；
画蛇；
将食物；
使用定时器（setInterval）把蛇（移动功能）；
}
函数移动（）{
根据下面的变化方向蛇头将到达的位置；
确定比赛是否结束，以及比赛结束的原因（包括胜利或胜利）；
蛇移动一个格（运动功能）；
}
键盘的方向键被监控。当方向改变时，全局变量目录的值被修改（用于存储方向）。
函数在（）{
在蛇的样式之前增加作为新的头部，和头部坐标作为第一个元素被添加到数组中代表蛇在；
如果（不吃食物）{
删除尾巴，在画布上改变；
}
}



需要注意的是，如果您需要在JS中设置画布的宽度和高度，它与其他CSS属性略有不同。

canvas.width = maxwidth；canvas.height =最大高度；

萧边还为您准备了一个精彩的主题：javaｓｃｒｉｐｔ经典游戏摘要

以上是本文的全部内容，希望能帮助大家学习javaｓｃｒｉｐｔ程序设计。