Session 09 (15.12.23) - RUB-INI-Theory-of-Machine-Learning/Info1_WS23-24 GitHub Wiki

In der neunten Session zeigen wir die das Level, die Punkte, die Lines, sowie den nächsten Tetromino an.

Ziele

• Rahmen erweitern um Informationen anzuzeigen
• Punkte, Level und Lines anzeigen
• Nächsten Tetromino anzeigen

Rahmen erweitern um Informationen anzuzeigen

class Renderer {
public:
    var sidebar_size = 7;
    
    ...
    
    constructor(width, height){
        this.width = width;
        this.height = height;
    
    
        this.block_size = math.floor(math.min(
            canvas.height()/(playfield_size["y"]+2),
            canvas.width()/(playfield_size["x"]+2 + this.sidebar_size)
        ));
    
        # We define the outline to be 1/8 of the block size
        this.outline_size = this.block_size/8;
    
        # set background color of the canvas once
        canvas.setFillColor(0, 0, 0);
        canvas.clear();
    
        # draw sidebar once
        for var column in 0:this.sidebar_size do {
            for var row in 0:height+2 do {
                if (row == 0 or row == height+1 or column == this.sidebar_size-1) then
                this.draw_block(row, column + width + 1, "f");
            }
        }
    
        # Headings for the standings
        canvas.setFillColor(1,1,1);
        canvas.setFont("Comic Sans MS", block_size);
        canvas.text(block_size * (this.width+3), 2* block_size, "Score");
        canvas.text(block_size * (this.width+3), 5* block_size, "Lines");
        canvas.text(block_size * (this.width+3), 8* block_size, "Level");
    
    }
}

Punkte, Level und Lines anzeigen

function draw_text(text, row){
		canvas.setFillColor(0,0,0);
		canvas.fillRect(block_size * (this.width + 3) , row * block_size -1, 4 * block_size, 2 * block_size);

		canvas.setFillColor(1,1,1);
		canvas.text(block_size * (this.width + 3), row * block_size, text);
	}

class Renderer {
public:
    var p_bitmap, p_score, p_level, p_lines;
    
    ...
    
    function render(playfield, score, lines, level) {
    
        ...
    
        if score != this.p_score then {
            this.p_score = score;
            this.draw_text(score, 3);
        }
        if lines != this.p_lines then {
            this.p_lines = lines;
            this.draw_text(lines, 6);
        }
        if level != this.p_level then {
            this.p_level = level;
            this.draw_text(level, 9);
        }
    }
}

Nächsten Tetromino anzeigen

function draw_next_tetromino(bitmap){
    canvas.setFillColor(0,0,0);
    canvas.fillRect(block_size * (this.width + 2.5) , 16 * block_size, 4 * block_size, 4 * block_size);

    for var column in 0:bitmap.size() do
        for var row in 0:bitmap[column].size() do {
            if (bitmap[column][row] != 0) then this.draw_block(
                column + 16, 
                row + 2.5 + this.width, 
                bitmap[column][row]
            );
        }
}

class Renderer {
public:
    var p_tetromino;
    
    ...
    
    function render(playfield, score, lines, level, next_tetromino) {
    
        ...
    
        if next_tetromino != this.p_tetromino then {
            this.p_tetromino = next_tetromino;
            this.draw_next_tetromino(Tetromino.tetrominos[next_tetromino][0]);
        }
    }
}

Bei jedem Aufruf des Renderers müssen jetzt natürlich die entsprechenden Parameter übergeben werden:

renderer.render(playfield, score, lines, level, pool.next());

Der Renderer wird in allen Eventhandlern aufgerufen.