Ich mache ein Pong-Spiel in Javascript, um das Erstellen von Spielen zu lernen, und ich möchte es objektorientiert machen.
Ich kann nicht clearRect
arbeiten. Es zeichnet lediglich eine Linie, die länger wird. Hier der entsprechende Code:
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++;
}
Ich habe versucht, die zu setzen ctx.clearRect
Teil in der draw()
und ball.draw()
funktioniert und es funktioniert nicht. Ich habe es auch versucht fillRect
mit Weiß, aber es gibt die gleichen Ergebnisse. Wie kann ich das beheben?
Dein Real Das Problem ist, dass Sie den Pfad Ihres Kreises nicht schließen.
Addieren ctx.beginPath()
bevor du den Kreis zeichnest.
jsFiddle.
Außerdem ein paar Tipps…
- Ihr Vermögen sollte nicht dafür verantwortlich sein, sich selbst zu zeichnen (ihre
draw()
Methode). Definieren Sie stattdessen vielleicht ihre visuellen Eigenschaften (ist es ein Kreis? Radius?) Und überlassen Sie es Ihrer Hauptrenderfunktion canvas
bestimmte Zeichnung (dies hat auch den Vorteil, dass Sie Ihren Renderer später problemlos auf reguläre DOM-Elemente oder WebGL umstellen können).
- Anstatt
setInterval()
verwenden requestAnimationFrame()
. Der Support ist im Moment nicht so toll, also möchten Sie vielleicht seine Funktionalität mit Shim versehen setInterval()
oder rekursiv setTimeout()
Muster.
- Dein
clearRect()
sollten die Maße aus dem übergeben werden canvas
-Element (oder irgendwo definiert haben). Sie in Ihre Rendering-Funktionen einzubeziehen ist vergleichbar mit magische Zahlen und könnte später zu einem Wartungsproblem führen.
Können Sie dies auf jsFiddle einrichten, um dies zu erklären Zeichne eine Linie, die länger wird?
– Alex
16. März 2012 um 19:02 Uhr
Ich habe es früher versucht und konnte es dort nicht zum Laufen bringen, ich werde es noch einmal versuchen.
– nur ein weiterer Hobbyist
16. März 2012 um 19:04 Uhr
Ich weiß nicht, wie man JSFiddle benutzt, nichts aus dem Javascript-Stück wird enthalten. Ich habe den Code trotzdem dort gespeichert, vielleicht können Sie ihn zum Laufen bringen: jsfiddle.net/hustlerinc/25qWe
– nur ein weiterer Hobbyist
16. März 2012 um 19:08 Uhr