JavaScript Snake游戏

Question

我在移动蛇元素方面遇到了麻烦。我在C＃桌面应用程序中编写了一个Snake游戏，但同样的逻辑在JavaScript中似乎不起作用。

这是我遇到麻烦的部分。基本上我有4个函数只移动Snake的头部（数组的第一个元素），我使用这个代码来移动身体的其他部分。

for (i = snakeBody.length - 1; i > 0 ; i--) {
    context.rect(snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h);
    snakeBody[i]=snakeBody[i-1];
} 

问题在于它们都是彼此重叠的。我无法理解为什么这在JavaScript中不起作用。

以下是整个代码。

window.onload= function ()
{
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    var canvasWidth=window.innerWidth;
    var canvasHeight=window.innerHeight;
    canvas.width=canvasWidth;
    canvas.height=canvasHeight;

    var up=false;
    var down=false;
    var left=false;
    var right=true;

       var snake={
        x:20,
        y:0,
        w:20,
        h:20
    };
    var snakeBody=[];
    for (i = 0; i < 5; i++) {
        snakeBody.push({
        x:snake.x ,
        y:snake.y ,
        w:snake.w,
        h:snake.h
    });
    snake.x +=20;
    }

    var food={
        x:Math.random() * canvasWidth,
        y:Math.random() * canvasHeight,
        w:2,
        h:2
    };

    function moveUp()
    {

            snakeBody[0].y -=3;

    }
    function moveDown()
    {

            snakeBody[0].y +=3;

    }
    function moveLeft()
    {

            snakeBody[0].x -=3;

    }
    function moveRight()
    {

            snakeBody[0].x +=3;


    }
    function draw()
    {
        context.clearRect(0,0,canvasWidth,canvasHeight);
        context.fillStyle="rgba(230,230,230,0.1)";
        context.beginPath();

       for (i = snakeBody.length - 1; i > 0 ; i--) {
           context.rect(snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h);
           snakeBody[i]=snakeBody[i-1];
        }
        //context.rect(food.x,food.y,food.w,food.h);

        context.stroke();
        context.fill();

        directions();
        collision();
        update();
    }
    function directions()
    {
        document.onkeydown = function(e)
        {
           var event = window.event ? window.event : e;
             var keycode = event.keyCode;
            if (keycode===37 && right===false) {
                left=true;
                right=false;
                up=false;
                down=false;
            }
            if (keycode===38 && down===false) {
                up=true;
                down=false;
                left=false;
                right=false;
            }
            if (keycode===39 && left===false) {
                right=true;
                left=false;
                up=false;
                down=false;
            }
            if (keycode===40 && up===false) {
                down=true;
                up=false;
                left=false;
                right=false;
            }
        };
    }
    function update()
    {
        if (up) {moveUp();}
        if (down) {moveDown();}
        if (left) {moveLeft();}
        if (right) {moveRight();}
    }
     function collision()
     {
         for (i = 0; i < snakeBody.length; i++) {
            if (snakeBody[i].x >canvasWidth) {
            snakeBody[i].x  = 0;
        }
        if (snakeBody[i].x < 0) {
            snakeBody[i].x=canvasWidth;
        }
        if (snakeBody[i].y>canvasHeight) {
            snakeBody[i].y=0;
        }
        if (snakeBody[i].y <0) {
            snakeBody[i].y=canvasHeight;
        }
        } 
     }
        setInterval(draw,40);
};

Answer 1

我相信你的问题是你的意思是将snake [i]的值设置为snake [i-1]但你实际上是将snake [i]设置为引用蛇[i-1]。您将所有数组设置为同一个对象。您可以通过执行

来解决此问题

snake[i].x = snake[i-1].x;
snake[i].y = snake[i-1].y;

你还会遇到另一个问题，因为你只是将蛇移动了3而不是它的身体部分的宽度。