在手机或电脑浏览器上玩贪吃蛇

时间：2023-04-03 00:40:40 HTML

贪吃蛇源码地址：https://github.com/jiaoshibo/...手机浏览器上的显示效果先确定贪吃蛇的基本框架snake由一组'ul'标签组成，赋予'ul'一个宽度和高度，这就构成了snake的活动区域。“里”标签构成了蛇的身体和行进路线，以及蛇的食物，用不同的色块来区分。js文件中添加'li'标签，后面会提到。

接下来，设置游戏的难度选项，使用一组“select”标签和三个“选项”选项卡构成了游戏的三个不同难度级别。我们还设置了游戏的得分记录和开始、暂停等按钮。

最高分：0

当前得分：0

简单中等Difficult用于适应移动设备上的各种屏幕分辨率，我们在css中使用媒体查询。@mediascreenand(min-width:320px){html{font-size:100px;}}@mediascreenand(min-width:360px){html{font-size:112px;}}/*以最小宽度为320px为基准*/ul{width:3.18rem;高度：3.18rem；边框：0.01rem实心#8312D5；}li{宽度：0.159rem；高度：0.159rem；float:left;}SnakeframeCompletion将'li'添加到'ul'将创建400'li'作为蛇的场所。使用for循环将'li'添加到'ul'varlis=[];functioninitSpace(){varfrag=document.createDocumentFragment();for(vari=0;i<400;i++){varlidom=document.createElement("li");lidom.innerHTML=i//显示坐标ulBox.appendChild(lidom);}ulBox.appendChild(frag)lis=ulBox.children}下面是效果初始化蛇的位置和蛇的食物varsnake=[{pos:0,color:"#666"},{pos:1,color:"blue"},{pos:2,color:"green"},{pos:3,color:"red"},{pos:4,color:"#82286c"}]varfood={pos:0,color:"red"}初始化snake函数的状态randColor(){return"rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";}functioninitSnake(){for(vari=0;i399&&fangxiang==40){//下边界判断alert("GAMEOVER!!!");位置.重新加载（）；返回假；}elseif(snakeHead<20&&fangxiang==38){//上界判断alert("GAMEOVER!!!");位置.重新加载（）；返回假；}elseif(snakeHead%20==0&&fangxiang==37){//左边界检测alert("GAMEOVER!!!");位置.重新加载（）；返回假；}//自碰撞检测for(vari=0,l=snake.length;iscore){localStorage.setItem("score",l-5);}设置游戏难度。使用'option'的值来控制游戏的难度easymediumdifficult初始速度为500varspeed=500;按开始按钮启动计时器，蛇可以自动前进。vartimer=nullstart.onclick=function(){//开始游戏//难度等级speed=level.value;//蛇形运动clearInterval(timer);定时器=setInterval（snakeMove，速度）；//背景音乐bgm.play();}timeOut.onclick=function(){//暂停游戏clearInterval(timer);}就这样，我们的贪吃蛇游戏结束了。还有就是游戏的BGM，大家可以找一些素材自己添加。