JS實現(xiàn)簡易貪吃蛇游戲

更新時間：2020年08月24日 09:54:40 作者：彎月liang

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡易貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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.;
 }
</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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: