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