Ping Pong

Einstieg in die Programmierung mit PyGame

Ello 👋

ich bin Maylis (sie/ihr)

Studentin
Nerd
Animefan
Computer Enthusiastin

Insta

Mail

Wie heißt und welche Pronomen verwendet ihr?

Was macht ihr gerne?

Wie heißt und welche Pronomen verwendet ihr?

Was macht ihr gerne?

Was interessiert euch am Programmieren besonders?

Wie heißt und welche Pronomen verwendet ihr?

Welche Erwartungen habt ihr?

Was macht ihr gerne?

Was interessiert euch am Programmieren besonders?

Bevor wir anfangen

Die Präsentation gibt es auf:

https://maytastix.de/pygame

Okay let's go

Entspannt anfangen

Was brauchen wir um ein Fenster darzustellen?


							# pygame in unser Projekt hinzufügen
							import pygame


							# pygame in unser Projekt hinzufügen
							import pygame

							# pygame setup
							pygame.init()
							screen = pygame.display.set_mode((1280, 720))
							clock = pygame.time.Clock()
							running = True


							# pygame in unser Projekt hinzufügen
							import pygame

							# pygame setup
							pygame.init()
							screen = pygame.display.set_mode((1280, 720))
							clock = pygame.time.Clock()
							running = True

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False

								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()

Klappts?

Super

Sieht langweilig
aus oder?

Wie wärs mit Farbe?

Dem Fenster eine Hintergrundfarbe geben



							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False

								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()

Der obere Teil wird einmal ausgeführt während der untere Teil die ganze Zeit ausgeführt wird


							# Code der einmal aufgeführt wird

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								# Code der immer läuft
								
								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()

screen.fill("red") färbt eine ganze Fläche mit einer Farbe ein


						# Code der einmal aufgeführt wird

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
										
								# Code der immer läuft
								screen.fill("red")

								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()


							# Code der einmal aufgeführt wird

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								# Code der immer läuft
								screen.fill("blue")

								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()

Mehr Farben:

https://www.pygame.org/docs/ref/color_list.html?highlight=colors

Habt ihr Spaß?

Bisschen Spaß mit Farben und dann geht es weiter mit Formen.

Bereit für Formen?

Erstmal easy Formen, dann wirds bissl cooler 😱


								# Code der einmal aufgeführt wird

								while running:
									for event in pygame.event.get():
										if event.type == pygame.QUIT:
											running = False
									
									# Code der immer läuft
									screen.fill("black")
									pygame.draw.rect(screen, "brown" , (100, 250, 75,75))
									pygame.draw.rect(screen, "brown" , (100, 250, 75,75), 4)
									pygame.draw.circle(screen, "red" , (300, 250), 75)    
									pygame.draw.polygon(screen, "green", ((400,325),(500,325), (450 , 100)))
									pygame.draw.ellipse(screen, "violet" , (550, 250, 75,100))

									pygame.display.flip()
								
									clock.tick(60)
								pygame.quit()

So siehts dann aus

Wie funktionieren Koordinaten in 2 Dimensionen?

Zeichnen von komplexeren Strukturen


									# Code der einmal aufgeführt wird

									while running:
										for event in pygame.event.get():
											if event.type == pygame.QUIT:
												running = False
										
										pygame.display.flip()
									
										clock.tick(60)
									pygame.quit()

Erstmal eine neue Klasse anlegen


								# Code der einmal aufgeführt wird
								class Ball(pygame.sprite.Sprite):
									def __init__(self, x, y, radius) :
										#                            größe der Fläche      hintergrund
										self.surface = pygame.Surface((radius*2, radius*2), pygame.SRCALPHA)

										#                Zeichenfläche   Farbe       Position     Radius
										pygame.draw.circle(self.surface, "red", (radius, radius), radius)

										#Rechteck der Zeichenfläche
										self.rect = self.surface.get_rect()
										self.rect.centerx = x
										self.rect.centery = y

								#Zeichnet das Object
								def draw(self, surface):
									surface.blit(self.surface, self.rect)		

								while running:
									for event in pygame.event.get():
										if event.type == pygame.QUIT:
											running = False
									
									pygame.display.flip()
								
									clock.tick(60)
								pygame.quit()

