提供5個版本。每個版本都可用！
第一、第二個版本是基本版。
第三~第五版本是基本完美版本！
第一個版本：20行js代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貪吃蛇1</title>
<style type="text/css">
table{
border-collapse:collapse;
background-color:#333333;
}
table tr td{
width:20px;height:20px;
}
</style>
</head>
<body>
<div id="container1" align="center" ></div>
<script type="text/javascript" >
var SN=[47,46,45],FD=8,RULE=[+20,+1,-20,-1],T=null,SP=500,K,html ="<table cellpadding='0' border='1'>";//
for(var i=0;i<20;i++){
for(var j=0,html =html +"<tr>";j<20;j++)html +="<td id=td"+(i*20+j)+" ></td>";
html = html + "</tr>";
}container1.innerHTML = (html +="</table>");//前面這些都是表格初始化。下面纔是真正的邏輯。
for(var i=0;i<SN.length;i++)document.getElementById("td"+SN[i]).style.backgroundColor="blue";
document.body.onkeydown=function(e){
T!=null && clearTimeout(T);
K = e ? e.keyCode : K;
var arg =arguments,h = SN[0];
if(SN.includes( h +=RULE[40- K] ) || h <0 || h >399 ||( K%2==1 && Math.floor( h/20 ) != Math.floor( SN[0]/20 ) ) )alert("掛") & window.location.reload();
document.getElementById("td"+h).style.backgroundColor="blue";//新頭給顏色
SN.unshift(h);//
if(h == FD){ //吃到食物
while( SN.includes( FD = parseInt( Math.random()*400)) );
(SP = SP > 100 ? SP-50 : SP) && (document.getElementById("td"+FD).style.backgroundColor="red"); //吃到食物速度遞增。
}else
document.getElementById("td"+SN.pop()).style.backgroundColor=""//未吃到食物。彈出尾部。清除顏色。
T=setTimeout(arg.callee,SP);
};document.getElementById("td"+FD).style.backgroundColor="red";
</script>
</body>
</html>存在問題：捨身太多的時候。分配食物的方式可能會慢。
第二個版本：和第一個版本的問題一樣。只是提供了一個修改顏色快捷方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貪吃蛇2</title>
<style type="text/css">
table{
border-collapse:collapse;
background-color:#333333;
}
table tr td{
width:20px;
height:20px;
}
</style>
</head>
<body>
<div id="container1" align="center" ></div>
<script type="text/javascript" >
var SN=[47,46,45],FD=8,RULE=[+20,+1,-20,-1],T=null,SP=500,K,html ="<table cellpadding='0' border='1'>";
for(var i=0;i<20;i++){
for(var j=0,html =html +"<tr>";j<20;j++){html +="<td id=td"+(i*20+j)+" ></td>";}
html = html + "</tr>";
}container1.innerHTML = (html +="</table>");
function JQ(n){this.dom= document.getElementById("td"+n);}
JQ.prototype.color=function(c){this.dom && (this.dom.style.backgroundColor=c)}
var $=function(n){return new JQ(n);}
for(var i=0;i<SN.length;i++)$(SN[i]).color("blue");
document.onkeydown=function(e){
T!=null && clearTimeout(T);
K = e ? e.keyCode : K;
var arg =arguments,h = SN[0];
if(SN.includes( h +=RULE[40- K] ) || h <0 || h >399 ||( K%2==1 && Math.floor( h/20 ) != Math.floor( SN[0]/20 ) ) )alert("掛") & window.location.reload();
$(h).color("blue");//新頭給顏色
SN.unshift(h);//
if(h == FD){ //吃到食物
while( SN.includes( FD = parseInt( Math.random()*400)) );
(SP = SP > 100 ? SP-50 : SP) && $(FD).color("red"); //吃到食物速度遞增。
}else
$(SN.pop()).color("");//未吃到食物。彈出尾部。清除顏色。
T=setTimeout(arg.callee,SP);
};$(FD).color("red")
</script>
</body>
</html>第三版：解決食物分配的性能問題。可自動選擇。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貪吃蛇3</title>
<style type="text/css">
table{
border-collapse:collapse;
background-color:#333333;
}
table tr td{
width:20px;
height:20px;
}
</style>
</head>
<body>
<div id="container1" align="center" ></div>
<script type="text/javascript" >
var SN=[],FD,NUM=[],RULE=[+20,+1,-20,-1],T=null,SP=500,K=40,html ="<table cellpadding='0' border='1'>";//
for(var i=0;i<20;i++){
for(var j=0,html =html +"<tr>";j<20;j++)html +="<td id=td"+(NUM[i*20+j]=i*20+j)+" ></td>";
html = html + "</tr>";
}container1.innerHTML = (html +="</table>");
for(var b=parseInt(Math.random()*20),b=b*20+b%10 ;SN.length<3;){
document.getElementById("td"+( SN[SN.length]=NUM.splice(b,1)[0] ) ).style.backgroundColor="blue";
}document.getElementById("td"+(FD=NUM.splice(parseInt(Math.random()*NUM.length))[0] )).style.backgroundColor="red"
document.onkeydown=function(e){
T!=null && clearTimeout(T);
K = e ? e.keyCode : K;
var arg =arguments,h = SN[0];
if(SN.includes( h +=RULE[40- K] ) || h <0 || h >399 ||( K%2==1 && Math.floor( h/20 ) != Math.floor( SN[0]/20 ) ) )alert("掛") & window.location.reload();document.getElementById("td"+h).style.backgroundColor="blue";//新頭給顏色
SN.unshift(h);//
if(h == FD){ //吃到食物
NUM.splice( NUM.indexOf(h),1 );
if(NUM.length<=200)while( SN.includes( FD = parseInt( Math.random()*400) ) );
else FD=NUM.splice(parseInt(Math.random()*NUM.length) )[0] ;
(SP = SP > 100 ? SP-50 : SP) && (document.getElementById("td"+FD).style.backgroundColor="red"); //吃到食物速度遞增。
}else
document.getElementById("td"+ (NUM[NUM.length -1 ]=SN.pop())).style.backgroundColor=""//未吃到食物。彈出尾部。清除顏色。
T=setTimeout(arg.callee,SP);
};SN.sort().reverse();
document.onkeydown();//開機即跑。
</script>
</body>
</html>第四版本：和第三版一樣。只是寫法換了一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貪吃蛇4</title>
<style type="text/css">
table{
border-collapse:collapse;
background-color:#333333;
}
table tr td{
width:20px;
height:20px;
}
</style>
</head>
<body>
<div id="container1" align="center" ></div>
<script type="text/javascript" >
var $color=function(n,c){ document.getElementById("td"+n).style.backgroundColor=c }
var SN=[],FD,NUM=[],RULE=[+20,+1,-20,-1],T=null,SP=500,K=40,html ="<table cellpadding='0' border='1'>";//
for(var i=0;i<20;i++){
for(var j=0,html =html +"<tr>";j<20;j++)html +="<td id=td"+(NUM[i*20+j]=i*20+j)+" ></td>";
html = html + "</tr>";
}container1.innerHTML = (html +="</table>");
for(var b=parseInt(Math.random()*20),b=b*20+b%10 ;SN.length<3;){
$color( SN[SN.length]=NUM.splice(b,1)[0] , "blue");
} $color( FD=NUM.splice(parseInt(Math.random()*NUM.length))[0] , "red");
document.onkeydown=function(e){
T!=null && clearTimeout(T);
K = e ? e.keyCode : K;
var arg =arguments,h = SN[0];
if(SN.includes( h +=RULE[40- K] ) || h <0 || h >399 ||( K%2==1 && Math.floor( h/20 ) != Math.floor( SN[0]/20 ) ) )alert("掛") & window.location.reload();
$color(h,"blue");//新頭給顏色
SN.unshift(h);//
if(h == FD){ //吃到食物
NUM.splice( NUM.indexOf(h),1 );
if(NUM.length<=200)while( SN.includes( FD = parseInt( Math.random()*400) ) ); //根據蛇身的數量自動切換獲取食物的方法
else FD=NUM.splice(parseInt(Math.random()*NUM.length) )[0] ;//以提高效率。
(SP = SP > 100 ? SP-50 : SP) && ($color(FD,"red") ); //吃到食物速度遞增。
}else
$color(NUM[NUM.length -1 ]=SN.pop(),"");//未吃到食物。彈出尾部。清除顏色。
T=setTimeout(arg.callee,SP);
};SN.sort().reverse();
document.onkeydown();
</script>
</body>
</html>第五版：和第三第四版一樣。只是寫法不一樣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貪吃蛇5</title>
<style type="text/css">
table{
border-collapse:collapse;
background-color:#333333;
}
table tr td{
width:20px;
height:20px;
}
</style>
</head>
<body>
<div id="container1" align="center" ></div>
<script type="text/javascript" >
function JQ(n){this.dom= document.getElementById("td"+n);}
JQ.prototype.color=function(c){this.dom && (this.dom.style.backgroundColor=c)}
var $=function(n){return new JQ(n);}
var SN=[],FD,NUM=[],RULE=[+20,+1,-20,-1],T=null,SP=500,K=40,html ="<table cellpadding='0' border='1'>";//
for(var i=0;i<20;i++){
for(var j=0,html =html +"<tr>";j<20;j++)html +="<td id=td"+(NUM[i*20+j]=i*20+j)+" ></td>";
html = html + "</tr>";
}container1.innerHTML = (html +="</table>");
for(var b=parseInt(Math.random()*20),b=b*20+b%10 ;SN.length<3;){
$( SN[SN.length]=NUM.splice(b,1)[0] ).color("blue");
} $( FD=NUM.splice(parseInt(Math.random()*NUM.length))[0] ).color( "red");
document.onkeydown=function(e){
T!=null && clearTimeout(T);
K = e ? e.keyCode : K;
var arg =arguments,h = SN[0];
if( SN.includes( h +=RULE[40- K] ) || h <0 || h >399 ||( K%2==1 && Math.floor( h/20 ) != Math.floor( SN[0]/20 ) ) )alert("掛") & window.location.reload();
$(h).color("blue");//新頭給顏色
SN.unshift(h);//
if(h == FD){ //吃到食物
NUM.splice( NUM.indexOf(h),1 );
if(NUM.length<=3)while( SN.includes( FD = parseInt( Math.random()*400) ) ); //根據蛇身的數量自動切換獲取食物的方法
else FD=NUM.splice(parseInt(Math.random()*NUM.length) )[0] ;//以提高效率。
(SP = SP > 100 ? SP-50 : SP) && ($( FD ).color("red") ); //吃到食物速度遞增。
}else
$( NUM[NUM.length -1 ]=SN.pop() ).color("");//未吃到食物。彈出尾部。清除顏色。
T=setTimeout(arg.callee,SP);
};SN.sort().reverse();
document.onkeydown();
</script>
</body>
</html>