中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

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

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery寫個貪吃蛇

發布時間：2020-07-27 03:59:00 來源：網絡 閱讀：1121 作者：pozey 欄目：web開發

都說碼農都該有自己的博客，我也整個，這是第一次發。

自學JS/JQ半年多，半年前要是聽說誰會用JS/JQ做個貪吃蛇我都會覺得他是大神，現在覺得，也就那樣了。

最近沒項目做，正好想到貪吃蛇我現在應該能做出來了。

說干就干，先不看別人的代碼，自己搞，半天的時間搞定了。

偷個懶用JQ寫的，也不知道有沒有啥問題。

 

  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>無標題文檔</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;//橫格數 
  9.     var sgn = 10;//豎格數 
  10.     var sc = 3;//初始蛇長 
  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.     //移動 
  45.     function move(){ 
  46.         if(inv){ 
  47.             window.clearInterval(inv); 
  48.         } 
  49.         inv = window.setInterval(function(){ 
  50.             goway(fxcur); 
  51.         },sd); 
  52.     } 
  53.      
  54.     //移動開關 
  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.     //結束 
  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.     //移動功能 
  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.         //需判斷能否點擊 
  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. /*整體設置*/ 
  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問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
蒙城县| 福贡县| 墨玉县| 沅江市| 和田市| 武威市| 奇台县| 普安县| 松桃| 武功县| 罗江县| 阳谷县| 吉安市| 东光县| 砚山县| 广安市| 永清县| 翁牛特旗| 阿鲁科尔沁旗| 房山区| 澄城县| 绥中县| 邹平县| 阳东县| 城步| 栾川县| 团风县| 岳阳县| 蒙阴县| 黄冈市| 淳安县| 淮滨县| 鸡泽县| 贵港市| 中山市| 胶南市| 长丰县| 子洲县| 西藏| 亚东县| 金华市|