时间:2021-07-01 10:21:17 帮助过:29人阅读
javascrpt有效代码17行
加上html代码的话,共25行
运行方法chrome或者firefox
测试连接
http://lufylegend.com/html5/lufylegend/tcs.html
完整代码如下
<!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>
有几个朋友想要注释,我添加了简单的注释说明,看下面
<!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>
鉴于有些朋友感觉代码读起来费劲,下面再提供一个经过格式调整后的代码,对应上面代码的各部分功能完全相同,只是写法不一样罢了
<!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>
以上就是[HTML5代码艺术]17行代码的贪吃蛇小游戏的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!