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



转自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 plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>  
  5. <script>  
  6. var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;  
  7. ctx.shadowBlur=20,ctx.shadowColor="black";  
  8. setInterval(function(){  
  9. if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;  
  10. 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()));  
  11. (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);  
  12. ctx.clearRect(0,0,240,240);  
  13. if(e)ctx.fillRect(e.x*10,e.y*10,10,10);  
  14. for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);  
  15. while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};  
  16. 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)+"]");  
  17. },100);  
  18. document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}  
  19. function check(e,j){  
  20. for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;  
  21. return false;  
  22. }  
  23. </script>  
  24. </body>  
  25. </html>  


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

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

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

[javascript]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>  
  5. <script>  
  6. var ctx=document.getElementById("myCanvas").getContext("2d");  
  7. var r = [{x:10,y:9},{x:10,y:8}];  
  8. var co=40;  
  9. var e=null;  
  10. ctx.shadowBlur=20;  
  11. ctx.shadowColor="black";  
  12. function onframe(){  
  13.     if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;  
  14.     if(e){  
  15.         if((co==40&&r[0].x==e.x&&r[0].y+1==e.y)  
  16.             ||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)  
  17.             ||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)  
  18.             ||(co==39&&r[0].x+1==e.x&&r[0].y==e.y)){  
  19.             r.unshift(e);  
  20.             e=null;  
  21.         }  
  22.     }  
  23.     r.unshift(r.pop());  
  24.     switch(co){  
  25.         case 37:  
  26.             r[0].x = r[1].x - 1;  
  27.             r[0].y = r[1].y;  
  28.             break;  
  29.         case 38:  
  30.             r[0].x = r[1].x;  
  31.             r[0].y = r[1].y - 1;  
  32.             break;  
  33.         case 39:  
  34.             r[0].x = r[1].x + 1;  
  35.             r[0].y = r[1].y;  
  36.             break;  
  37.         case 40:  
  38.             r[0].x = r[1].x;  
  39.             r[0].y = r[1].y + 1;  
  40.             break;  
  41.     }  
  42.     ctx.clearRect(0,0,240,240);  
  43.     if(e)ctx.fillRect(e.x*10,e.y*10,10,10);  
  44.     for(var i=0;i<r.length;i++){  
  45.         ctx.fillRect(r[i].x*10,r[i].y*10,10,10);  
  46.     }  
  47.     while(e==null || check(e)){  
  48.         e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};  
  49.     }  
  50.     if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){  
  51.         alert("game over\nYou get ["+(r.length-2)+"]");  
  52.     }  
  53. }  
  54. setInterval(onframe,100);  
  55. document.onkeyup = function(event){  
  56.     if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){  
  57.         co = event.keyCode;  
  58.     }  
  59. }  
  60. function check(e,j){  
  61.     for(var i=0;i<r.length;i++){  
  62.         if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;  
  63.     }  
  64.     return false;  
  65. }  
  66. </script>  
  67. </body>  
  68. </html>  



转自lufy_legend的博客

你可能感兴趣的:([代码艺术]17行代码的贪吃蛇小游戏)