javascript - 如何使 元素跟随另一个元素但不在行中？

Question

我正在制作贪吃蛇游戏。我试图让玩家转身，这样它的 body 元素应该跟随头部并且应该在它的头部之后创建。

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

好的。这是蛇，游戏将所有部件都扔进去。头部和 body 部位。

      var pos = 100;
//Snake Grows

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

此函数稍后会在蛇吃掉食物时调用。它在蛇的 body 前创建了一个 block ，但当它转动时它只是垂直移动。是否有 follow() 函数或类似的东西可以使 body 部位通过与头部相同的路径？如果没有任何想法如何解决这个问题？我是编程新手，所以任何建议都会有所帮助。

Answer 1

我有一个 Simple Snake Game我使用 HTML 5 Canvas 玩了一段时间。我认为这会很好地了解如何制作贪吃蛇游戏的想法。

贪吃蛇游戏的运作方式非常类似于您不断添加和删除的数组或 block 。方 block 本身根本不会移动，您只需要知道在哪里放置下一个方 block ，以及在放置新方 block 时移除最后一个方 block 。例如，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.
}

请注意， block 没有移动，我们只是根据我们要去的地方添加一个新 block 。这样，如果用户吃了一些食物，我们需要做的就是不移除 move() 函数的蛇末端的 block 。这是一个可视化图表，其中 U 表示如果我们按住 Up 键:

请注意，不需要移动，这让事情变得更容易，因为您只需要知道在哪里放置下一个方 block 并移除最后一个方 block 。所以看起来它在移动，但实际上没有。

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