Eine Klasse muss dann angelegt werden


							# Code der einmal aufgeführt wird
							class Ball(pygame.sprite.Sprite):
								def __init__(self, x, y, radius) :
									#                            größe der Fläche      hintergrund
									self.surface = pygame.Surface((radius*2, radius*2), pygame.SRCALPHA)

									#                Zeichenfläche   Farbe       Position     Radius
									pygame.draw.circle(self.surface, "red", (radius, radius), radius)

									#Rechteck der Zeichenfläche
									self.rect = self.surface.get_rect()
									self.rect.centerx = x
									self.rect.centery = y

							#Zeichnet das Object
							def draw(self, surface):
								surface.blit(self.surface, self.rect)		

							#Erstellt ein neues Kreisrundes Object in der Mitte vom Bildschirm
							ball = Ball(screen.get_width()/2, screen.get_height()/2, 40)

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()

Dann können wir sie Zeichnen


							# Code der einmal aufgeführt wird
							class Ball(pygame.sprite.Sprite):
								def __init__(self, x, y, radius) :
									#                            größe der Fläche      hintergrund
									self.surface = pygame.Surface((radius*2, radius*2), pygame.SRCALPHA)

									#                Zeichenfläche   Farbe       Position     Radius
									pygame.draw.circle(self.surface, "red", (radius, radius), radius)

									#Rechteck der Zeichenfläche
									self.rect = self.surface.get_rect()
									self.rect.centerx = x
									self.rect.centery = y

							#Zeichnet das Object
							def draw(self, surface):
								surface.blit(self.surface, self.rect)		

							#Erstellt ein neues Kreisrundes Object in der Mitte vom Bildschirm
							ball = Ball(screen.get_width()/2, screen.get_height()/2, 40)

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								#Malt das Kreisrunde Objekt
								ball.draw(screen)

								pygame.display.flip()
							
								clock.tick(60)
							pygame.quit()

Frage an euch

Wie verändere ich die Position vom Kreis?

Anschließend wie verändere ich die Farbe?

Und kann ich die Farbe auch von außen ändern?

							
						class Ball(pygame.sprite.Sprite):

						def __init__(self, x, y, radius, color) :
							#                            größe der Fläche      hintergrund
							self.surface = pygame.Surface((radius*2, radius*2), pygame.SRCALPHA)

							#                Zeichenfläche   Farbe       Position     Radius
							pygame.draw.circle(self.surface, color, (radius, radius), radius)

							#Rechteck der Zeichenfläche
							self.rect = self.surface.get_rect()
							self.rect.centerx = x
							self.rect.centery = y
							self.color = color

						#Zeichnet das Object
						def draw(self, surface):
							surface.blit(self.surface, self.rect)

						#Erstellt ein neues Kreisrundes Object in der Mitte vom Bildschirm
						ball = Ball(50, 80, 40, "blue")

Jetzt habt ihr euch aber eine Pause verdient

Wie ist gerade euer Energielevel? 🔋

Genug Pause?

Wäre es eigentlich cool
wenn sich der Kreis bewegt?

Willkommen zu Objekte mit der Tastatur bewegen

Erstmal wie verändere ich eine Position von außen?

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False

								ball.rect.centerx = 500
								ball.rect.centery = 300
						
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Wie frage ich eine Taste ab?

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centerx = 500
									ball.rect.centery = 300
							
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Wenn ich jetzt drücke
bewegt sich mein Kreis aufeinmal woanders hin.

Aber wie kann ich den Kreis
von seiner aktuellen Position aus bewegen?

