clearRect nie działa

Question

Robię grę Pong w javascript, aby nauczyć się tworzenia gier, i chcę, aby była zorientowana obiektowo. Nie można uzyskać clearRect do pracy. Wszystko, co robi, to narysować linię, która rośnie dłużej. Oto odpowiedni kod:

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++; 
} 

Próbowałem umieścić ctx.clearRect udział w funkcjach draw() i ball.draw() i to nie działa. Próbowałem również fillRect z białym, ale daje takie same wyniki. Jak mogę to naprawić?

Answer 1

Twój problem z nie zamykasz ścieżki twojego koła.

Dodaj ctx.beginPath() zanim narysujesz okrąg.

jsFiddle.

także kilka wskazówek ...

• Twoje aktywa nie powinien być odpowiedzialny za siebie (rysunek ich metoda draw()). Zamiast tego, może zdefiniuj ich właściwości wizualne (czy to jest okrąg? Promień?) I pozwól swojej głównej funkcji renderowania obsługiwać konkretny rysunek canvas (ma to również tę zaletę, że możesz łatwo zmienić swój renderer na zwykłe elementy DOM lub WebGL) .
• Zamiast setInterval(), użyj requestAnimationFrame(). Obsługa nie jest w tej chwili świetna, więc możesz chcieć zaprezentować jej funkcjonalność za pomocą wzoru setInterval() lub rekurencyjnego setTimeout().
• Twoje wymiary powinny być podane z elementu canvas (lub mieć je zdefiniowane gdzieś). Włączenie ich do funkcji renderowania jest zbliżone do magicznych numerów i może prowadzić do problemu konserwacji w dalszej części ścieżki.