JS Snake most obvious problems have been solved but the code is too complex welcome error correction

Code compared to the last time to do optimization, solve their own winding problem to solve the problem of food problems and self-winding problem is similar, here do not do code demonstrations, if you are interested, you can reference, self-made

My humble my book, caught dead.

Duration: 6 hours

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js Control Mobile </title>
<script>
Window.onload=function () {

var snake={
Timer:null,
Oevent:null,
Dir:null,
SP:20,
SPEED:300,
num:0,
ODiv:document.getElementById (' tou '),
P:document.getelementsbyclassname (' Lei '),
Update:function () {
Snake.p=document.getelementsbyclassname (' lei ');
},
OBigDiv:document.getElementById (' Lei1 '),
Color:function () {//color separation
for (Var i=1;i<snake.p.length;i++) {
if (i%2==0)
snake.p[i].style.background= ' Red '
}
},
Move:function (oevent) {//Control direction
if (snake.dir== ' left ' &&oevent.keycode==37&&snake.sp>0)
Return
if (snake.dir== ' left ' &&oevent.keycode==39&&snake.sp<0)//control cannot retreat, four cases
Return
if (snake.dir== ' top ' &&oevent.keycode==38&&snake.sp>0)
return;
if (snake.dir== ' top ' &&oevent.keycode==40&&snake.sp<0)
Return

Switch (oevent.keycode) {
Case 97:clearinterval (Snake.timer);
snake.speed=snake.speed-50;
Snake.timer=setinterval (function () {
snake.odiv.style[snake.dir]=snake.odiv.offsetleft+snake.sp+ ' px ';
Snake.follow ();
},snake.speed);
Break
Case 98:clearinterval (Snake.timer); snake.speed=snake.speed+50;
Snake.timer=setinterval (function () {
snake.odiv.style[snake.dir]=snake.odiv.offsetleft+snake.sp+ ' px ';
Snake.follow ();
},snake.speed);
Break
Case 32:clearinterval (Snake.timer);
Case 37:clearinterval (Snake.timer);
Snake.timer=setinterval (function () {
Snake.dir= ' left ';
snake.sp=-20;
snake.odiv.style.left=snake.odiv.offsetleft-20+ ' px ';
Snake.follow ();
},snake.speed); break;
Case 39:clearinterval (Snake.timer);
Snake.timer=setinterval (function () {
Snake.dir= ' left ';
snake.sp=20;
snake.odiv.style.left=snake.odiv.offsetleft+20+ ' px ';
Snake.follow ();
},snake.speed); break;
Case 38:clearinterval (Snake.timer);
Snake.timer=setinterval (function () {
Snake.dir= ' top ';
snake.sp=-20;
snake.odiv.style.top=snake.odiv.offsettop-20+ ' px ';
Snake.follow ();
},snake.speed); break;
Case 40:clearinterval (Snake.timer);
Snake.timer=setinterval (function () {
Snake.dir= ' top ';
snake.sp=20;
snake.odiv.style.top=snake.odiv.offsettop+20+ ' px ';
Snake.follow ();
},snake.speed); break;
}

},
Follow:function () {
snake.p[0].style.left=snake.odiv.offsetleft+ ' px ';
snake.p[0].style.top=snake.odiv.offsettop+ ' px ';
for (Var i=snake.p.length-1;i>0;i--) {
snake.p[i].style.left=snake.p[i-1].offsetleft+ ' px ';
snake.p[i].style.top=snake.p[i-1].offsettop+ ' px ';
}
Snake.death ();
if (snake.odiv.offsetleft>snake.obigdiv.offsetwidth-snake.odiv.offsetwidth) {
Alert (' Game over, eat ' +snake.num+ ' food ');
Clearinterval (Snake.timer);
Document.onkeydown=null;
}
if (snake.odiv.offsetleft<0)
{
Alert (' Game over, eat ' +snake.num+ ' food ');
Clearinterval (Snake.timer);
Document.onkeydown=null;
}
if (snake.odiv.offsettop<0)
{
Alert (' Game over, eat ' +snake.num+ ' food ');
Clearinterval (Snake.timer);
Document.onkeydown=null;
}
if (snake.odiv.offsettop>snake.obigdiv.offsetheight-snake.odiv.offsetheight) {
Alert (' Game over, eat ' +snake.num+ ' food ');
Clearinterval (Snake.timer);
Document.onkeydown=null;
}
if ((snake.odiv.offsetleft==snake.pos.x) && (SNAKE.ODIV.OFFSETTOP==SNAKE.POS.Y)) {
snake.num++;
Snake.eat ();
}
},
pos:{
X:math.round (Math.random () *39) *20,
Y:math.round (Math.random () *39) *20,
},

Food:function () {
var food=document.createelement (' div ');
Food.classname= ' food ';
food.style.left=snake.pos.x+ ' px ';
food.style.top=snake.pos.y+ ' px ';
Snake.oBigDiv.appendChild (food);
},
Eat:function () {//Eat food
var she=document.createelement (' div ');
She.classname= ' lei ';
Snake.oBigDiv.appendChild (She);
Snake.pos.x=math.round (Math.random () *39) *20;
Snake.pos.y=math.round (Math.random () *39) *20;
Snake.oBigDiv.removeChild (snake.oBigDiv.getElementsByClassName (' food ') [0]);
Snake.food ();
},
Death:function () {//Solve self-winding problem
for (Var i=2;i<snake.p.length;i++) {
if (snake.p[i].offsetleft==snake.odiv.offsetleft&&snake.p[i].offsettop==snake.odiv.offsettop) {
Alert ("You are dead!!");
Clearinterval (Snake.timer);
Document.onkeydown=null;
}

}
}
}
Snake.food ();
Document.onkeydown=function (EV) {
var oevent=ev| | Event
Snake.color ();
Snake.oevent=oevent;
Snake.move (snake.oevent);
}
}


</script>
<style>
. food{
Position:absolute;
Background: #FF0;
width:20px;
height:20px;
Float:left;
}
#tou {
width:20px;
height:20px;
Background: #0FF;
Position:absolute;
Float:left;
}
. lei{
width:20px;
height:20px;
Background: #063;
Position:absolute;
Float:left;
}
#lei1 {
border:1px solid #000;
width:798px;
height:798px;
Position:absolute;
top:150px;
left:50px;
}
#text {
Background: #9F3;
width:800px;
height:100px;
Position:absolute;
left:50px;
}
</style>
<body>
<div id= "Text" >
</div>
<div id= "Lei1" >
<div id= "tou" class= "Lei" >1</div>
<div class= "Lei" >2</div>
<div class= "Lei" >3</div>
<div class= "Lei" >4</div>
<div>
</body>

JS Snake most obvious problems have been solved but the code is too complex welcome error correction