我在做蛇游戏。我试图使玩家转身,使其主体元素跟随头部,并在头部之后创建。
<!--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/