Question

我遇到了问题。我不知道如何编写使蛇体跟随头部的代码我找到了一些解决方案，你必须将尾部从最后一个位置移到阵列中的第一个位置，我认为这里有转移

                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);
        }
        }   /*/

Answer 1

我刚刚建造了这款Super Simple Snake，希望你发现它很有用。

基本上，BODY的其余部分遵循Snake's HEAD假定的最后位置，在头部移动之前保存当前位置。

＆＃13;

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)	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)	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)	this.head.x++; //right
    if(this.direction==2)	this.head.x--; //left
    if(this.direction==3)	this.head.y--; //up
    if(this.direction==4)	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++)	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);

＆＃13;

body{
			overflow: hidden;
			margin:0;
		}
.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;
}

＆＃13;

<div id="board"></div>

＆＃13;

Snake javascript在头后移动矩形

1 个答案: