(编辑:jimmy 日期: 2024/12/26 浏览:2)
本文实例为大家分享了JS实现简易贪吃蛇的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #body{ width: 900px;/*长宽最好是obj的倍数*/ height: 600px; border-width: 10px; border-style: solid; border-color: blue; line-height:600px;/*文本垂直居中*/ text-align: center;/*文本水平居中*/ position: relative;/*相对定位*/ left: 0px; top: 0px; } #obj{ width: 30px; height: 30px; background-color: red; position: absolute;/*绝对定位*/ left: 0px; top: 0px; z-index: 1;/*头部在上层显示*/ } div{ text-align: center; line-height:30px; } </style> </head> <body id='body'> <!--内容--> 按awsd移动 <div id='obj'></div> <select id='speed' onclick="setspeed(this)"> <option value="100">快速</option> <option value="500">中速</option> <option value="1000" selected>慢速</option> </select> | <button onclick="lenbodyadd()">身体+1</button> | <button onclick="stopspeed()">暂停</button> <div class="div"></div> </body> </html> <script> var val={key:"d"};//默认向右移动 var key = document.getElementById("body"); key.onkeydown =f; //注册keydown事件处理函数 var divnum=1;//身体每节编号 var lenbody=5;//默认身体长度 var speed=1000;//默认速度 var obj=document.getElementById('obj'); var myWidth=parseInt(getComputedStyle(obj,null).getPropertyValue('width')); var myHeight=parseInt(getComputedStyle(obj,null).getPropertyValue('height')); var clientH= document.body.clientHeight;//获取body高 var clientW= document.body.clientWidth;//获取body宽 var foodLeft=0;//食物x坐标 var foodTop=0;//食物y坐标 function f (va) { var e = e || window.event; //标准化事件处理 let s = '';//val.type + " " + val.key; //获取键盘事件类型和按下的值 let key=val.key; val=va; var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标 parseInt(obj.style.top); var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标 parseInt(obj.style.left); var movePx=myWidth;//每次移动的距离 var move=0; if(key=='w'){ move=myTop-movePx;//每次移动10 if(move<0 || move>clientH){ return false;//不能超过边界 } obj.style.top=move+'px'; s='上'; } if(key=='s'){ move=myTop+movePx; if(move<0 || move>clientH-myHeight){ return false; } obj.style.top=move+'px'; s='下'; } if(key=='a'){ move=myLeft-movePx; if(move<0 || move>clientW){ return false; } obj.style.left=move+'px'; s='左'; } if(key=='d'){ move=myLeft+movePx; if(move<0 || move>clientW-myWidth){ return false; } obj.style.left=move+'px'; s='右'; } obj.innerText=s;//设置文本 & 清楚之前的元素 console.log(move+' top:'+myTop+' left:'+myLeft); //移除之前的身体元素,使有头有尾 if(document.getElementsByClassName('div').length>=lenbody){ document.getElementsByClassName('div')[0].parentNode.removeChild(document.getElementsByClassName('div')[0]); } //div身体元素随后移动 let newMyMoveWidth=myLeft; let newMyMoveHeight=myTop; let div=document.createElement('div'); div.className ='div'; div.style.width = myWidth + 'px'; div.style.height = myHeight + 'px'; div.style.position = 'absolute'; div.style.left=newMyMoveWidth + 'px'; div.style.top=newMyMoveHeight + 'px'; div.style.backgroundColor='blue'; div.innerHTML=divnum;//设置文字|方便识别div顺序 obj.parentNode.appendChild(div); console.log('newMyMoveWidth:'+newMyMoveWidth+' newMyMoveHeight:'+newMyMoveHeight); divnum++; ifeatfood(myLeft,myTop); } /*f() end--*/ //生成食物 function setfood(){ foodLeft=parseInt(Math.random()*clientW); foodTop=parseInt(Math.random()*clientH); let div=document.createElement('div'); div.id ='food'; div.style.width = myWidth + 'px'; div.style.height = myHeight + 'px'; div.style.position = 'absolute'; div.style.left= foodLeft + 'px'; div.style.top= foodTop + 'px'; div.style.backgroundColor='pink'; div.innerHTML='吃';//设置文字|方便识别div顺序 document.body.appendChild(div); } setfood(); //判断吃到食物 function ifeatfood(myLeft,myTop){ //判断是否吃到食物 if(Math.abs(foodLeft-myLeft)<myWidth && Math.abs(foodTop-myTop)<myHeight){ lenbodyadd();//长度+1 //删除旧food,生成新food document.getElementById('food').parentNode.removeChild(document.getElementById('food')); setfood(); } } //吃到食物身体加1 function lenbodyadd(){ lenbody++; } //保持移动 var setinter=setInterval((function move(){ f(val); }),speed); //设置移动速度 function setspeed(obj){ speed=obj.options[obj.options.selectedIndex].value; stopspeed(); setinter=setInterval((function move(){ f(val); }),speed); } //停止移动 function stopspeed(){ clearInterval(setinter); } //窗口改变时跳转-防f12 window.onresize = ()=>{ console.log(window.innerWidth,window.innerHeight); //window.location.href='https://www.baidu.com'; } </script>
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。