programmeren

in python

Jaar 2 - Module 1 - Les 5: Muisklikinvoer verwerken 

vandaag gaan we leren

 

  • Hoe je PyGame invoert verder gebruikt in je programma

Met PyGame kunnen we een user interface maken.

thema jaar 2: Pygame

Met PyGame kunnen we een user interface maken​.

 

In een user interface ziet de gebruiker wat hij moet doen, en hoe hij dat moet doen.

 

thema jaar 2: Pygame

Met PyGame kunnen we een user interface maken​.

 

In een user interface ziet de gebruiker wat hij moet doen, en hoe hij dat moet doen.

thema jaar 2: Pygame

Voor een quiz ziet de gebruiker, bijv de vraag op te beantwoorden, en hoe de vraag beantwoord moet worden, bijv. door op het juiste antwoord te klikken.

De antwoorden kun je dan 'gewoon' met Python verwerken.

Met PyGame kunnen we een user interface maken​.

 

In een user interface ziet de gebruiker wat hij moet doen, en hoe hij dat moet doen.

thema jaar 2: Pygame

Voor een quiz ziet de gebruiker, bijv de vraag op te beantwoorden, en hoe de vraag beantwoord moet worden, bijv. door op het juiste antwoord te klikken.

De antwoorden kun je dan 'gewoon' met Python verwerken.

Dat gaan we vandaag leren!

demo

Vorige les hebben we muiskliks afgehandeld. De letter waarop geklikt werd, kwam in beeld met een print().

 

 

Events in Pygame verwerken

Vorige les hebben we muiskliks afgehandeld. De letter waarop geklikt werd, kwam in beeld met een print().

 

Maar, hoe nu verder? Dat gaan we vandaag leren!

 

 

Events in Pygame verwerken

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Deze code heb je net in de demo gezien.

Events in Pygame

Deze code heb je net in de demo gezien.

We lopen het weer in stapjes door.

Events in Pygame

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regel maakt een while lus. Een while lus herhaalt eindeloos.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regel maakt een while lus. Een while lus herhaalt eindeloos.

 

 

 

De regels die in de lus zitten, beginnen met 2 spaties.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

In deze regel kijken we of de muis is ingedrukt.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze if-regels heb jij vorige keer gemaakt.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze if-regels heb jij vorige keer gemaakt.

 

We kijken of er op de A en de B (en bij jou ook de C en D) geklikt wordt.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

Die zijn nodig om straks met het antwoord te kunnen werken.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

 

Aan het begin van het programma is er nog niets aangeklikt. Dus het antwoord is 'geen'.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

 

Wordt de A aangeklikt? Dan zetten we variabele antwoord op 'A'.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

 

Wordt de B aangeklikt? Dan zetten we variabele antwoord op 'B'.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

 

Wordt de B aangeklikt? Dan zetten we variabele antwoord op 'B'.

 

ook voor C en D in jouw code.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

 

Dan printen we het antwoord uit.

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze regels zijn nieuw.

 

Dan printen we het antwoord uit.

 

Die code ga jij zodadelijk aanpassen, zodat het antwoord ook gecontroleerd wordt!

# hier hoort code om pygame aan te zetten
# en het veld op de juiste grootte te zetten

A = pygame.image.load("A.png")
A_rechthoek = a.get_rect()

#deze code wordt herhaald voor B en B_rechthoek 

antwoord = 'geen'

while True:
  #... Hier hoort code om alle elementen zoals tekst 
  # en letters A en B in beeld te krijgen met blit

  pygame.event.get()
  locatie_muis = pygame.mouse.get_pos()
  knoppen = pygame.mouse.get_pressed()

  if knoppen[0] == 1:
    if A_rechthoek.collidepoint(locatie_muis):
      antwoord = 'A'
    if B_rechthoek.collidepoint(locatie_muis):
      antwoord = 'B'

  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

antwoord controleren 

We kijken nu even naar dit stukje code. Dat staat in de echte code onderin.

import pygame

# 
# Deze code hebben we net bekeken!
# 
  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

antwoord controleren 

Hier wordt het antwoord geprint waar op geklikt is.

import pygame

# 
# Deze code hebben we net bekeken!
# 
  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

antwoord controleren 

Hier wordt het antwoord geprint waar op geklikt is.

 

In plaats van printen, willen we dat controleren, met een if.

import pygame

# 
# Deze code hebben we net bekeken!
# 
  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

antwoord controleren 

Hier wordt het antwoord geprint waar op geklikt is.

 

In plaats van printen, willen we dat controleren, met een if.

 

Kennen jullie de if nog?

import pygame

# 
# Deze code hebben we net bekeken!
# 
  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

if-else (herhaling)

Met een if kun je keuzes maken in je code.

 

 

if antwoord == 'hond':
  print('Waf waf')
else:
  print('Miauw miauw')

if-else (herhaling)

Met een if kun je keuzes maken in je code.

 

 

if antwoord == 'hond':
  print('Waf waf')
else:
  print('Miauw miauw')

Wat weten jullie nog over een if?

 

 

if-else (herhaling)

Met een if kun je keuzes maken in je code.

 

 

if antwoord == 'hond':
  print('Waf waf')
else:
  print('Miauw miauw')

Wisten jullie deze dingen nog?

  • bij de if gebruik je twee keer de is ==                               

  • achter de regel met de if hoort een dubbele punt :

  • regels onder de if beginnen met 2 spaties

  • regels onder de else beginnen met 2 spaties

  • de code gaat nog steeds van boven naar beneden, maar… maar één van de twee takken wordt uitgevoerd

antwoord controleren 

import pygame

# 
# Deze code hebben we net bekeken!
# 
  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

Zo de if is weer opgefrist!

 

antwoord controleren 

Zo de if is weer opgefrist!

 

Hier ga jij zodadelijk een if neerzetten die kijkt of het aangeklikte antwoord wel goed is.

import pygame

# 
# Deze code hebben we net bekeken!
# 
  print(antwoord)
  time.sleep(0.5) #even wachten op de volgende klik!

zodadelijk op de computer...

opdrachten deel b

opdrachten deel b

opdrachten deel b

opdrachten deel b

opdrachten deel b (extra)

opdrachten deel b (extra)

opdrachten deel b (extra)

Made with Slides.com