我在做蛇游戏。我试图使玩家转身,使其主体元素跟随头部,并在头部之后创建。

<!--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 +'%');
    }


稍后蛇吃食物时将调用此功能。它会在蛇的身体上形成一个块,但是当它旋转时,它只会垂直移动。是否有follow()函数或类似的东西会使身体部位与头部经过相同的路径?如果没有任何想法如何解决呢?我是编程的新手,所以任何建议都将对您有所帮助。

最佳答案

我有一阵子用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中用于视觉效果。

关于javascript - 如何使<div>元素跟随另一个但不在行中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27806415/

10-12 12:39
查看更多