一個貪吃蛇小遊戲
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>
轉載請註明：轉自lufy_legend的部落格
歡迎繼續關注我的部落格
http://blog.csdn.net/lufy_legend
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
