溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery寫個(gè)貪吃蛇

發(fā)布時(shí)間：2020-07-27 03:59:00 來(lái)源：網(wǎng)絡(luò) 閱讀：1120 作者：pozey 欄目：web開(kāi)發(fā)

都說(shuō)碼農(nóng)都該有自己的博客，我也整個(gè)，這是第一次發(fā)。

自學(xué)JS/JQ半年多，半年前要是聽(tīng)說(shuō)誰(shuí)會(huì)用JS/JQ做個(gè)貪吃蛇我都會(huì)覺(jué)得他是大神，現(xiàn)在覺(jué)得，也就那樣了。

最近沒(méi)項(xiàng)目做，正好想到貪吃蛇我現(xiàn)在應(yīng)該能做出來(lái)了。

說(shuō)干就干，先不看別人的代碼，自己搞，半天的時(shí)間搞定了。

偷個(gè)懶用JQ寫的，也不知道有沒(méi)有啥問(wèn)題。

 

  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>無(wú)標(biāo)題文檔</title> 
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
  6. <script type="text/javascript"> 
  7. $(document).ready(function(){ 
  8.     var hgn = 15;//橫格數(shù) 
  9.     var sgn = 10;//豎格數(shù) 
  10.     var sc = 3;//初始蛇長(zhǎng) 
  11.     var sind = new Array;//蛇索引 
  12.     var sd = 200;//速度 
  13.     var fxcur = null; 
  14.     var inv; 
  15.     var dan_ind;//膽索引 
  16.     var stop_onf = true;//暫停 
  17.      
  18.     $(".body").css({width:50*hgn+"px"}); 
  19.     $(".msg").css({width:$(".body").css("width")}); 
  20.     for(var i=0;i<hgn;i++){ 
  21.         for(var j=0;j<sgn;j++){ 
  22.             $(".body ul").append("<li></li>"); 
  23.         } 
  24.     } 
  25.     for(var i=0;i<sc;i++){ 
  26.         sind[i]=i; 
  27.     } 
  28.      
  29.     dan(); 
  30.     she(); 
  31.     move(); 
  32.      
  33.  
  34.      
  35.      
  36.     //繪蛇 
  37.     function she(){ 
  38.         $("ul li").removeClass("she"); 
  39.         for(var i=0;i<sc;i++){ 
  40.             $("ul li:eq("+sind[i]+")").addClass("she"); 
  41.         } 
  42.     } 
  43.      
  44.     //移動(dòng) 
  45.     function move(){ 
  46.         if(inv){ 
  47.             window.clearInterval(inv); 
  48.         } 
  49.         inv = window.setInterval(function(){ 
  50.             goway(fxcur); 
  51.         },sd); 
  52.     } 
  53.      
  54.     //移動(dòng)開(kāi)關(guān) 
  55.     function stopmove(){ 
  56.         if(stop_onf){ 
  57.             if(inv){ 
  58.                 window.clearInterval(inv); 
  59.             } 
  60.             $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("STOP"); 
  61.         }else{ 
  62.             $(".msg").html("GO").animate({top:"-50px"}); 
  63.             move(); 
  64.         } 
  65.         stop_onf = !stop_onf; 
  66.     } 
  67.      
  68.     //結(jié)束 
  69.     function gameover(){ 
  70.         if(inv){ 
  71.             window.clearInterval(inv); 
  72.         } 
  73.         $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("GAME OVER"); 
  74.     } 
  75.      
  76.     //判斷撞到自己 
  77.     function zsf(){ 
  78.         for(var i=0;i<sc-1;i++){ 
  79.             if(sind[sc-1]==sind[i]){ 
  80.                 gameover(); 
  81.                 return true; 
  82.             } 
  83.         } 
  84.         return false; 
  85.     } 
  86.      
  87.     //移動(dòng)功能 
  88.     function goway(fx){ 
  89.          
  90.         for(var i=0;i<sc-1;i++){ 
  91.             if(sind[sc-1]==sind[i]){ 
  92.                 gameover(); 
  93.                 return; 
  94.             } 
  95.         } 
  96.          
  97.          
  98.         if(fx=="you"){ 
  99.             if(sind[sc-1]+1==dan_ind){//吃膽 
  100.                 scsc=sc+1; 
  101.                 sind[sc-1]=dan_ind; 
  102.                 dan(); 
  103.                 she(); 
  104.                 return; 
  105.             }else if((sind[sc-1]+1)%hgn==0){//撞墻 
  106.                 gameover(); 
  107.                 return; 
  108.             } 
  109.              
  110.             for(var i=0;i<sc;i++){ 
  111.                 if(i==sc-1){ 
  112.                     sind[i]=sind[i]+1; 
  113.                     she(); 
  114.                     return; 
  115.                 } 
  116.                 sind[i]=sind[i+1]; 
  117.             } 
  118.         }else if(fx=="xia"){ 
  119.             if(sind[sc-1]+hgn==dan_ind){//吃膽 
  120.                 scsc=sc+1; 
  121.                 sind[sc-1]=dan_ind; 
  122.                 dan(); 
  123.                 she(); 
  124.                 return; 
  125.             }else if(sind[sc-1]>hgn*sgn-hgn){//撞墻 
  126.                 gameover(); 
  127.                 return; 
  128.             } 
  129.             for(var i=0;i<sc;i++){ 
  130.                 if(i==sc-1){ 
  131.                     sind[i]=sind[i]+hgn; 
  132.                     she(); 
  133.                     return; 
  134.                 } 
  135.                 sind[i]=sind[i+1]; 
  136.             } 
  137.         }else if(fx=="zuo"){ 
  138.             if(sind[sc-1]-1==dan_ind){//吃膽 
  139.                 scsc=sc+1; 
  140.                 sind[sc-1]=dan_ind; 
  141.                 dan(); 
  142.                 she(); 
  143.                 return; 
  144.             }else if((sind[sc-1])%hgn==0){//撞墻 
  145.                 gameover(); 
  146.                 return; 
  147.             } 
  148.             for(var i=0;i<sc;i++){ 
  149.                 if(i==sc-1){ 
  150.                     sind[i]=sind[i]-1; 
  151.                     she(); 
  152.                     return; 
  153.                 } 
  154.                 sind[i]=sind[i+1]; 
  155.             } 
  156.         }else if(fx=="shang"){ 
  157.             if(sind[sc-1]-hgn==dan_ind){//吃膽 
  158.                 scsc=sc+1; 
  159.                 sind[sc-1]=dan_ind; 
  160.                 dan(); 
  161.                 she(); 
  162.                 return; 
  163.             }else if(sind[sc-1]<hgn){//撞墻 
  164.                 gameover(); 
  165.                 return; 
  166.             } 
  167.             for(var i=0;i<sc;i++){ 
  168.                 if(i==sc-1){ 
  169.                     sind[i]=sind[i]-hgn; 
  170.                     she(); 
  171.                     return; 
  172.                 } 
  173.                 sind[i]=sind[i+1]; 
  174.             } 
  175.         }else{ 
  176.             return; 
  177.         } 
  178.          
  179.          
  180.     } 
  181.      
  182.      
  183.      
  184.      
  185.     //判斷是否吃到膽 
  186.     function isdan(num){ 
  187.         if(num==dan_ind){ 
  188.             scsc=sc+1; 
  189.             sind[sc-1]=num; 
  190.             dan(); 
  191.         } 
  192.     } 
  193.      
  194.      
  195.     //按鍵 
  196.     $(document).keydown(function(event){ 
  197.         var down_num = event.which; 
  198.         var fx = null; 
  199.         if(down_num==37){//左 
  200.             fx = "zuo"; 
  201.         }else if(down_num==38){//上 
  202.             fx = "shang"; 
  203.         }else if(down_num==40){//下 
  204.             fx = "xia"; 
  205.         }else if(down_num==39){//右 
  206.             fx = "you"; 
  207.         }else if(down_num==32){ 
  208.             stopmove(); 
  209.         } 
  210.          
  211.         //需判斷能否點(diǎn)擊 
  212.         if(fxcur=="shang"&&fx=="xia"||fxcur=="xia"&&fx=="shang"||fxcur=="zuo"&&fx=="you"||fxcur=="you"&&fx=="zuo"){ 
  213.             return; 
  214.         }else{ 
  215.             fxfxcur = fx; 
  216.         } 
  217.          
  218.     }); 
  219.      
  220.     //繪膽 
  221.     function dan(){ 
  222.         //需判斷生成膽是否在蛇索引上 
  223.          
  224.         dan_ind = parseInt(hgn*sgn*Math.random()-1); 
  225.         for(var i=0;i<sc;i++){ 
  226.             if(dan_ind==sind[i]){ 
  227.                 dan(); 
  228.                 return; 
  229.             } 
  230.         } 
  231.          
  232.         $("ul li").removeClass("dan"); 
  233.         $("ul li:eq("+dan_ind+")").addClass("dan"); 
  234.     } 
  235.      
  236.      
  237.      
  238. }) 
  239. </script> 
  240. <style> 
  241. /*整體設(shè)置*/ 
  242. a:active {outline: none;star:expression(thisthis.onFocus=this.blur());} 
  243. html{ overflow-y:scroll;} 
  244. *{margin:0;padding:0;list-style:none;outline:none;word-wrap:break-word;} 
  245. img{border:none} 
  246. h2,h3,h4,h5,h6,h7,body,small{font-size:12px; font-weight:400; font-family:Arial,"宋體";} 
  247. table{table-layout:fixed; border-collapse:collapse} 
  248. a{ text-decoration:none;} 
  249. body{ background:#fff;} 
  250.  
  251. .body{ overflow:hidden; border:1px solid #666; position:absolute; left:250px; top:0;} 
  252. li{ width:48px; height:48px; overflow:hidden; float:left; border:1px solid #666; background:#6C9;} 
  253. li.she{ background:#069;} 
  254. li.dan{ background:#0CF;} 
  255. .tel{ font-size:24px;} 
  256. .msg{ overflow:hidden; font-size:24px; color:#333; text-align:center; position:absolute; left:250px; top:0;} 
  257. </style> 
  258. </head> 
  259.  
  260. <body> 
  261. <div class="tel">方向鍵控制方向<br />空格鍵暫停</div> 
  262. <div class="body"> 
  263. <ul> 
  264. </ul> 
  265. </div> 
  266. <div class="msg"></div> 
  267.  
  268. </body> 
  269. </html> 

 

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手