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 (или их определить где-то). Включение их в ваши функции рендеринга сродни магическим числам и может привести к проблеме обслуживания дальше по дорожке.