JS write "Greedy snake" small game _javascript Skills

Greedy snake childhood memories, today just learn to this, just do one, but also learn it, need to grasp the knowledge:

1, JS function of the master,

2, JS array of applications,

3, JS small part of the learning of Ajax

4, JS in the splice, shift and other functions of the application,

Basically, here's the key part:
The front end of the page, here can be self layout, and I provide 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 Ya-hei ';
  } #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, M2   
  1=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.MiCrosoft.   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.8369701987210297e-16, sizingmethod= ' auto expand ');   }. r{-moz-transform:rotate (180DEG);   -o-transform:rotate (180DEG);   -webkit-transform:rotate (180DEG);
   Transform:rotate (180DEG); /* ie8+-must is on one line, unfortunately * *-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (M11=-1, m12=1.22464   67991473532e-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.1232339957367   66E-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 files

var home = $ (' #home ');
  var snakearr = [];
  var direcation = ' l ';
  var speed = 0;
  var timer = ';
  460/20
  var rows = n;
  var cols =;
  var die = false;      Used to determine whether game over
  var food = [];
  var sorce = 0;       The display of the score
 

First of all, to have snake 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>"; C18/>home.append (snakediv);
    Snakearr[i] = {r:10, c:10 + i, Div:snakediv, d:direcation};
    SetPosition (Snakearr[i]); 
  

After a snake, nature is moved:

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 (function (event) {switch (event.keycode) {case 37:direc
          ation = ' l ';
 
        Break
          Case 38:direcation = ' t ';
 
        Break
          Case 39:direcation = ' R ';
 
        Break
          Case 40:direcation = ' B ';
      Break
 
      }
    });
    Snake accident  1.
          Snake Wall if (snakearr[0].c < 0 | | SNAKEARR[0].R < 0 | | snakearr[0].c >= cols | | snakearr[0].r >= rows) {
          Clearinterval (timer);
          Die = true;
      Alert (' GAME over '); }//2. Snake hit 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 '); }//snake Eat 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 produces 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 fruits can not appear in the same position
    while (food.length = = 0) {
      //Judge snake position, cannot collide with Snake for
      (var i = 0; i < snakearr.length; i++ {
        if (r = = SNAKEARR[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 location:

function SetPosition (obj) {
    obj.div.css ({LEFT:OBJ.C *, TOP:OBJ.R *}); 
    Obj.div.removeClass (). addclass (OBJ.D);
  Createfood ();  

I hope this article will help you learn about JavaScript programming.