JavaScript Snake游戏

Question

I am having trouble with the moving of the snake elements. I have written a Snake game in C# desktop application but it the same logic doesn't seem to work in JavaScript.

Here is the part that I am having trouble with. Basically I have 4 functions that only moves the head of the Snake (the first element of the array) and I use this code to move the other parts of the body.

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];
} 

The problem is that they all clump on top of each other. I can't understand why this doesn't work in JavaScript.

Here is the entire code.

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

I believe your issue is that you mean to set the value of snake[i] to snake[i-1] but you're actually setting snake[i] to a reference of snake[i-1]. You're setting all your array to the be the same object. You can fix this by doing

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

You'll also encounter another problem as you're only moving the snake by 3 instead of the width of its body segments.