Indem ich auf entweder das x oder das y eine Zahl addiere oder subtrahiere

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centery -= 1
							
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Um weitere Tasten abzufragen füge ich ein weiteres if ein

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centery += 1
								if keys[pygame.K_DOWN]:
									ball.rect.centery -= 1
							
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Warum wird das so komisch gezeichnet?

Weil wir den alten Kreis nicht überzeichnen

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								screen.fill("black")

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centery -= 1
								if keys[pygame.K_DOWN]:
									ball.rect.centery += 1
							
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Eure nächste Aufgabe:

Füge Abfragen für die Bewegung nach rechts und links hinzu

Lösung

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								screen.fill("black")

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centery -= 1
								if keys[pygame.K_DOWN]:
									ball.rect.centery += 1
								if keys[pygame.K_RIGHT]:
									ball.rect.centerx += 1
								if keys[pygame.K_LEFT]:
									ball.rect.centerx -= 1
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

So sieht das dann richtig aus

Fällt euch was auf? 😱

Wie könnte man das lösen? 🤔

Horizontale Kollision abfragen

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								screen.fill("black")

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centery -= 1
								if keys[pygame.K_DOWN]:
									ball.rect.centery += 1
							
								if ball.rect.left < 0:
									ball.rect.left = 0
								if ball.rect.right > screen.get_width():
									ball.rect.right = screen.get_width()
								
								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Vertikale Kollision abfragen

							
							ball = Ball(50, 80, 40, "blue")

							while running:
								for event in pygame.event.get():
									if event.type == pygame.QUIT:
										running = False
								
								screen.fill("black")

								keys = pygame.key.get_pressed()
								if keys[pygame.K_UP]:
									ball.rect.centery -= 1
								if keys[pygame.K_DOWN]:
									ball.rect.centery += 1
							
								if ball.rect.left < 0:
									ball.rect.left = 0
								if ball.rect.right > screen.get_width():
									ball.rect.right = screen.get_width()
								if ball.rect.top < 0:
									ball.rect.top = 0
								if ball.rect.bottom > screen.get_height():
									ball.rect.bottom = screen.get_height()

								ball.draw(screen)

								pygame.display.flip()

								clock.tick(60)
							pygame.quit()

Mega Applaus, dass ihr bis hier gekommen seid 👏 🥳

Wie fühlt ihr euch? 🔋

Wie fühlt ihr euch? 🔋
Habt ihr was noch nicht so verstanden? 😕

Wie fühlt ihr euch? 🔋
Habt ihr was noch nicht so verstanden? 😕
Gefällt euch etwas nicht so gut? 👎

Wie fühlt ihr euch? 🔋
Habt ihr was noch nicht so verstanden? 😕
Gibt es etwas was euch besonders gut gefällt? 👍
Gefällt euch etwas nicht so gut? 👎

Das war aber nur der Anfang 😵‍💫

Jetzt geht es richtig los 😅

Jetzt coden wir richtiges Ping Pong!

Bienvenu à Ping Pong

Ping Pong Hilfsmittel kopieren und importieren Download (müssen im gleichen Ordner sein)

							
							# pygame in unser Projekt hinzufügen
							import pygame
							from pingpong.PingPong import Ball, Paddle, Counter

Grundlägende Anweisungen für PyGame

							
							# pygame in unser Projekt hinzufügen
							import pygame
							from pingpong.PingPong import Ball, Paddle, Counter

							# pygame setup
							pygame.init()
							screen = pygame.display.set_mode((1280, 720))
							clock = pygame.time.Clock()
							running = True

Den "Game Loop" vorbereiten

							
							# pygame in unser Projekt hinzufügen
						import pygame
						from pingpong.PingPong import Ball, Paddle, Counter

						# pygame setup
						pygame.init()
						screen = pygame.display.set_mode((1280, 720))
						clock = pygame.time.Clock()
						running = True

						while running:
							for event in pygame.event.get():
								if event.type == pygame.QUIT:
									running = False


							pygame.display.flip()

							clock.tick(60)
						pygame.quit()

