天达云 科技型企业 | 亚太互联网络信息中心(APNIC)成员 | 注册免费体验 15天云虚拟主机、7天云服务器
[ 会员登录 ] - [ 免费注册 ]|用户中心|在线充值| 投诉举报
天达云首页 > 互联网学习教程 > web开发 > jQuery写个贪吃蛇

jQuery写个贪吃蛇
更新：HHH   时间：2023-1-7

都说码农都该有自己的博客，我也整个，这是第一次发。

自学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> 

 
返回web开发教程...
400-837-6568
7 * 24小时全天全国服务热线400电话
天达云·专业的云计算服务平台 全国400服务电话：400-837-6568
Copyright © 2011-2024 Tdyun.com. All Rights Reserved. 天达云 版权所有 粤ICP备18083267号-7