programmeren

in python

Jaar 2 - Module 1 - Les 4: Werken met rectangles in PyGame 

vandaag gaan we leren

 

  • Hoe je PyGame afebeeldingen verplaatst zodat ze klikbaar zijn

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.

 

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.

Daarvoor moet je ook de rechthoek van plaatjes verplaatsen.

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.

Daarvoor moet je ook de rechthoek van plaatjes verplaatsen.

Dat gaan we vandaag leren!

demo

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

 

 

Events in Pygame verwerken

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

 

Misschien heb je ook gezien dat het voor de andere letters nog niet goed werkte!

Events in Pygame verwerken

demo

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

 

De letters staan er wel, maar je kunt er niet op klikken. Je klikt altijd op de A.

 

 

Events in Pygame verwerken

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

 

De letters staan er wel, maar je kunt er niet op klikken. Je klikt altijd op de A.

 

Hoe dat komt, gaan we nu leren!

Events in Pygame verwerken

Events in Pygame

Deze code zagen we in de demo.

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

A = pygame.image.load("A.png")
B = pygame.image.load("B.png")

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))
  screen.blit(B, (500, 10))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
    if B.get_rect().collidepoint(locatie_muis):
      print('B')
      
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze code zagen we in de demo. Die was bijna goed, maar nog niet helemaal.

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

A = pygame.image.load("A.png")
B = pygame.image.load("B.png")

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))
  screen.blit(B, (500, 10))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
    if B.get_rect().collidepoint(locatie_muis):
      print('B')
      
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze code zagen we in de demo. Die was bijna goed, maar nog niet helemaal.

 

Dat komt door de blit().

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

A = pygame.image.load("A.png")
B = pygame.image.load("B.png")

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))
  screen.blit(B, (500, 10))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
    if B.get_rect().collidepoint(locatie_muis):
      print('B')
      
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

Deze code zagen we in de demo. Die was bijna goed, maar nog niet helemaal.

 

Dat komt door de blit().

blit() zet wel een plaatje op de juiste plek, maar niet het "klik" vierkant dat bij het plaatje hoort. 

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

A = pygame.image.load("A.png")
B = pygame.image.load("B.png")

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))
  screen.blit(B, (500, 10))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
    if B.get_rect().collidepoint(locatie_muis):
      print('B')
      
  time.sleep(0.5) #even wachten op de volgende klik!

Events in Pygame

In de volgende demo kun je dat goed zien.

 

Events in Pygame

In de volgende demo kun je dat goed zien.

 

De A beweegt, maar de rect() blijft staan!

demo

Nu gaan we de code aanpassen!

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")
B = pygame.image.load("B.png")

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))
  screen.blit(B, (0, 0))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
    if B.get_rect().collidepoint(locatie_muis):
      print('B')

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

Nu gaan we de code aanpassen!

 

Dit is de code die we hadden, alleen voor de letter A.

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")


while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))


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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
      
  time.sleep(0.5) #even wachten op de volgende klik!
# 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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))


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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')
            
  time.sleep(0.5) #even wachten op de volgende klik!

Nu gaan we de code aanpassen!

 

Dit is de code die we hadden voor de letter A.


Deze regel is nieuw, we slaan de rechthoek nu op in een variabele.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  screen.blit(A, (0, 0))


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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Nu gaan we de code aanpassen!

 

Dit is de code die we hadden voor de letter A.


Deze regel is nieuw, we slaan de rechthoek nu op in een variabele.

Dan kunnen we die rechthoek ook verplaatsen.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  
  screen.blit(A, (0, 0))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Het blitten gaat nu ook anders.

Events in Pygame

Het blitten gaat nu ook anders.


We zetten de rechthoek op een plek neer.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  
  screen.blit(A, (0, 0))

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Het blitten gaat nu ook anders.


We zetten de rechthoek van A op een plek neer.

 

Hier is dat (300, 100).

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Het blitten gaat nu ook anders.

 

Dan blitten we het plaatje meteen in de rechthoek.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Deze regel wordt ook ietsjes anders.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Deze regel wordt ook ietsjes anders.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

  if knoppen[0] == 1:
    if A.get_rect().collidepoint(locatie_muis):
      print('A')

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

Deze regel wordt ook ietsjes anders.

 

We kijken of locatie_muis de plek van de variabele A_rechthoek aanraakt.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

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

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

Nu werkt het klikken goed, waar we de A ook neerzetten!

 

 

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

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

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

Nu werkt het klikken goed, waar we de A ook neerzetten!

 

Kijk maar mee in de demo.

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()

while True:
  # Hier hoort code om alle elementen, zoals 
  # de tekst neer te zetten

  A_rechthoek.center = (300, 100)
  screen.blit(A, A_rechthoek)

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

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

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

demo

zodadelijk op de computer...

opdrachten deel b

opdrachten deel b

opdrachten deel b

opdrachten deel b

Lukt opdr. 3 nog niet?

Dat geeft niks, die doen we volgende week samen!

opdrachten deel b (extra)

opdrachten deel b (extra)

opdrachten deel b (extra)

Made with Slides.com