Snake - the game

After starting the game the motion of the "snake" can be controlled with the arrow up/down/lleft/right keys.

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<form><input type="button" onClick="startGame()" value="start game"></form>
<div id="box" class="jxgbox" style="width:600px; height:600px; overflow:hidden; "></div>
<script type="text/javascript">

    var board = JXG.JSXGraph.initBoard('box',{originX:0,originY:600,unitX:30,unitY:30,grid:true});
var snake = {
points : [[10,11],[10,10]],
dir : [1,0],
size: 2,
newSize: 2,
speed: 300,
hitSelf: function(x,y) {
for (var i=0;i<this.size-1;i++) {
if (x==this.points[0][i]) if (y==this.points[1][i]) { return true; }
}
return false;
}
}
var curve = board.createElement('curve', snake.points , {strokeWidth:20,strokeOpacity:0.5});
var point = board.createElement('point', [
Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1],
{strokeColor:'#ff0000',strokeWidth:10,name:' '});
var t = board.createElement('text', [2,1,function() { return snake.size; }]);

var setRandomPosition = function()  {
point.setPositionDirectly(JXG.COORDS_BY_USER,
Math.round(Math.random()*18)+1,
Math.round(Math.random()*18)+1);
}
var keyDown = function (Evt) {
var code;
if (!Evt) Evt = window.event;
if (Evt.which) {
code = Evt.which;
} else if (Evt.keyCode) {
code = Ereignis.keyCode;
}
// 37: left,  38: up,  39: right,  40: down
if (code==37) { snake.dir = [-1,0]; return false;}
else if (code==38) { snake.dir = [0,1]; return false;}
else if (code==39) { snake.dir = [1,0]; return false;}
else if (code==40) { snake.dir = [0,-1]; return false;}
return true;
}
document.onkeydown = keyDown;

var crawl = function() {
if (snake.size>=snake.newSize) {
snake.points[0].shift();
snake.points[1].shift();
}
var x = snake.points[0][snake.points[0].length-1]+snake.dir[0];
snake.points[0].push(x);
var y = snake.points[1][snake.points[1].length-1]+snake.dir[1];
snake.points[1].push(y);
snake.size = snake.points[0].length;
board.update();
if (x>=20 || x<=0 || y>=20 || y<=0 || snake.hitSelf(x,y)) {
} else {
if (x==point.X()) if (y==point.Y()) {
snake.newSize += 5;
snake.speed -= 10;
setRandomPosition();
board.update();
}
setTimeout(crawl,snake.speed);
}
}

var startGame = function () {
snake.points[0].splice(0,snake.size,10,11);
snake.points[1].splice(0,snake.size,10,10);
snake.dir = [1,0];
snake.size = 2;
snake.newSize = 2;
snake.speed = 300;
setRandomPosition();
crawl();
}

</script>