Javascript 我如何在蛇身中分离div（snake JS游戏）

发现编写JS游戏（Snake）时出现问题。无法在蛇身上分离div。现在我发现蛇身的几个部分在一个方向上移动，但在另一个方向上移动（左上方的位置对每个块都更新相同）。我想把它们像蛇一样分开，但不知道怎么做。有人能给点建议吗？ 以下是我的js代码（仅适用于chrome）：

这是代码笔

---

提前谢谢。

也许这将有助于您分离蛇中的div

（顺便说一句，我用过jQuery）

我所做的是为每个身体添加一个

div

，并给它们相同的

宽度

，

高度

，

位置

等

然后我有一个移动函数，它以1秒的设置间隔被调用。 它在我身上所有的

div

中循环。

if（$（this）.index（）==0）{

仅用于第一个实体块。所有其他实体块都位于第一个实体块所在的位置

单击其中一个箭头键时，

xdir

和

ydir

会得到更新

    var speed = 10;
    var xdir = 0;
    var ydir = 1;

function handle_movement(){

    // Loop trough body divs
    $('div.body').each(function(){
        // Get x and y position
        var x = parseInt($(this).css('left'));
        var y = parseInt($(this).css('top'));

        // Only move the first div in the right direction
        if($(this).index() == 0){
            $(this).css({'left': x + (xdir * speed) + 'px','top': y + (ydir * speed) + 'px'});
        } else {
            // All other divs follow their previous sibling
            var prevleft = $(this).prev('.body').data('left');
            var prevtop = $(this).prev('.body').data('top');
            $(this).css({'left':prevleft, 'top':prevtop});
        }
        // Keep track of where the body has gone
        $(this).data({'left':x, 'top':y}).show();
    });
}

希望它有意义

---

查看我的。

我尝试了所有可能的键，但蛇没有移动。它真的可以工作吗？它可以工作，按任何箭头键。也许你首先需要单击字段，窗口接收焦点，然后按箭头键。它只给出

引用错误：事件在firebug中没有定义。你有向主体添加新div的代码吗？你能做什么d要做的是在你的身体上添加div，并且只对第一个div进行动画制作。当你移动时，你会将每个div设置在移动前的div所在的位置。这有意义吗？请在这里尝试，它在chrome中工作，也许你在firefox中尝试过？
    var speed = 10;
    var xdir = 0;
    var ydir = 1;

function handle_movement(){

    // Loop trough body divs
    $('div.body').each(function(){
        // Get x and y position
        var x = parseInt($(this).css('left'));
        var y = parseInt($(this).css('top'));

        // Only move the first div in the right direction
        if($(this).index() == 0){
            $(this).css({'left': x + (xdir * speed) + 'px','top': y + (ydir * speed) + 'px'});
        } else {
            // All other divs follow their previous sibling
            var prevleft = $(this).prev('.body').data('left');
            var prevtop = $(this).prev('.body').data('top');
            $(this).css({'left':prevleft, 'top':prevtop});
        }
        // Keep track of where the body has gone
        $(this).data({'left':x, 'top':y}).show();
    });
}