Ich habe ein Projekt, bei dem Elemente (mit this.context.drawImage()) auf ein Canvas gezeichnet werden sollen.
Das Zeichnen funktioniert, aber die Positionierung kriege ich nicht hin.
Ich erstelle ein Array mit acht Elementen, wobei jedes Element einer Instanz meiner Obstacle-Klasse entspricht. Diese Klasse hat (unter anderem die Eigenschaften 'x' (x-Koordinate) und 'y' (y-Koordinate) sowie 'height' und 'width'. Die Koordinaten werden in de Funktion 'setCoordinates()', welche im Konstruktor aufgerufen wird, zufällig generiert. Ich möchte, dass die Elemente so positioniert werden, dass sowohl vertikal, als auch horizontal in der Mitte des Canvas ein Streifen frei bleibt.
Es gibt lange Elemente (width = 225, height = 30) und hohe Elemente (width = 30, height = 225).
Meine Idee ist, die Funktion 'setCoordinates()' für jedes Element so lange aufzurufen, bis sie ausserhalb der freien Zone liegen.
Folgenden Code habe ich ersonnen:
Leider werden aber nach wie vor Elemente innerhalb der freien Zone gezeichnet. Wo liegt mein Fehler?
Edit: this.width ist die Breite des Canvas und this.height dessen Höhe
Das Zeichnen funktioniert, aber die Positionierung kriege ich nicht hin.
Ich erstelle ein Array mit acht Elementen, wobei jedes Element einer Instanz meiner Obstacle-Klasse entspricht. Diese Klasse hat (unter anderem die Eigenschaften 'x' (x-Koordinate) und 'y' (y-Koordinate) sowie 'height' und 'width'. Die Koordinaten werden in de Funktion 'setCoordinates()', welche im Konstruktor aufgerufen wird, zufällig generiert. Ich möchte, dass die Elemente so positioniert werden, dass sowohl vertikal, als auch horizontal in der Mitte des Canvas ein Streifen frei bleibt.
Es gibt lange Elemente (width = 225, height = 30) und hohe Elemente (width = 30, height = 225).
Meine Idee ist, die Funktion 'setCoordinates()' für jedes Element so lange aufzurufen, bis sie ausserhalb der freien Zone liegen.
Folgenden Code habe ich ersonnen:
Code:
// Hindernisse erstellen for (i = 0; i < 8; i++) { var obstacle = new snake.Obstacle(this); while ((obstacle.x >= this.width/2 - (100 + obstacle.width) && obstacle.x <= this.width/2 + 100) || (obstacle.y >= this.height/2 - (100 + obstacle.height) && obstacle.y <= this.height/2 + 100)) { obstacle.setCoordinates(); } this.obstacles.push(obstacle); }
Edit: this.width ist die Breite des Canvas und this.height dessen Höhe
Kommentar