Session 02 (27.10.23) - RUB-INI-Theory-of-Machine-Learning/Info1_WS23-24 GitHub Wiki

In der zweiten Session werden wir die grafische Ausgabe von Tetris weiter entwickeln. Wir werden das Spielfeld zeichnen, die Blockgröße anhand des Canvasgröße berechnen und wir werden Funktionen benutzen, um das Zeichnen der Tetrominos zu vereinfachen.

Ziele

Funktion um einen Block zu zeichnen
Blockgröße anhand der Spielfeldgröße bestimmen
Kompletten Tetromino zeichnen und fallen lassen

Zusammenfassung

Funktion um einen Block zu zeichnen

Damit wir in Zukunft nicht immer wieder Code schreiben müssen, um einen Block auf den Canvas zu zeichnen, verschieben wir den Code dafür in eine eigene Funktion draw_block(pos_x, pos_y, color).

Funktionen dienen dazu, dass wir den Code, der an mehreren Stellen gebraucht wird, nicht ständig neu schreiben müssen.

Diese Funktion hat als Parameter (Eingabewerte) pos_x, pos_y und color. Die Position wird in pos_x, pos_y übergeben. Beide Größen sind in der Einheit Block anzugeben. Dies muss innerhalb der Funktion noch in Pixel umgerechnet werden.

pos_x = pos_x * block_size;
pos_y = pos_y * block_size;

Die Farbe wird als String in dem Parameter color übergeben. Dazu definieren wir eine globale Variable des Typs dictionary, welches die RGB-Werte für die jeweiligen Farben der Tetromino Blöcke enthält.

var colors = {
	"yellow": {
		"base": [204, 204, 0],
		"light": [255, 255, 0],
		"dark": [153, 153, 0]
	}
};

Funktionen dienen außerdem dazu, layers of abstraction zu erschaffen, in dem low-level Probleme in ihren jeweiligen Funktionen zu behandeln und sich auf höherer Abstraktionsebene vollkommen um die dortigen Probleme zu kümmern.

Beispielsweise haben wir die Umrechnung von Blöcken in Pixel in draw_block untergebracht. Dadurch können wir im Rest des Programms in Blöcken denken und müssen uns um die Umrechnung in Pixel nicht mehr kümmern.

Die Farben für den Block rufen wir dann beispielsweise folgendermaßen auf (in diesem Fall für die light Variante der Farbe):

colors[color]["light"][0]

Blockgröße anhand der Spielfeldgröße bestimmen

Bisher haben wir die Blockgröße anhand der maximalen Breite bestimmt. Wir müssen auch die Höhe berücksichtigen, um sicherzustellen, dass das Spielfeld immer komplett angezeigt werden kann. Hierfür berechnen wir die Blocksize für die Höhe und für die Breite und nehmen den kleineren Wert.

var block_size = math.min(canvas.width()/10, canvas.height()/20);

Kompletten Tetromino zeichnen und fallen lassen

Zum Abschluss lassen wir einmal einen kompletten Tetromino fallen. Da wir jetzt Blöcke mittels der Funktion draw_block() zeichnen können, gestaltet sich dies Vergleichsweise einfach.

# Within the loop
draw_block(pos_x, pos_y, "yellow");
draw_block(pos_x+1, pos_y+1, "yellow");
draw_block(pos_x+1, pos_y, "yellow");
draw_block(pos_x, pos_y+1, "yellow");