JS实现简易贪吃蛇游戏
导读：本文实例为大家分享了JS实现简易贪吃蛇的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html><head> <title></title> <meta charset='utf-8'> <style ...
本文实例为大家分享了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经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. CSS3实例分享之多重背景的实现(Multiple backgrounds)2. intellij idea中spring boot properties文件不能自动提示问题解决3. Android自定义Dialog框样式4. 使用Canal实现PHP应用程序与MySQL数据库的实时数据同步5. 一篇文章带你了解JavaScript-语句6. 详解IDEA搭建springBoot方式一(推荐)7. asp.net core服务限制堆内存大小的操作方法8. intellij idea写Python教程9. Android Studio导入jar包过程详解10. IntelliJ IDEAx导出安卓（Android）apk文件图文教程
网公网安备