ClearRect не работает

Я делаю игру Pong в javascript, чтобы научиться делать игры, и я хочу сделать ее объектно-ориентированной.

Я не могу заставить clearRect работать. Все, что он делает, это рисовать линию, которая растет дольше. Вот соответствующий код:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
        ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
        ctx.fillStyle = '#00ff00';
        ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    player.draw();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

Я попытался поместить часть ctx.clearRect в функции draw() и ball.draw(), и она не работает. Я также пробовал fillRect с белым, но он дает те же результаты. Как я могу это исправить?

Ответы

Ответ 1

Ваша настоящая проблема заключается в том, что вы не закрываете свой круг.

Добавьте ctx.beginPath(), прежде чем рисовать круг.

jsFiddle.

Кроме того, некоторые советы...

  • Ваши активы не должны нести ответственность за рисование (метод draw()). Вместо этого, возможно, определите их визуальные свойства (это круг? Радиус?) И пусть ваша основная функция рендеринга обрабатывает конкретный рисунок canvas (это также имеет то преимущество, что вы можете переключать рендеринг на обычные элементы DOM или WebGL дальше по дорожке легко).
  • Вместо setInterval() используйте requestAnimationFrame(). В настоящий момент поддержка не такая уж большая, поэтому вы можете подделать ее функциональность с помощью setInterval() или рекурсивного шаблона setTimeout().
  • В вашем clearRect() должны быть указаны размеры из элемента canvas (или их определить где-то). Включение их в ваши функции рендеринга сродни магическим числам и может привести к проблеме обслуживания дальше по дорожке.