[代碼的藝術]20行代碼的貪喫蛇
<!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>