Js greedy snakes pure-handed code more complicated self-blind bugs more self-made 1.1 points to exclude completely original, js greedy snakes
// Although the code is not easily written by others, this is my own idea. Through this example, I learned a lot and found many shortcomings. I learned it hard, A little greedy snake also contains a lot of things and
// Many problems need to be solved, for example, how to judge whether a snake's head encounters a snake and how to make the food appear on the snake's body?
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JavaScript mobile control </title>
<Script>
Window. onload = function (){
Var snake = {
Timer: null,
OEvent: null,
Dir: null,
Sp: 20,
Velocity: 300,
Num: 0,
ODiv: document. getElementsByClassName ('lei') [0],
P: document. getElementsByClassName ('lei '),
OBigDiv: document. getElementById ('lei1 '),
Color: function () {// color Separation
For (var I = 0; I <snake. p. length; I ++ ){
If (I % 2 = 0)
Snake. p [I]. style. background = 'red'
}
},
Move: function (oEvent) {// control direction
// Alert (snake. oDiv. style [snake. dir]);
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); break;
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 (){
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 ';
}
If (snake. oDiv. offsetLeft> snake. oBigDiv. offsetWidth-snake.oDiv.offsetWidth ){
Alert ('game is over, eat together '+ snake. num + 'food ');
ClearInterval (snake. timer );
Document. onkeydown = null;
}
If (snake. oDiv. offsetLeft <0)
{
Alert ('game is over, eat together '+ snake. num + 'food ');
ClearInterval (snake. timer );
Document. onkeydown = null;
}
If (snake. oDiv. offsetTop <0)
{
Alert ('game is over, eat together '+ snake. num + 'food ');
ClearInterval (snake. timer );
Document. onkeydown = null;
}
If (snake. oDiv. offsetTop> snake. oBigDiv. offsetHeight-snake.oDiv.offsetHeight ){
Alert ('game is over, eat together '+ 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 () {// 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 ();
}
}
Snake. food ();
Document. onkeydown = function (ev ){
Var oEvent = ev | event;
Snake. color ();
Snake. oEvent = oEvent;
Snake. move (snake. oEvent );
}
}
</Script>
</Head>
<Style>
. Food {
Position: absolute;
Background: # FF0;
Width: 20px;
Height: 20px;
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">
<H1> note: the upper and lower sides of the control direction, keypad 1 acceleration, 2 slowdown, space key pause, up and down left and right start casually </Div>
<Div id = "lei1">
<Div class = "lei"> </div>
<Div class = "lei"> </div>
<Div class = "lei"> </div>
<Div class = "lei"> </div>
<Div>
</Body>
</Html>
