蛇javascript游戏的速度

Question

I'm trying to create a simple snake game in JavaScript, so far so good, I have a code that works but there is a behavior I would like to remove.

Following is my JavaScript code

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var width = 10;
var height = 10;
var direction="right";
var snake = {
    length: 5,
    array_length: [],

    draw: function () {
        ctx.clearRect(0,0,W,H);
        this.array_length.forEach(function (x) {
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.fillRect(x.x, x.y, width, height);
        });
        this.update();
    },
    update: function () {
        var first = this.array_length[0];
        var first_x = first.x;
        var first_y = first.y;


        switch (direction) {

            case "right":
                first_x++;
                break;
            case "left":
                first_x-=10;
                break;
            case "up":
                first_y-=10;
                break;
            case "down":
                first_y+=10;
                break;

        }
        var lasat=this.array_length.pop();
       // lasat.x=first_x;
       //lasat.y=first_y;
        this.array_length.unshift({
            x: first_x,
            y: first_y
        });


    },
    update_direction: function (e) {

        var key = e.keyCode;

        if (key == "37" && direction != "right") direction = "left";
        else if (key == "38" && direction != "down")direction = "up";
        else if (key == "39" && direction != "left") direction = "right";
        else if (key == "40" && direction != "up")direction = "down";
       //alert(direction);
    }
};

for (var i = snake.length; i >= 0; i--) {
    snake.array_length.push({
        x: i * width,
        y: 0
    });
}
window.onkeydown=snake.update_direction;
function swag(){
window.requestAnimationFrame(swag);
    snake.draw();
}
swag()

The behavior is in switch statement, when I increment the this first_x or first_y by 1, they became too small due to rect overcovering themselves, but when I increment them by 10, the snake is going too fast, I would like the snake to be at full length (like as incrementing by 10) but much slower.

How can I fix it? Here is a demo (default direction is right = incremented by 1. Others are incremented by 10, check the difference in length and speed)

Answer 1

Your scale (10x10) and your coordinates don't agree. Your positions end up looking like (1,1), (1,2), etc, but when you draw a 10x10 square in that location you get massive overlap.

Use context save, restore, and scale to fix this - or you can change your coordinate system.

Here's an example:

At the top, when you define your variables:

 var width = 1;
 var height = 1;

In your draw function:

ctx.clearRect(0,0,W,H);
ctx.save();
ctx.scale(10,10);
this.array_length.forEach(function (x) {
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.fillRect(x.x, x.y, width, height);
});
ctx.restore();
this.update();

I got the fiddle you provided working using that. Cheers!

EDIT:

After a bit of mucking around with it, I got it mostly working by having each element in the chain have it's own direction, and then moving the switch for movement into a foreach. Sadly, I refreshed the page on accident and lost the fiddle, but it wasn't much of a modification.

Basically, the reason why they're overlapping is because each cell isn't moving - you're "leapfrogging" the tail to keep it moving forward - so smooth movement means moving less than a full grid cell's worth, which causes overlap.

Removing that overlap means moving by a full grid cell each tick, which means moving extremely quickly. So, you need to move by less than a full grid cell each tick, for each element in the array

ALSO:

DO NOT use setTimeout() like the comment above suggested. Use requestAnimationFrame, and if you want to use a staggered update setup, only call your update if your time between updates exceeds some time delta.

Answer 2

Use the parameter being passed to swag:

var lasttime=0;
function swag(time){
    window.requestAnimationFrame(swag);
    if (time - lasttime > 200) {
        snake.draw();
        lasttime = time;
    }
}
window.requestAnimationFrame(swag);

I will say, I like vyross solution better. It will look better, but this is a more direct answer to your question.