2016-12-01 79 views
0

我得到了问题。我不知道怎么写,使蛇体跟随头 我找到了一些解决方案,你必须尾部从最后转移到阵列摆在首位的代码,我想在这里做的移蛇javascript后移动矩形

   var sth = Game.snake.tail.pop(); 
       Game.snake.tail.unshift(sth); 

但我真的不知道它给了我什么。如果有人能够解释这种转变的想法,并像白痴一样移动,我会非常高兴:)这是整个蛇的功能。

  function Snake(){ 
        this.x = 0; 
        this.y = 0; 
        this.points = {}; 
        this.a = 0; 
        this.long = 4; 
        this.tail = []; 
        this.xspeed = 1; 
        this.yspeed = 1; 

      } 
       Snake.prototype.update = function(){ 
        for (i=1; i<=Game.snake.long; i++){ 
        var num = i*20; 
        Game.snake.tail.push({x:num, y:0}); 
        //Game.snake.tail[i] = Game.snake.tail[i+1]; 

       } 


     } 
       Snake.prototype.draw = function(){ 

       var sth = Game.snake.tail.pop(); 
       Game.snake.tail.unshift(sth); 

       console.log(sth); 


       /*/console.log(Game.snake.tail); 
       Game.snake.unshift(Game.snake.tail); 
       console.log(Game.snake.tail);/*/ 
       //Game.snake.tail[i] = Game.snake.tail[i+1]; 
       for (i=0; i<=Game.snake.long-1; i++){ 
       //Game.snake.tail[i] = Game.snake.tail[i+1]; 
       Game.ctx.beginPath(); 
       Game.ctx.rect(Game.snake.tail[i].x,Game.snake.tail[i].y,VAR.scale,VAR.scale); 
       Game.ctx.stroke(); 


       if (Game.key_39) {Game.snake.tail[i].x = Game.snake.tail[i].x+Game.snake.xspeed*VAR.scale;} 
       else if (Game.key_37) {Game.snake.tail[i].x = Game.snake.tail[i].x-Game.snake.xspeed*VAR.scale;} 
       else if (Game.key_38) {Game.snake.tail[i].y = Game.snake.tail[i].y-Game.snake.yspeed*VAR.scale;} 
       else if (Game.key_40) {Game.snake.tail[i].y = Game.snake.tail[i].y+Game.snake.yspeed*VAR.scale;} 
      } 
     } 

     /*/function eat(){ 
     if (Game.food.x === Game.snake.x && Game.food.y === Game.snake.y){ 
      VAR.count = 300; 
      Game.snake.long++; 
      Game.snake.tail.push({x:0, y:0}); 
      console.log(Game.snake.tail); 
     } 
     } /*/ 

回答

0

前段时间我建立了这个超简单蛇,希望你觉得它有用。

基本上身体的其余部分遵循Snake的HEAD假定的最后位置,保存头部移动前的当前位置。

var Xscale = Math.floor(500/16); 
 
var Yscale = Math.floor(500/16); 
 
