꼬마뱀게임
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>
위는 17줄의 [HTML5 코드 아트] 스네이크 게임의 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트(www.php.cn)를 팔로우하세요!