Question

我正在尝试在我的蛇游戏应用程序中平滑蛇的动画。当前位于30x30像素网格上。画布是600x600。当我将标记为像素的增量更改为一个数字时，我感觉可以在我的方向函数中使用。

它将抛出30x30的网格，并沿着实现的新整数移动。因此，使苹果在移动时不会被吃掉。

//sets the starting pixel for the snake & food
let pixel = 30;

 //moves snake according to which direction the user initiates
    if (snakeDirection == "LEFT") snakeX -= pixel;
    if (snakeDirection == "UP") snakeY -= pixel;
    if (snakeDirection == "RIGHT") snakeX += pixel;
    if (snakeDirection == "DOWN") snakeY += pixel;

当它更改为此：

//moves snake according to which direction the user initiates
    if (snakeDirection == "LEFT") snakeX -= 5;
    if (snakeDirection == "UP") snakeY -= 5;
    if (snakeDirection == "RIGHT") snakeX += 5;
    if (snakeDirection == "DOWN") snakeY += 5;

它使蛇移动到我想要的速度，但将其扔出网格。

我正在画蛇在for循环中调用数组以增加大小：

//draws snake
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i == 0) ? "red" : "white";
        ctx.fillRect(snake[i].x, snake[i].y +4.66, pixel, pixel);

        ctx.strokeStyle = (i ==0) ? "white" : "black";
        ctx.strokeRect(snake[i].x, snake[i].y +4.66, pixel, pixel);
    }

我的蛇阵列设置如下：

//creates snake array
let snake = [];
snake[0] = {
    x: 15 * pixel,
    y: 16 * pixel
}

这是我的GitHub链接https://github.com/George-Jindo/js-snake-game

Answer 1

我要解决的方法是在代码部分中增加一些容忍度，以便确定蛇是否在碰苹果。

如果将第81行更改为：

if (Math.abs(snakeX - apple.x) < pixel && Math.abs(snakeY - apple.y) < pixel) {

如果蛇在苹果的“像素”以内，则将收集苹果。

另一种方法是仅允许用户更改蛇正好在一个街区上时蛇的移动方向。这将很难实施。

是否有一种特定的方法来降低动画速度而不丢失画布的完整性？

1 个答案: