介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title> Document
& lt; style>
超文本标记语言
身体{
显示:flex;
对齐项目:中心;
justify-content:中心;
高度:100%;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;画布的宽度=?00”;身高=?00”;在给我换chromium
& lt; script>
const地图=document.getElementsByTagName(& # 39;帆布# 39;)[0].getContext (& # 39; 2 d # 39;);//数组存蛇身位置一行1 -二行意向总共20 * 20
蛇var=[21] 23日22日;//数组头部蛇头后部蛇尾
var方向=1;//1右左-20上20下
var标志=1;//解决快速键盘bug
var食品=50;//食物位置
函数绘制(x,颜色){
地图。fillStyle=颜色;//用1 - 400标识没找到通用像素换算公式最后一列分开计算
如果(x % 20==0){//最后一列
地图。fillRect(380 + 2,数学。地板(x/21) * 20 + 2, 18岁,18岁);//使1 - 400的块标志对应像素点
其他}{//其余列
地图。fillRect ((x % 20 - 1) * 20 + 2,数学。地板(x/20) * 20 + 2, 18岁,18岁);
}
标志=1;//画()完后才能改变方向
}
让len=snake.length;
(让我=0;我& lt;兰;我+ +)
画(蛇[我],“# FDE5C5");
(函数(){
让头=蛇[0]+方向;
如果(% 20==1,,方向==1 | | % 20头==0,,方向==1 | |头& lt;1 | |头比;400 | |
snake.includes(头)
返回警告(& # 39;gg # 39;);
snake.unshift(头);
画(头,“# FDE5C5");
如果(头==食品){
而(蛇。包括(食品=Math.floor (math . random () * 400 + 1)));//加勒比海盗。包括有的话返回真否则假
其他}{//正常移动没吃到才改变尾部颜色
画(snake.pop (),“# 362 e3d");
}
画(食品、“# EB1A4B");
setTimeout(参数。被,100);//参数。被代表函数名调用匿名函数自己
}) ();
文档。onkeydown=函数(事件){
事件=事件| | window.event;//ie中是windo.event
如果(国旗){//画执行后(蛇移动后)才可以改变方向
开关(event.keyCode) {
例37:
方向!=1,# 63;方向=1:0;
打破;
例38:
方向!=20,# 63;方向=-20:0;
打破;
例39:
方向!=1,# 63;方向=1:0;
打破;
例40:
方向!=-20,# 63;方向=20:0;
打破;
}
}
国旗=0;//等待下一次画执行
}
& lt;/script>
& lt;/body>
& lt;/html>
使用js +帆布制作一个贪吃蛇游戏?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下
<强>思路
400 px * 400 px的地图,每20 px * 20 px分成单元格绘制蛇身
每次移动即更换尾部头部的颜色
全部代码
看完上述内容,你们掌握使用js +帆布制作一个贪吃蛇游戏的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
