Session 01 (20.10.23) - RUB-INI-Theory-of-Machine-Learning/Info1_WS23-24 GitHub Wiki

In dieser ersten Session werden wir uns mit dem GitHub Repository zur Session vertraut machen. Darüber hinaus beginnen wir mit der grafischen Ausgabe von Tetris, indem wir einen Tetromino Block auf den Canvas zeichnen.

Ziele

• Tetromino Block zeichnen
• Blockgröße als Variable einführen
• Block von dort aus fallen lassen

Zusammenfassung

Tetrmino Block zeichnen

In dieser Session haben wir einen Tetromino-Block gezeichnet. Ein Block besteht aus einem Mittelstück und jeweils zwei hellen und zwei dunklen Kanten. Diese haben wir mit der Funktion canvas.fillRect() gezeichnet. Die Funktion canvas.setFillColor() definiert die Farbe, mit der das Rechteck gefüllt ist. Da diese Funktion nur Werte zwischen 0 und 1 annimmt, skalieren wir die RGB-Werte in diesen Bereich. Deshalb teilen wir jeden Wert durch 255.

canvas.setFillColor(255/255,255/255,0);
	canvas.fillRect(x,y,block_size,block_size);

	canvas.setFillColor(153/255,153/255,0);
	canvas.fillArea([
                           [x+block_size,y], 
			   [x, y+block_size], 
			   [x+block_size, y+ block_size]
                        ]);

	canvas.setFillColor(204/255,204/255,0);
	canvas.fillRect(
		x+outline_size,
		y+outline_size,
		block_size-2*outline_size,
		block_size-2*outline_size
	);

Für den Umgang mit dem Canvas schauen Sie bitte hier in die TScript Dokumentation.

Blockgröße als Variable einführen

Wir haben die Variable block_size eingeführt, welche die Breite des Mittelstücks beschreibt. Da ein typisches Tetrisfeld 10 Blöcke breit ist, haben wir die Blockgröße abhängig von der Größe des Canvas initialisiert.

var block_size = canvas.width()/10;

Analog dazu haben wir die Breite der Kanten des Blocks abhängig von der Blockgröße als Variable definiert.

var outline_size = block_size/10;

Block von dort aus fallen lassen

Um die Illusion eines fallenden Blocks zu erzeugen haben wir mithilfe einer Schleife den Canvas immer wieder neu gezeichnet. Zunächst resetten wir den Canvas (übermalen alles vorher dagewesene), dann zeichnen wir den Block an der derzeitigen Stelle (hier im Code ausgelassen). Zuletzt verändern wir die vertikale Position des Blocks für die nächste Iteration der Schleife. Dann wartet das Programm 1 Sekunde (1000ms), bevor es fortsetzt und in die nächste Iteration der Schleife geht. In dieser Zeit ist der Tetromino-Block auf dem Canvas zu sehen. Je kürzer diese Zeit ist, desto schneller fällt der Tetromino-Block.

while true do {
	canvas.setFillColor(1,1,1);
	canvas.clear();
	
	
	canvas.setFillColor(255/255,255/255,0);
	canvas.fillRect(x,y,block_size,block_size);

	canvas.setFillColor(153/255,153/255,0);
	canvas.fillArea([
						[x+block_size,y], 
						[x, y+block_size], 
						[x+block_size, y+ block_size]
					]);

	canvas.setFillColor(204/255,204/255,0);
	canvas.fillRect(
		x+outline_size,
		y+outline_size,
		block_size-2*outline_size,
		block_size-2*outline_size
	);
	
	y = y + block_size;
	
	wait(1000);
}

Für mehr Details schauen Sie sich den Code an im Commit zur Session.

Notizen

Dokumentation des Canvas

Farben des gelben Square-Tetromino
Hell: #ff0 (255 255 0)
Mittel: #cc0 (204 204 0)
Dunkel: #990 (153 153 0)

Commit zur Session