JS實現簡易貪吃蛇游戲
本文實例為大家分享了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. jQuery加PHP實現圖片上傳并提交的示例代碼2. Idea 2020.2安裝MyBatis Log Plugin 不可用的解決方法3. IDEA怎么切換Git分支的實現方法4. 解決idea刪除模塊后重新創建顯示該模塊已經被注冊的問題5. 完美實現浮動元素橫排居中顯示6. JSP Tag Library-AjaxTags 1.0, released7. 小區后臺管理系統項目前端html頁面模板實現示例8. Python使用ElementTree美化XML格式的操作9. jsp request.getParameter() 和request.getAttribute()方法區別詳解10. JSP動態網頁開發技術概述
網公網安備