«змея» в html5 холсте. Вопрос математической кривой

Question

Демо

Я пытаюсь сделать игру "змея" в формате HTML 5 canvas. Но у меня проблема с тем, чтобы заставить змею двигаться в правильном направлении. Я бы предположил, что следующий код заставит змею двигаться по горизонтали на 0 и 180 градусов, а по вертикали на 90 и 270 градусов, однако это не так. Что я здесь не так делаю? (Используйте стрелки влево и вправо для навигации).

function move(direction) {
    if(direction == left) {
         angel = (angel - 5) % 360;
        if(angel < 0) angel += 360;
    } else if (direction == right) {
        angel = (angel + 5) % 360;
    }
    x = x + Math.floor(Math.cos(angel*0.0174532925)*5);
    y = y + Math.floor(Math.sin(angel*0.0174532925)*5);

    $("#infoBar").html("Direction: " + direction +  " angel: " + angel);

    drawPoint(x,y);
}

Множитель, конечно, градусы к сиянию. Но почему-то 270 градусов не является прямой вертикальной линией, как я бы предположил, что это было. Что я делаю не так?

Файл Javascript.

HTML-файл.

Answer 1

Из-за математики с плавающей точкой.

cos (270 градусов) = 0

Buuuut:

Math.cos((Math.PI/180)*270) не 0. Это: -1.836909530733566e-16

Другими словами, это -0,000000000000000183 и т. Д. Очень близко к нулю, но немного меньше нуля!

Но вы используете Math.floor и Math.floor это число (или Math.floor(-0.1) в этом отношении) = -1.

Вы этого не хотите.

Используйте Math.round вместо Math.floor.

Вот живой пример исправления для вас: http://jsfiddle.net/UtPJz/3/

Answer 2

Я не скомпилировал сегмент кода, но вы могли бы сделать что-то вроде этого:

function move(direction) {
    switch(direction)
    {
        case RIGHT:
            stepX = 1;
            stepY = 0;
            break;
        case LEFT:
            stepX = -1;
            stepY = 0;
            break;
        case UP:
            stepX = 0;
            stepY = -1;
            break;
        case DOWN:
            stepX = 0;
            stepY = 1;
            break;
    }

    x += stepX;
    y += stepY;
    drawPoint(x,y);
}