JS's little Game "snake"

Snake childhood memories, today just learn this, just do a, is learning it, need to master the knowledge:

The mastery of the 1,JS function,

The application of the 2,JS array,

3,js a small part of Ajax learning

The application of some functions, such as splice, SHIFT, etc. in 4,js,

Basically, here are some of the highlights:

The front-end page, which can be self-layout, I have a layout of my own here:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
   Here is the CSS code: 
 
*{padding:0px; Margin:0px;font-size:12px}body{background: #ccc}input.button{width:60px;cursor:pointer;} #info {width:540px;height:30px;margin:30px auto 5px;line-height:30px;} #score {width:73px;height:28px;padding-left:64px;background:url (./images/score.png) No-repeat;float:left; font-size:14px;font-weight:700;font-style:italic;font-family: ' Microsoft Jas Black ';} #form {float:right;} #form input{vertical-align:middle;margin-right:5px;} #main {width:540px;height:500px;margin:0 auto;position:relative;/*background: #71a000 */} #main div{width:20px; Height:20px;position:absolute;} #main #home {width:500px;height:460px;left:20px;top:20px;position:relative;background:url (./images/ background.jpg) No-repeat;} #main #home Div{position:absolute;} #main Div.wall{width:540px;height:20px;background:url ("./images/div.jpg") Repeat-x;position:absolute;} #main div.top{left:0px;top:0px;} #main div.bottom{left:0px;top:480px;} #main Div.left{width:20px;height:500px;background:url (./images/div.jpg) Repeat-y;left:0px;top:0px;} #main Div.right{width:20px;height:500px;background:url (./images/div.jpg) repeat-y;left:520px;top:0px;}.     L{-moz-transform:rotate (0DEG); -o-transform:rotate (0deg);-webkit-transform:rotate (0deg); transform:rotate (0deg);/* ie8+-must is on one line, Unfortunately */-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (M11=1, m12=0, m21=0, m22=1, sizingmethod= ' Auto      Expand ') ";            /* IE6 and 7 */Filter:progid:DXImageTransform.Microsoft.Matrix (m11=1, m12=0, M21=0, M22=1, sizingmethod= ' auto expand ');     T{-moz-transform:rotate (90DEG);     -o-transform:rotate (90DEG);     -webkit-transform:rotate (90DEG); Transform:rotate (90DEG);/* ie8+-must is on one line, unfortunately */-ms-filter: "PROGID:DXIMAGETRANSFORM.M Icrosoft.      Matrix (m11=-1.8369701987210297e-16, M12=-1, M21=1, m22=-1.8369701987210297e-16, sizingmethod= ' auto expand ') "; /* IE6 and 7 */Filter:progid:DXImageTRansform. Microsoft.matrix (m11=-1.8369701987210297e-16, M12=-1, M21=1, m22=-1.836970198 7210297e-16, sizingmethod= ' auto expand ');}.     R{-moz-transform:rotate (180DEG);     -o-transform:rotate (180DEG);     -webkit-transform:rotate (180DEG); Transform:rotate (180DEG); /* ie8+-must is on the one line, unfortunately */-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (M11=-1, m12=1.224      6467991473532e-16, M21=-1.2246467991473532e-16, m22=-1, sizingmethod= ' auto expand '); /* IE6 and 7 */Filter:progid:DXImageTransform.Microsoft.Matrix (m11=-1, m12=1.2246467991473532e -16, M21=-1.2246467991473532e-16, m22=-1, sizingmethod= ' auto expand ');}.     B{-moz-transform:rotate (270DEG);     -o-transform:rotate (270DEG);     -webkit-transform:rotate (270DEG); Transform:rotate (270DEG);/* ie8+-must is on one line, unfortunately */-ms-filter: "ProgId:DXImageTransform.Microsoft.Matrix (M11=6.123233995736766E-17, M12=1, M21=-1, M22=6.123233995736766E-17,      sizingmethod= ' Auto expand ') "; /* IE6 and 7 */Filter:progid:DXImageTransform.Microsoft.Matrix (M11=6.123233995736766E-17, m12= 1, M21=-1, M22=6.123233995736766E-17, sizingmethod= ' auto expand ');}
JS Public file
var home = $ (' #home '); var snakearr = [];  var direcation = ' l '; var speed = 0;var timer = ";//460/20var rows = 23;var cols = 25;var die = false;//used to determine if game Overvar Food = [];var Sorce = 0;//score Display
First, if you want to have snake, you must create snake,
for (var i=0; i<4; i++) {//var snakediv = document.createelement ("div");//snakediv.style = ' Background:url (./images/ Snake ' + i + '. png no-repeat; '; var snakediv = $ (' <div style= ' Background:url (./images/snake ' + i + '. png) no-repeat;z-index:999 ' ></div> '); Home.append (Snakediv); Snakearr[i] = {r:10, c:10 + i, Div:snakediv, D:direcation};setposition (Snakearr[i]);}
After having a snake, it is natural to move (move):
function Move () {var timer = setinterval (function () {for (var i=snakearr.length-1; i>0; i--) {snakearr[i].c = snakearr[ I-1].C;SNAKEARR[I].R = SNAKEARR[I-1].R;SNAKEARR[I].D = SNAKEARR[I-1].D;} Switch (direcation) {case ' l ': snakearr[0].c--;snakearr[0].d = ' l '; Break;case ' r ': snakearr[0].c++;snakearr[0].d = ' R '; Break;case ' t ': snakearr[0].r--;snakearr[0].d = ' t '; Break;case ' B ': snakearr[0].r++;snakearr[0].d = ' B '; break;} Snake Direction Control $ (window). KeyDown (event) {switch (event.keycode) {case PNS:d irecation = ' l '; Break;case 38: direcation = ' t '; break;case:d irecation = ' R '; break;case:d irecation = ' B '; break;}}); /snake accident//1. Snake Wall if (snakearr[0].c < 0 | | SNAKEARR[0].R < 0 | | snakearr[0].c >= cols | | snakearr[0].r >= rows) {Clearint Erval (timer);d ie = True;alert (' GAME over ');} 2. Snake bumped himself for (Var i=1; i<snakearr.length; i++) {if (snakearr[0].c = snakearr[i].c && SNAKEARR[0].R = = Snakearr [I].R) {clearinterval (timer); die = true; alert (' GAME over ');}} SnakeEat fruit if (snakearr[0].c = = food[0].c && SNAKEARR[0].R = = FOOD[0].R) {food[0].div.css ({background: ' URL (./images/ snake2.png) No-repeat '}), Snakearr.splice (snakearr.length-1, 0, food[0]); Food.shift (); Sorce + = 10;$ (' #score '). HTML ( Sorce);} Snake Produce fruit if (food.length = = 0) {Createfood ();} for (var i = 0; i < snakearr.length; i++) {setposition (snakearr[i]);}},speed);}
The production of food:
function Createfood () {var r = parseint (rows * math.random ()); var C = parseint (cols * math.random ()); var Casrsh = False;//2 The position of a fruit can not be the same while (food.length = = 0) {//To determine the position of snake, cannot collide with Snake for (var i = 0; i < snakearr.length; i++) {if (r = = Snakea RR[I].R && c = = snakearr[i].c) {Casrsh = true;}} When the position does not overlap, produce the fruit if (!casrsh) {var i = parseint (4 * math.random ()); var fooddiv = $ (' <div style= ' Background:url (./images /fruit ' + i + '. png); " ></div> '); Home.append (Fooddiv); Food.push ({r:r, c:c, div:fooddiv}); SetPosition (Food[0]);}}
Another important function is to reset the positioning:
function SetPosition (obj) {obj.div.css ({LEFT:OBJ.C *, TOP:OBJ.R *);  Obj.div.removeClass (). addclass (OBJ.D);} Createfood ();   The page is loaded and the food is displayed!   
About some details of things, tomorrow in the update!
　　　　
JS's little Game "snake"