Bälle, Schläger und den Spielestand erstellen

							
							# pygame in unser Projekt hinzufügen
						import pygame
						from pingpong.PingPong import Ball, Paddle, Counter

						# pygame setup
						pygame.init()
						screen = pygame.display.set_mode((1280, 720))
						clock = pygame.time.Clock()
						running = True
						
						ball = Ball(screen.get_width()/2,screen.get_height()/2,40,"red")
						ball.x_velocity = 1
						ball.y_velocity = 1

						schläger = Paddle(40, 60, 10, 100, "violet")
						schläger2 = Paddle(screen.get_width()-50, 60, 10, 100, "yellow")

						spielestand = Counter(20,20, "freesansbold.ttf")
						spielestand2 = Counter(screen.get_width()-20,20, "freesansbold.ttf")

						while running:
							for event in pygame.event.get():
								if event.type == pygame.QUIT:
									running = False


							pygame.display.flip()

							clock.tick(60)
						pygame.quit()

Bälle, Schläger und den Spielestand zeichnen

							
							# pygame in unser Projekt hinzufügen
						import pygame
						from pingpong.PingPong import Ball, Paddle, Counter

						# pygame setup
						pygame.init()
						screen = pygame.display.set_mode((1280, 720))
						clock = pygame.time.Clock()
						running = True
						
						ball = Ball(screen.get_width()/2,screen.get_height()/2,40,"red")
						ball.x_velocity = 1
						ball.y_velocity = 1

						schläger = Paddle(40, 60, 10, 100, "violet")
						schläger2 = Paddle(screen.get_width()-50, 60, 10, 100, "yellow")

						spielestand = Counter(20,20, "freesansbold.ttf")
						spielestand2 = Counter(screen.get_width()-20,20, "freesansbold.ttf")

						while running:
							for event in pygame.event.get():
								if event.type == pygame.QUIT:
									running = False
					
							ball.update()
							ball.draw(screen)
							schläger.draw(screen)
							schläger2.draw(screen)
							spielestand.draw(screen)
							spielestand2.draw(screen)

							pygame.display.flip()

							clock.tick(60)
						pygame.quit()

Die Schläger sollen sich auch bewegen

							
							# pygame in unser Projekt hinzufügen
						import pygame
						from pingpong.PingPong import Ball, Paddle, Counter

						# pygame setup
						pygame.init()
						screen = pygame.display.set_mode((1280, 720))
						clock = pygame.time.Clock()
						running = True
						
						ball = Ball(screen.get_width()/2,screen.get_height()/2,40,"red")
						ball.x_velocity = 1
						ball.y_velocity = 1

						schläger = Paddle(40, 60, 10, 100, "violet")
						schläger2 = Paddle(screen.get_width()-50, 60, 10, 100, "yellow")

						spielestand = Counter(20,20, "freesansbold.ttf")
						spielestand2 = Counter(screen.get_width()-20,20, "freesansbold.ttf")

						while running:
							for event in pygame.event.get():
								if event.type == pygame.QUIT:
									running = False
					
							ball.update()
							ball.draw(screen)
							schläger.draw(screen)
							schläger2.draw(screen)
							spielestand.draw(screen)
							spielestand2.draw(screen)

							keys = pygame.key.get_pressed()
							if keys[pygame.K_w]:
								if schläger.rect.top > 0:
									schläger.rect.centery -= 5
							if keys[pygame.K_s]:
								if schläger.rect.bottom < screen.get_height():
									schläger.rect.centery += 5
							if keys[pygame.K_UP]:
								if schläger2.rect.top > 0:
									schläger2.rect.centery -= 5
							if keys[pygame.K_DOWN]:
								if schläger2.rect.bottom < screen.get_height():
									schläger2.rect.centery += 5

							pygame.display.flip()

							clock.tick(60)
						pygame.quit()

Irgendwie entwischt uns der Ball 🥲

