[代码艺术]17行代码的贪吃蛇小游戏

最新推荐文章于 2021-07-21 22:11:40 发布

eldn__

最新推荐文章于 2021-07-21 22:11:40 发布

阅读量824

点赞数

分类专栏： ASP(xhtml/css)

ASP(xhtml/css) 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转自lufy_legend的博客
http://blog.csdn.net/lufy_legend/article/details/8233520

一个贪吃蛇小游戏

javascrpt有效代码17行
加上html代码的话，共25行
运行方法chrome或者firefox
测试连接
http://lufylegend.com/html5/lufylegend/tcs.html

完整代码如下

[javascript]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <body>  
 <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>  
 <script>  
 var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;  
 ctx.shadowBlur=20,ctx.shadowColor="black";  
 setInterval(function(){  
 if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;  
 e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)||(co==39&&r[0].x+1==e.x&&r[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):(r.unshift(r.pop()));  
 (co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+(co==39?1:-1),r[0].y=r[1].y);  
 ctx.clearRect(0,0,240,240);  
 if(e)ctx.fillRect(e.x*10,e.y*10,10,10);  
 for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);  
 while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};  
 if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)alert("game over\nYou get ["+(r.length-2)+"]");  
 },100);  
 document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}  
 function check(e,j){  
 for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;  
 return false;  
 }  
 </script>  
 </body>  
 </html>  

有几个朋友想要注释，我添加了简单的注释说明，看下面

[javascript]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <body>  
 <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>  
 <script>  
 //r数组表示蛇 ； co表示蛇前进的方向，默认向下 ； e表示食物  
 var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;  
 //给蛇加上阴影效果  
 ctx.shadowBlur=20,ctx.shadowColor="black";  
 //循环，间隔为100毫秒  
 setInterval(function(){  
 //游戏是否已经结束  
 if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;  
 //如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部  
 e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)||(co==39&&r[0].x+1==e.x&&r[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):(r.unshift(r.pop()));  
 //根据方向，重新设定蛇数组首元素的坐标，从而进行移动  
 (co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+(co==39?1:-1),r[0].y=r[1].y);  
 //清空屏幕  
 ctx.clearRect(0,0,240,240);  
 //如果有食物，则绘制食物  
 if(e)ctx.fillRect(e.x*10,e.y*10,10,10);  
 //绘制蛇  
 for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);  
 //如果没有食物，则在随机位置上加入一粒食物  
 while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};  
 //判断游戏是否结束  
 if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)alert("game over\nYou get ["+(r.length-2)+"]");  
 },100);  
 //加入键盘事件，用方向键来控制蛇前进的方向  
 document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}  
 //判断指定位置是否与蛇重叠  
 function check(e,j){  
 for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;  
 return false;  
 }  
 </script>  
 </body>  
 </html>  

鉴于有些朋友感觉代码读起来费劲，下面再提供一个经过格式调整后的代码，对应上面代码的各部分功能完全相同，只是写法不一样罢了

[javascript]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <body>  
 <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>  
 <script>  
 var ctx=document.getElementById("myCanvas").getContext("2d");  
 var r = [{x:10,y:9},{x:10,y:8}];  
 var co=40;  
 var e=null;  
 ctx.shadowBlur=20;  
 ctx.shadowColor="black";  
 function onframe(){  
     if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;  
     if(e){  
         if((co==40&&r[0].x==e.x&&r[0].y+1==e.y)  
             ||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)  
             ||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)  
             ||(co==39&&r[0].x+1==e.x&&r[0].y==e.y)){  
             r.unshift(e);  
             e=null;  
         }  
     }  
     r.unshift(r.pop());  
     switch(co){  
         case 37:  
             r[0].x = r[1].x - 1;  
             r[0].y = r[1].y;  
             break;  
         case 38:  
             r[0].x = r[1].x;  
             r[0].y = r[1].y - 1;  
             break;  
         case 39:  
             r[0].x = r[1].x + 1;  
             r[0].y = r[1].y;  
             break;  
         case 40:  
             r[0].x = r[1].x;  
             r[0].y = r[1].y + 1;  
             break;  
     }  
     ctx.clearRect(0,0,240,240);  
     if(e)ctx.fillRect(e.x*10,e.y*10,10,10);  
     for(var i=0;i<r.length;i++){  
         ctx.fillRect(r[i].x*10,r[i].y*10,10,10);  
     }  
     while(e==null || check(e)){  
         e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};  
     }  
     if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){  
         alert("game over\nYou get ["+(r.length-2)+"]");  
     }  
 }  
 setInterval(onframe,100);  
 document.onkeyup = function(event){  
     if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){  
         co = event.keyCode;  
     }  
 }  
 function check(e,j){  
     for(var i=0;i<r.length;i++){  
         if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;  
     }  
     return false;  
 }  
 </script>  
 </body>  
 </html>  