JS實現(xiàn)簡易貪吃蛇游戲
本文實例為大家分享了JS實現(xiàn)簡易貪吃蛇的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html><head> <title></title> <meta charset='utf-8'> <style type='text/css'> #body{ width: 900px;/*長寬最好是obj的倍數(shù)*/ 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’> <!--內(nèi)容--> 按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'};//默認(rèn)向右移動 var key = document.getElementById('body'); key.onkeydown =f; //注冊keydown事件處理函數(shù) var divnum=1;//身體每節(jié)編號 var lenbody=5;//默認(rèn)身體長度 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; //獲取鍵盤事件類型和按下的值 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;//每次移動的距離 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;//設(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身體元素隨后移動 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è)置文字|方便識別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è)置文字|方便識別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); //設(shè)置移動速度 function setspeed(obj){ speed=obj.options[obj.options.selectedIndex].value; stopspeed(); setinter=setInterval((function move(){ f(val); }),speed); } //停止移動 function stopspeed(){ clearInterval(setinter); } //窗口改變時跳轉(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)典小游戲匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 利用CSS3新特性創(chuàng)建透明邊框三角2. html清除浮動的6種方法示例3. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)4. vue實現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程5. CSS代碼檢查工具stylelint的使用方法詳解6. 使用css實現(xiàn)全兼容tooltip提示框7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析9. div的offsetLeft與style.left區(qū)別10. 不要在HTML中濫用div
網(wǎng)公網(wǎng)安備