有人可以解释我该怎么做才能在蛇头附近生成新的尾部部分,因为新部分出现在 0/0
var makeAStep = function() {
if (snake.detectCollision(snake.velocity) === true) {
alert("You Loose, what a pity!");
clearInterval(intervalHandler);
return;
}
var lastItemPosition = snake.body[snake.body.length - 1].position.copy();
snake.move();
if (snake.getHead().isOnPosition(food.position)) {
food.updateScore();
generateFood();
snake.body.push(new snakeItem(lastItemPosition));
}
snake.screenUpdate();
我想我必须在这里编辑一些东西:
screenUpdate: function() {
var offset = 0;
var currentNode = null;
for (i in this.body) {
offset = 3 + parseInt(i);
currentNode = $('#box :nth-child(' + offset + ')');
if (currentNode.size() == 0)
$('#box').append($('<div class="snakeItem"></div>'));
currentNode.animate({top: $('#head').height() * this.body[i].position.y + "px"}, duration / 3);
currentNode.animate({left: $('#head').width() * this.body[i].position.x + "px"}, duration / 3);
}
最佳答案
您的问题是您在 snake.screenUpdate()
中使用的 .animate()
函数。例如,如果将它们更改为 .css()
,您将直接看到新项目。当然,这会破坏蛇其余部分的平稳运动,因此您可能希望以不同的方式对待项目,例如:
for (i in this.body) {
offset = 3 + parseInt(i);
currentNode = $('#box :nth-child(' + offset + ')');
if (currentNode.size() == 0) {
$('#box').append($('<div class="snakeItem"></div>'));
currentNode = $('#box :nth-child(' + offset + ')');
currentNode.css({top: $('#head').height() * this.body[i].position.y + "px"}, duration / 3);
currentNode.css({left: $('#head').width() * this.body[i].position.x + "px"}, duration / 3);
} else {
currentNode.animate({top: $('#head').height() * this.body[i].position.y + "px"}, duration / 3);
currentNode.animate({left: $('#head').width() * this.body[i].position.x + "px"}, duration / 3);
}
}
如果我正确理解你的 fiddle ,这应该有效。
关于javascript - 蛇游戏尾部的正确位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22958936/