Question

我正在尝试用JavaScript创建一个简单的蛇游戏，到目前为止一直很好，我有一个有效的代码，但有一个我想删除的行为。

以下是我的JavaScript代码

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()

行为在switch语句中，当我将此first_x或first_y递增1时，由于自身的直接覆盖，它们变得太小，但是当我将它们递增10时，蛇太快了，我希望蛇是全长的（就像增加10点一样）但速度要慢得多。

我该如何解决？ Here是一个演示（默认方向是右=增加1.其他增加10，检查长度和速度的差异）

Answer 1

您的比例（10x10）和您的坐标不一致。您的位置最终看起来像（1,1），（1,2）等，但是当您在该位置绘制一个10x10的正方形时，会出现大量重叠。

使用上下文保存，恢复和缩放来修复此问题 - 或者您可以更改坐标系。

以下是一个例子：

在顶部，定义变量时：

rails 4.2.4

在你的绘画功能中：

 var width = 1;
 var height = 1;

我得到了你使用它提供的小提琴。干杯！

编辑：

经过一段时间的磨练后，我得到的主要是让链中的每个元素都有自己的方向，然后将开关移动到foreach中。可悲的是，我在事故中刷新了页面并丢失了小提琴，但这并没有太大的修改。

基本上，它们重叠的原因是因为每个单元都没有移动 - 你正在“越过”尾部以保持向前移动 - 所以平滑移动意味着移动少于完整网格单元的价值，这会导致重叠。

删除重叠意味着每个刻度线移动一个完整的网格单元，这意味着移动非常快。因此，您需要为每个刻度移动少于一个完整的网格单元，对于数组中的每个元素

ALSO：

请勿像上面建议的评论一样使用setTimeout（）。使用requestAnimationFrame，如果您想使用交错的更新设置，只有在更新之间的时间超过某个时间增量时才调用您的更新。

Answer 2

使用传递给swag的参数：

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

我会说，我更喜欢vyross解决方案。它会看起来更好，但这是对你的问题更直接的答案。

蛇javascript游戏的速度

2 个答案: