Ga naar hoofdinhoud

7.1 Een knop maken

Hier bouw je op verder: 4.5 Een score bijhouden met global en Functies

Weet je dit niet meer zeker? Lees het terug voordat je verdergaat.

Tot nu toe reageerde je spel op het toetsenbord en de muis. Met play.new_button maak je een echte knop: hij licht op als je eroverheen beweegt en reageert op een klik.

Spel laden...
import play

teller = 0
tekst = play.new_text(words="0 keer geklikt", y=100)
knop = play.new_button(text="Klik mij")

@knop.when_clicked
def geklikt():
    global teller
    teller = teller + 1
    tekst.words = str(teller) + " keer geklikt"
  1. Regel 3:

    Het aantal kliks tot nu toe. Deze staat buiten de functie, want hij moet blijven bestaan tussen twee kliks door.

  2. Regel 5:

    Maakt de knop. Het zweef-effect — de knop wordt lichter als je muis erop staat — krijg je er gratis bij.

  3. Regel 7:

    Koppelt de functie eronder aan de knop. Bij elke klik roept play geklikt() aan.

  4. Regel 9:

    Zonder global zou teller op de volgende regel een nieuwe variabele binnen de functie worden, en begon het tellen elke klik opnieuw.

  5. Regel 11:

    Zet de nieuwe stand op het scherm. str() maakt van het getal weer tekst.

De knop aanpassen​

Een knop heeft veel instelbare eigenschappen. De belangrijkste:

knop = play.new_button(
    text="Start",
    x=0, y=0,
    width=160, height=50,
    color='royalblue',
    text_color='white',
    font_size=20,
)
  • color is de kleur van de knop, hover_color de kleur als je muis erop staat
  • text kun je ook achteraf veranderen: knop.text = 'Opnieuw'
  • border_radius bepaalt hoe rond de hoeken zijn

Een knop uitzetten​

Soms mag een knop tijdelijk niet klikbaar zijn, bijvoorbeeld zolang het spel bezig is. Zet dan disabled op True:

Spel laden...

Een uitgezette knop wordt grijs en zijn when_clicked-functie wordt niet meer aangeroepen.

Opdracht 7.1.a: Kleurenknoppen​

Maak een cirkel en twee knoppen: Rood en Blauw. Klik je op een knop, dan krijgt de cirkel die kleur.

Klik hier voor een tip.

Zet de cirkel bovenin (y=100) en de knoppen eronder, links en rechts van elkaar (x=-100 en x=100). Elke knop krijgt zijn eigen @knop.when_clicked-functie.

Klik hier voor de oplossing.
import play

cirkel = play.new_circle(color='black', y=100, radius=50)
rood = play.new_button(text="Rood", x=-100, y=-100, color='firebrick')
blauw = play.new_button(text="Blauw", x=100, y=-100)

@rood.when_clicked
def maak_rood():
    cirkel.color = 'red'

@blauw.when_clicked
def maak_blauw():
    cirkel.color = 'blue'
Spel laden...

Opdracht 7.1.b: Maar één keer​

Maak een knop Start die zichzelf uitzet zodra erop geklikt is, en een tekst die daarna "Gestart" laat zien.

Klik hier voor een tip.

Een knop kan zichzelf uitzetten: binnen zijn eigen klikfunctie mag je zijn disabled aanpassen.

Klik hier voor de oplossing.
import play

tekst = play.new_text(words="", y=100)
start = play.new_button(text="Start")

@start.when_clicked
def gestart():
    start.disabled = True
    tekst.words = "Gestart"
Spel laden...

In de functie zet je start.disabled = True: de knop wordt grijs en reageert daarna nergens meer op.