JS實(shí)現(xiàn)簡(jiǎn)易貪吃蛇游戲
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)易貪吃蛇的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html><head> <title></title> <meta charset='utf-8'> <style type='text/css'> #body{ width: 900px;/*長(zhǎng)寬最好是obj的倍數(shù)*/ height: 600px; border-width: 10px; border-style: solid; border-color: blue; line-height:600px;/*文本垂直居中*/ text-align: center;/*文本水平居中*/ position: relative;/*相對(duì)定位*/ left: 0px; top: 0px; } #obj{ width: 30px; height: 30px; background-color: red; position: absolute;/*絕對(duì)定位*/ left: 0px; top: 0px; z-index: 1;/*頭部在上層顯示*/ } div{ text-align: center; line-height:30px; } </style></head> <body id=’body’> <!--內(nèi)容--> 按awsd移動(dòng) <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'};//默認(rèn)向右移動(dòng) var key = document.getElementById('body'); key.onkeydown =f; //注冊(cè)keydown事件處理函數(shù) var divnum=1;//身體每節(jié)編號(hào) var lenbody=5;//默認(rèn)身體長(zhǎng)度 var speed=1000;//默認(rèn)速度 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坐標(biāo) var foodTop=0;//食物y坐標(biāo) function f (va) { var e = e || window.event; //標(biāo)準(zhǔn)化事件處理 let s = ’’;//val.type + ' ' + val.key; //獲取鍵盤(pán)事件類型和按下的值 let key=val.key; val=va; var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue(’top’));//獲取精靈y坐標(biāo) parseInt(obj.style.top); var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue(’left’));//獲取精靈x坐標(biāo) parseInt(obj.style.left); var movePx=myWidth;//每次移動(dòng)的距離 var move=0; if(key==’w’){ move=myTop-movePx;//每次移動(dòng)10 if(move<0 || move>clientH){ return false;//不能超過(guò)邊界 } 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;//設(shè)置文本 & 清楚之前的元素 console.log(move+’ top:’+myTop+’ left:’+myLeft); //移除之前的身體元素，使有頭有尾 if(document.getElementsByClassName(’div’).length>=lenbody){ document.getElementsByClassName(’div’)[0].parentNode.removeChild(document.getElementsByClassName(’div’)[0]); } //div身體元素隨后移動(dòng) 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;//設(shè)置文字|方便識(shí)別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=’吃’;//設(shè)置文字|方便識(shí)別div順序 document.body.appendChild(div); } setfood(); //判斷吃到食物 function ifeatfood(myLeft,myTop){ //判斷是否吃到食物 if(Math.abs(foodLeft-myLeft)<myWidth && Math.abs(foodTop-myTop)<myHeight){ lenbodyadd();//長(zhǎng)度+1 //刪除舊food，生成新food document.getElementById(’food’).parentNode.removeChild(document.getElementById(’food’)); setfood(); } } //吃到食物身體加1 function lenbodyadd(){ lenbody++; } //保持移動(dòng) var setinter=setInterval((function move(){ f(val); }),speed); //設(shè)置移動(dòng)速度 function setspeed(obj){ speed=obj.options[obj.options.selectedIndex].value; stopspeed(); setinter=setInterval((function move(){ f(val); }),speed); } //停止移動(dòng) function stopspeed(){ clearInterval(setinter); } //窗口改變時(shí)跳轉(zhuǎn)-防f12 window.onresize = ()=>{ console.log(window.innerWidth,window.innerHeight); //window.location.href=’https://www.baidu.com’; }</script>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
C++經(jīng)典小游戲匯總
python經(jīng)典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經(jīng)典游戲 玩不停
java經(jīng)典小游戲匯總
javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單2. 博客日志摘要暨RSS技術(shù)3. JSP的Cookie在登錄中的使用4. ASP腳本組件實(shí)現(xiàn)服務(wù)器重啟5. ASP常用日期格式化函數(shù) FormatDate()6. JSP之表單提交get和post的區(qū)別詳解及實(shí)例7. SSM框架整合JSP中集成easyui前端ui項(xiàng)目開(kāi)發(fā)示例詳解8. 使用XSL將XML文檔中的CDATA注釋輸出為HTML文本9. 解析原生JS getComputedStyle10. XML解析錯(cuò)誤：未組織好 的解決辦法
網(wǎng)公網(wǎng)安備