Kollisionen 😱

							
							# pygame in unser Projekt hinzufügen
						import pygame
						from pingpong.PingPong import Ball, Paddle, Counter

						# pygame setup
						pygame.init()
						screen = pygame.display.set_mode((1280, 720))
						clock = pygame.time.Clock()
						running = True
						
						ball = Ball(screen.get_width()/2,screen.get_height()/2,40,"red")
						ball.x_velocity = 1
						ball.y_velocity = 1

						schläger = Paddle(40, 60, 10, 100, "violet")
						schläger2 = Paddle(screen.get_width()-50, 60, 10, 100, "yellow")

						spielestand = Counter(20,20, "freesansbold.ttf")
						spielestand2 = Counter(screen.get_width()-20,20, "freesansbold.ttf")

						while running:
							for event in pygame.event.get():
								if event.type == pygame.QUIT:
									running = False
					
							ball.update()
							ball.draw(screen)
							schläger.draw(screen)
							schläger2.draw(screen)
							spielestand.draw(screen)
							spielestand2.draw(screen)

							keys = pygame.key.get_pressed()
							if keys[pygame.K_w]:
								if schläger.rect.top > 0:
									schläger.rect.centery -= 5
							if keys[pygame.K_s]:
								if schläger.rect.bottom < screen.get_height():
									schläger.rect.centery += 5
							if keys[pygame.K_UP]:
								if schläger2.rect.top > 0:
									schläger2.rect.centery -= 5
							if keys[pygame.K_DOWN]:
								if schläger2.rect.bottom < screen.get_height():
									schläger2.rect.centery += 5

							if ball.rect.bottom > screen.get_height() or ball.rect.top < 0:
							ball.y_velocity *= -1
							
							if ball.rect.colliderect(schläger.rect) or ball.rect.colliderect(schläger2.rect):
								ball.x_velocity *= -1
							
							if ball.rect.left > screen.get_width() - 40 :
								spielestand.increase()
								ball.reset_position()
							
							if ball.rect.right < 0:
								spielestand2.increase()
								ball.reset_position()

							pygame.display.flip()

							clock.tick(60)
						pygame.quit()

C'est la rèsultat

Vielen Dank für's mitmachen

Habt ihr noch fragen?

Was fandet ihr gut?

Was lief nicht so gut?

Quellen zum weitercoden

Free Code Camp

https://www.youtube.com/@freecodecamp

The Coding Train

https://www.youtube.com/@TheCodingTrain

Code Combat

https://codecombat.com/

Jugendhackt

https://jugendhackt.org/

Ping Pong

Ello 👋

Wie heißt und welche Pronomen verwendet ihr?

Wie heißt und welche Pronomen verwendet ihr?

Was macht ihr gerne?

Wie heißt und welche Pronomen verwendet ihr?

Was macht ihr gerne?

Was interessiert euch am Programmieren besonders?

Wie heißt und welche Pronomen verwendet ihr?

Was macht ihr gerne?

Was interessiert euch am Programmieren besonders?

Bevor wir anfangen

Okay let's go

Entspannt anfangen

Super

Sieht langweilig aus oder?

Wie wärs mit Farbe?

Dem Fenster eine Hintergrundfarbe geben

Habt ihr Spaß?

Bereit für Formen?

Wie funktionieren Koordinaten in 2 Dimensionen?

Zeichnen von komplexeren Strukturen

Frage an euch

Jetzt habt ihr euch aber eine Pause verdient

Wie ist gerade euer Energielevel? 🔋

Genug Pause?

Wäre es eigentlich cool wenn sich der Kreis bewegt?

Willkommen zu Objekte mit der Tastatur bewegen

Eure nächste Aufgabe:

Fällt euch was auf? 😱

Wie könnte man das lösen? 🤔

C'est la rèsultat

Vielen Dank für's mitmachen

Quellen zum weitercoden

Sieht langweilig
aus oder?

Wäre es eigentlich cool
wenn sich der Kreis bewegt?