<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
canvas {
border:1px solid;
}
</style>
<script>
var t;
var score;
var indexArr=[[20,20],[20,19],[20,18]];
//1:↓ 2:↑ 3:← 4:→
var dirArr=[1,1,1];
var beanPos = [Math.ceil(Math.random()*39)+1,Math.ceil(Math.random()*39)+1];
var drawSnake = function(indexArr){
var canvas = document.getElementById("draw");
var context = canvas.getContext("2d");
context.clearRect(0,0,400,400);
context.fillStyle = "rgb(10,210,10)";
context.fillRect((beanPos[0]-1)*10,(beanPos[1]-1)*10,10,10);
context.fillStyle = "#000000";
for(i=0;i<indexArr.length;i++)
context.fillRect((indexArr[i][0]-1)*10,(indexArr[i][1]-1)*10,10,10);
context.stroke();
}
var update = function(indexArr,dirArr){
var nextPos;
switch(dirArr[0])
{
case 1:nextPos=[indexArr[0][0],indexArr[0][1]+1];break;
case 2:nextPos=[indexArr[0][0],indexArr[0][1]-1];break;
case 3:nextPos=[indexArr[0][0]-1,indexArr[0][1]];break;
case 4:nextPos=[indexArr[0][0]+1,indexArr[0][1]];break;
}
//检测碰到自身
var isNotCrash = true;
isHeadCrash=testCrash(nextPos,indexArr);
if(!isHeadCrash)
{
clearTimeout(t);
alert("GameOver");
document.getElementById("startButton").style.visibility = "visible";
return;
}
//检测碰墙
if(nextPos[0]>40||nextPos[0]<1||nextPos[1]<1||nextPos[1]>40)
{
clearTimeout(t);
alert("GameOver");
document.getElementById("startButton").style.visibility = "visible";
return;
}
//检测吃豆
if(beanPos[0]==nextPos[0]&&beanPos[1]==nextPos[1])
{
indexArr.unshift(nextPos);
var tmpDir = dirArr[0];
dirArr.unshift(tmpDir);
beanPos = [Math.ceil(Math.random()*39)+1,Math.ceil(Math.random()*39)+1];
while(!testCrash(beanPos,indexArr))
{
beanPos = [Math.ceil(Math.random()*39)+1,Math.ceil(Math.random()*39)+1];
}
}
for(i=0;i<indexArr.length;i++)
{
switch(dirArr[i])
{
case 1:indexArr[i][1]+=1;break;
case 2:indexArr[i][1]-=1;break;
case 3:indexArr[i][0]-=1;break;
case 4:indexArr[i][0]+=1;break;
}
}
drawSnake(indexArr);
updateDir(dirArr);
t = setTimeout(update,500,indexArr,dirArr);
}
var isKeyDown = false;
var changeDir = function(event){
//console.log(event.which);
if(!isKeyDown){
isKeyDown=true;
var keyNum=event.which;
switch(dirArr[0])
{
case 1:
if(keyNum==37)dirArr[0]=3;
if(keyNum==39)dirArr[0]=4;
break;
case 2:
if(keyNum==37)dirArr[0]=3;
if(keyNum==39)dirArr[0]=4;
break;
case 3:
if(keyNum==38)dirArr[0]=2;
if(keyNum==40)dirArr[0]=1;
break;
case 4:
if(keyNum==38)dirArr[0]=2;
if(keyNum==40)dirArr[0]=1;
break;
}
}
}
var setKeyFree=function(){
isKeyDown = false;
}
var updateDir = function(dirArr){
for(i=dirArr.length;i>0;i--)
{
dirArr[i] = dirArr[i-1];
}
}
var testCrash = function(point,indexArr){
for(i=0;i<indexArr.length;i++)
if(point[0]==indexArr[i][0]&&point[1]==indexArr[i][1])
return false;
return true;
}
var initGame = function(){
score = 0;
indexArr=[[20,20],[20,19],[20,18]];
dirArr=[1,1,1];
beanPos = [Math.ceil(Math.random()*39)+1,Math.ceil(Math.random()*39)+1];
while(!testCrash(beanPos,indexArr))
{
beanPos = [Math.ceil(Math.random()*39)+1,Math.ceil(Math.random()*39)+1];
}
drawSnake(indexArr);
window.setTimeout(update,500,indexArr,dirArr);
document.onkeydown=changeDir;
document.onkeyup=setKeyFree;
document.getElementById("startButton").style.visibility = "hidden";
}
window.onload = function(){
initGame();
}
</script>
</head>
<body>
<canvas id="draw" width="400" height="400"></canvas>
<input type="button" value="restart" onclick="initGame()" id="startButton"/>
</body>
</html>