var animation_speed = 65; 
 

 
for(var y = 0; y<=Yscale; y++){ 
 
    for(var x = 0; x<=Xscale; x++){ 
 
    var tile = document.createElement('div'); 
 
    if(x==0) tile.className="tile clear"; 
 
    else tile.className="tile"; 
 
    tile.setAttribute('data-x', x); 
 
    tile.setAttribute('data-y', y); 
 
    document.getElementById('board').appendChild(tile); 
 
    } 
 
} 
 

 
function _(element){ 
 
    return new function(el){ 
 
    this.el = el; 
 
    this.hasClass=function(className){ 
 
     var classes = this.el.className.split(' '); 
 
     var found = false; 
 
     for(var c in classes) \t if(className==classes[c]) found=true; 
 
     return found; 
 
    } 
 
    this.addClass=function(className){ 
 
     if(!this.hasClass(className)) this.el.className = this.el.className + " "+className; 
 
     return this; 
 
    } 
 
    this.removeClass=function(className){ 
 
     if(this.hasClass(className)){ 
 
     var tmpClasses=[]; 
 
     var classes = this.el.className.split(' '); 
 
     for(var c in classes) \t if(className!=classes[c]) tmpClasses.push(classes[c]); 
 
     if(tmpClasses.length) this.el.className=tmpClasses.join(' '); 
 
     } 
 
     return this; 
 
    } 
 
    return this; 
 
    }(element); 
 
} 
 

 
Snake = (new function(X , Y){ 
 
    this.direction = 1; /*1-right 2-left 3-up 4-down*/ 
 
    this.pause = false; 
 
    this.head = { 
 
    x: X, 
 
    y: Y 
 
    }; 
 
    this.body = { 
 
    parts : [{x: this.head.x-1, y: this.head.y}] 
 
    }; 
 
    this.findPart=function(x, y){ 
 
    return document.querySelector('.tile[data-x="'+x+'"][data-y="'+y+'"]'); 
 
    } 
 
    this.draw=function(){ 
 
    var head = this.findPart(this.head.x, this.head.y); 
 
    _(head).addClass('snake').addClass('head'); 
 
    for(var b in this.body.parts){ 
 
     var bpart = this.findPart(this.body.parts[b].x, this.body.parts[b].y); 
 
     _(bpart).addClass('snake').addClass('body'); 
 
    } 
 
    } 
 
    this.move = function(){ 
 
    if(this.pause) return; 
 
    var head = this.findPart(this.head.x, this.head.y); 
 
    _(head).removeClass('snake').removeClass('head'); 
 
    var prev={x:0, y:0}; 
 
    for(var b in this.body.parts){ 
 
     var bpart = this.findPart(this.body.parts[b].x, this.body.parts[b].y); 
 
     var tmpx=this.body.parts[b].x; 
 
     var tmpy=this.body.parts[b].y; 
 
     _(bpart).removeClass('snake').removeClass('body'); 
 

 
     this.body.parts[b].x=b>0?prev.x:this.head.x; 
 
     this.body.parts[b].y=b>0?prev.y:this.head.y; 
 

 
     prev.x=tmpx; 
 
     prev.y=tmpy; 
 
    } 
 

 
    if(this.direction==1) \t this.head.x++; //right 
 
    if(this.direction==2) \t this.head.x--; //left 
 
    if(this.direction==3) \t this.head.y--; //up 
 
    if(this.direction==4) \t this.head.y++; //down 
 

 
    if(this.head.x >Xscale) this.head.x = 0; 
 
    if(this.head.x<0) this.head.x = Xscale; 
 
    if(this.head.y >Yscale) this.head.y = 0; 
 
    if(this.head.y<0) this.head.y = Yscale; 
 

 
    /*food check*/ 
 
    var tile = this.findPart(this.head.x, this.head.y); 
 
    if(_(tile).hasClass('snake') && _(tile).hasClass('food')){ 
 
     _(tile).removeClass('food'); 
 
     this.grow(); 
 
     this.placeFood(); 
 
    } 
 
    this.draw(); 
 
    } 
 

 
    this.grow=function(by){ 
 
    var by = by; 
 
    if(by==undefined) by=1 
 
    for(var grow=0; grow<by;grow++) \t this.body.parts.push(JSON.parse(JSON.stringify(this.body.parts[this.body.parts.length-1]))); 
 
    } 
 
    this.placeFood=function(){ 
 
    var food = _(this.findPart(Math.floor(((Math.random()*Xscale))), Math.floor(((Math.random()*Yscale))))).addClass('snake').addClass('food'); 
 
    return this; 
 
    } 
 
    this.setHandlerDirection=function(dir, evt){ 
 
    if(evt!=undefined) evt.preventDefault(); 
 
    if(dir==undefined) return this; 
 
    this.direction=dir; 
 
    } 
 

 
    this.setHandlerPause=function(evt){ 
 
    if(evt!=undefined) evt.preventDefault(); 
 
    this.pause=!this.pause; 
 
    } 
 
    return this; 
 
}(3,1)).placeFood(); 
 

 
/*HANDLER*/ 
 
document.body.addEventListener('keydown', function(evt){ 
 
    var key = evt.keyCode || evt.which; 
 
    if(key == 39) Snake.setHandlerDirection(1); //right 
 
    if(key == 37) Snake.setHandlerDirection(2); //left 
 
    if(key == 40) Snake.setHandlerDirection(4); //down 
 
    if(key == 38) Snake.setHandlerDirection(3); //up 
 
    if(key == 32) Snake.setHandlerPause(evt); //pause 
 
}); 
 

 
setInterval(function(){ 
 
    Snake.move(); 
 
},animation_speed);
body{ 
 
\t \t \t overflow: hidden; 
 
\t \t \t margin:0; 
 
\t \t } 
 
.tile{ 
 
    width:14px; 
 
    height:14px; 
 
    background-color:lightgray; 
 
    float: left; 
 
} 
 
.clear{ 
 
    clear: left; 
 
} 
 
.snake.head{ 
 
    background-color:dimgrey; 
 
} 
 
.snake.body{ 
 
    background-color:#a2a2a2; 
 
} 
 
.snake.food{ 
 
    background-color:yellow; 
 
}
<div id="board"></div>