Steg 2: tegn et rutenett

I dette steget skal vi skrive en funksjon som tegner et rutenett, svært likt hva vi gjorde i lab5. Denne funksjonen kan vi opprette i en egen fil snake_view.py som ligger i samme mappe som snake.py. I neste steg skal vi importere denne funksjonen i hovedprogrammet.

I en egen fil snake_view.py, opprett en funksjon draw_board med følgende parametre:
- canvas, lerretet vi skal tegne på.
- x1 og y1, koordinatene for punktet til venstre øverst for rutenettet som skal tegnes.
- x2 og y2, koordinatene for punktet til høyre nederst for rutenettet som skal tegnes.
- board, en 2D-liste med tall som representerer brettet vi skal tegne. Vi kan anta at alle radene har like mange kolonner.
- debug_mode, en boolsk verdi (True eller False) som indikerer hvorvidt vi er i debug-modus eller ikke.

Til forskjell fra hva vi gjorde i lab5, vil rutenettene som kommer inn til denne funksjonen inneholde heltall.

Når du tegner rutenettet, la fargen til rektanglene være "lightgray" dersom tallet i ruten er 0, "orange" dersom tallet er større enn 0, og "cyan" dersom tallet er mindre enn 0 (du står fritt til å velge dine egne farger også, bare du bruker tre forskjellige farger.)
Dersom debug_mode er True: skriv ut en tekst i hver rute som inneholder rutens posisjon (rad, kolonne) og tallverdien som finnes på denne posisjonen i board.

Ta gjerne utgangspunkt i koden din for å tegne et rutenett fra lab5.

Her er et løsningsforslag til farget rutenett fra lab5.

def draw_grid(canvas, x1, y1, x2, y2, color_grid):
    rows = len(color_grid)
    cols = len(color_grid[0])

    cell_width = (x2 - x1) / cols
    cell_height = (y2 - y1) / rows

    for row in range(rows):
        for col in range(cols):
            cell_left = x1 + col * cell_width
            cell_top = y1 + row * cell_height
            cell_right = cell_left + cell_width
            cell_bottom = cell_top + cell_height
            color = color_grid[row][col]
            canvas.create_rectangle(
                cell_left, cell_top, cell_right, cell_bottom,
                fill=color
            )

Det er lurt å benytte en egen funksjon som «oversetter» fra tallverdi til fargeverdi. Da holder du fargevalget separat fra resten av koden som tegner rutenettet. Dette gjør det enklere å endre fargevalget senere.

Opprette en funksjon get_color(value) som regner ut fargen basert på reglene over (bruk en if-setning). For eksempel skal get_color(-1) returnere strengen «cyan», get_color(0) skal returnere strengen «lightgray», og get_color(1) skal returnere strengen «orange». Du kan teste en slik hjelpefunksjon med koden under om du ønsker.
Hjelpefunksjonen kan ligge i snake_view.py sammen med draw_board-funksjonen.

print("Tester get_color...", end="")
assert("cyan" == get_color(-1))
assert("lightgray" == get_color(0))
assert("orange" == get_color(1))
assert("orange" == get_color(42))
print("OK")

I draw_board -funksjonen kan vi kalle på get_color -funksjonen når vi trenger å regne ut en farge. Opprett en variabel color inne i de nøstede for-løkkene, og gi den en verdi ved å kalle på get_color -funksjonen med board[row][col] som argument. Bruk så variabelen color som argument for fill-parameteren til create_rectangle når en rute tegnes.

For eksempel, bruk f-strengen f"{row},{col}\n{board[row][col]}" (her antas det at iterandene i de nøstede for-løkkene som tegner rutenettet kalles row og col)

Bruk create_text -metoden (se grafikk-notatene for eksempel på bruk). La x-koordinatet du gir som input til create_text være midt mellom x-koordinatene du gir som input til create_rectangle (cell_mid_x = (cell_x1 + cell_x2) / 2). Gjør det samme for y-koordinatet, slik at teksten blir sentrert midt i ruten

Test deg selv: kopier denne koden inn i en ny fil test_snake_view.py i samme mappe som snake_view.py og kjør den. Du skal da se bildet vist under når du kjører programmet.

from uib_inf100_graphics.simple import canvas, display
from snake_view import draw_board

test_board = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 9,10,11, 0,-1, 0],
    [0, 0, 0, 8, 0, 0, 0, 0, 0],
    [0, 0, 0, 7, 6, 5, 0, 0, 0],
    [0, 0, 0, 0, 0, 4, 0, 0, 0],
    [0, 0, 0, 1, 2, 3, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
]

draw_board(canvas, 25, 25, 375, 375, test_board, True)
display(canvas)

PS: programmet over og filen test_snake_view.py er kun for testing for din egen del – du trenger ikke å levere inn denne filen.

I filen test_snake_view_2.py: kopier inn koden under og kjør den. Du skal da se sekvensen vist under når du kjører programmet.

from uib_inf100_graphics.simple import canvas, display
from snake_view import draw_board

test_boards = [
    [
        [0,-1, 0],
        [1, 2, 0]
    ],
    [
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 9,10,11, 0,-1, 0],
        [0, 0, 0, 8, 0, 0, 0, 0, 0],
        [0, 0, 0, 7, 6, 5, 0, 0, 0],
        [0, 0, 0, 0, 0, 4, 0, 0, 0],
        [0, 0, 0, 1, 2, 3, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
    ]
]

debug_mode = True

while True:
    for test_board in test_boards:
        draw_board(canvas, 25, 25, 375, 375, test_board, debug_mode)
        display(canvas, min_duration_sec=2)
    debug_mode = not debug_mode

Guide til snake av Torstein Strømme er lisensiert under CC-NC-SA 4.0.