algorithm - Snake Game in JavaScript: 2 Bugs Occuring -

i have 2 bugs infecting game. here's link have far: http://jaminweb.com/snake.html. use arrow keys control direction of snake.

bugs:

• (1) program doesn't register when snake's head hits food. i'll have move on food several times, different directions, until works; or never works.
• (2) when snake hits food, it's supposed add link end, reason isn't working.

relevant code:

    $(document).keydown(function(e)     {         switch(e.which)         {             case 37: // left arrow key               s.redirect(3);               break;              case 38: // arrow key               s.redirect(4);               break;              case 39: // right arrow key                s.redirect(1)                break;              case 40: // down arrow key                s.redirect(2);                break;              default: return; // exit handler other keys         }         e.preventdefault(); // prevent default action (scroll / move caret)      });          function snakegame(c, c_h, c_w)     {             /* note self: c raphel object. can't find method return height                , width of raphael object in documentation:                 http://raphaeljs.com/reference.html#raphael.                using c_h , c_w now, should change later.             */              this.linksize = 20; // size of snake unit, in pixels              this.food = c.rect(math.floor(math.random() * c_w / 4), math.floor(math.random() * c_h / 4), this.linksize, this.linksize);             this.food.attr("fill","#39275b")              /* on instantiation, snake direction down , has 1 link */             this.dy = this.linksize;             this.dx = 0;             this.link = c.rect(c_h/2, c_w/2, this.linksize, this.linksize);             this.link.attr("fill", "#d7a900");             this.body = [this.link];              /* event listener changing direction of                snake arroy keys on keyboard             */             this.redirect = function(dirnum)             {                 switch (dirnum)                 {                     /*                         dirnum corresponds                         1 ---> right                         2 ---> down                         3 ---> left                         4 --->                     */                     case 1:                          this.dx = this.linksize;                         this.dy = 0;                         break;                      case 2:                         this.dx = 0;                         this.dy = this.linksize;                         break;                      case 3:                         this.dx = -this.linksize;                         this.dy = 0;                         break;                      case 4:                         this.dx = 0;                         this.dy = -this.linksize;                         break;                      default: // never happens                         break;                 }              }             this.move = function()             {                 /*                     ..........                 */                 var temp = this.body[0];                 var bbhead = temp.getbbox();                 if (bbhead.x < 0 || bbhead.x2 > c_w || bbhead.y < 0 || bbhead.y2 > c_h)                 {                     clearinterval(mover);                      alert("you hit wall, idiot!");                     return;                 }                 var bbfood = this.food.getbbox();                 if (this.boxcollision(bbhead, bbfood))                 {                     var f = this.food;                     this.movefood(bbfood);                     this.addlink();                 }                 this.body[0].translate(this.dx, this.dy);                 (var = 1, j = this.body.length; < j; ++i)                 {                     this.body[i] = temp;                     temp = this.body[i];                 }             }              var mover = setinterval(this.move.bind(this), 100);                 this.addlink = function()             {                 var lastbb = this.body[this.body.length-1].getbbox();                 var newlink = c.rect(lastbb.x, lastbb.y, this.linksize, this.linksize);                 this.move;                 this.body.push(newlink);                 newlink.remove();             }              this.movefood = function(bbf)             {                  var tx = math.floor(math.random() * c_w - bbf.x);                  var ty = math.floor(math.random() * c_h - bbf.y);                  (var = 0, j = this.body.length; < j; ++i)                  {                     var thisbb = this.body[i].getbbox();                     if (this.boxcollision(bbf,thisbb))                         this(bff);                  }                  this.food.translate(tx, ty);             }             this.boxcollision = function(a, b)             {                 return a.x >= b.x && a.x <= b.x2 && a.y >= b.y && a.y <= b.y2;             }      } 

which uses http://raphaeljs.com/ library create graphic elements.

i'm particularly troubled (2). here's basic logic have adding link snake:

  var temp = this.body[0];   /* ..... */   this.body[0].translate(this.dx, this.dy); // move head   (var = 1, j = this.body.length; < j; ++i)   {       this.body[i] = temp;       temp = this.body[i];   } 

the intended procedure is:

• set temporary variable equal head of snake.
• move head of snake in direction it's pointed
• move element after head, call element 2, head's previous position. move element 3 element 2's previous position. etcetera.

any insight problem is????