如何使<div>元素跟随另一个但不在行中？</div>

Question

我正在制作蛇游戏。我试图让玩家转动所以它的身体元素应该跟随头部并且应该在它的头部之后创建。

<!--Player-->
<div class="snake"></div>

确定。这是蛇，游戏将所有部分扔进去。头部和身体部位。

      var pos = 100;
//Snake Grows

    var grow = function() {
        $('<div></div>').addClass('body').prependTo('.snake').css('left', pos * score * 1.1 +'%');
    }

蛇吃食物后会调用此功能。它创造了一个前置于蛇身体的块，但当它转动时它只是垂直移动。是否有跟随（）函数或类似的东西会使身体部位通过与头部相同的路径？如果没有任何想法如何解决这个问题？我是编程的新手，所以任何建议都会有所帮助。

Answer 1

我有一个Simple Snake Game我使用HTML 5 Canvas做了一段时间以获得乐趣。我认为看看如何制作蛇游戏的想法会很好。

蛇游戏的工作方式非常类似于您经常添加和删除的数组或块。块本身根本不移动，你只需要知道下一个块的放置位置，当你放置一个新块时删除最后一个块。例如，this.snake是一个数组：

// dirX and dirY would be where the next block should go
this.move = function(dirX,dirY) {
    if(!this.checkPower()) this.snake.splice(0, 1); // remove first only if did not get powerup.
    var newX = this.snake[this.snake.length-1].x+dirX;
    var newY = this.snake[this.snake.length-1].y+dirY;
    this.snake.push(new Node(newX, newY)); // Add new node to last, pos based on direction.
}

请注意，块没有移动，我们只是根据我们的去向添加一个新块。这样，如果用户吃了一些食物，我们需要做的就是不去除蛇末端的move()功能块。这是一个可视化图表U如果我们持有Up key：

，那将意味着什么

请注意，不需要移动，这会使事情变得更容易，因为您只需要知道下一个块的放置位置并删除最后一个块。所以看起来它正在移动，但事实并非如此。

虽然这使用HTML 5 Canvas，但同样的想法可以应用于CSS或HTML中以用于视觉效果。

Answer 2

在进入那里之前，检查最后一个蛇块的位置是否有块。这就是所有块应该进行的操作 - 进入最后一个块的位置。