Есть ли конкретный способ уменьшить скорость анимации без потери целостности холста? - PullRequest
Новая
       25

Есть ли конкретный способ уменьшить скорость анимации без потери целостности холста?

0 голосов
/ 09 мая 2019

Я пытаюсь сгладить анимацию змеи в моем игровом приложении.В настоящее время он находится на сетке 30x30 пикселей.Холст 600х600.Когда я изменяю пиксель на приращение на число, я чувствую, что работает в моей функции направления.

Сбрасывает сетку 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

1 Ответ

0 голосов
/ 09 мая 2019

То, как я справлюсь с этим, - добавить некоторый допуск к той части кода, в которой вы определяете, касается ли змея яблока.

Если вы измените строку 81 на: 

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

Тогда яблоко будет собрано, если змея находится в пределах «пикселя» от яблока.

Другой подход может состоять в том, чтобы позволить пользователю изменять направление движения змеи только тогда, когда он был точно над ней.Блок.Это было бы немного сложнее реализовать.

...