Pygame_Uebung.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "eb1c015c",
   "metadata": {},
   "source": [
    "# Ein Ping-Pong-Spiel programmieren"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d47002b8",
   "metadata": {},
   "source": [
    "In diesem Notebook soll Schritt für Schritt ein Ping-Pong-Spiel programmiert werden. \n",
    "\n",
    "![](Spielfeld.svg)\n",
    "\n",
    "Die Idee und der Code stammen aus folgendem Tutorial: https://www.youtube.com/watch?v=Qf3-aDXG8q4\n",
    "\n",
    "--------------------------------------------"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5187caa4",
   "metadata": {},
   "source": [
    "### Schritt für Schritt\n",
    "\n",
    "Zunächst müssen wir sichergehen, dass alle notwendigen Packages installiert und aktuell sind:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9fe44cf2",
   "metadata": {},
   "outputs": [],
   "source": [
    "!python.exe -m pip install --upgrade pip         \n",
    "!pip install pygame"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f5def114",
   "metadata": {},
   "source": [
    "Nun bereiten wir unsere Umgebung vor. Wir benötigen das Package \"pygame\", mit welchem man Spiele entwickeln kann. Schau gern mal auf folgender Seite vorbei und sieh dir an, was alles möglich ist! https://www.pygame.org/tags/all"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "90b50eab",
   "metadata": {},
   "outputs": [],
   "source": [
    "import pygame, sys, random\n",
    "pygame.init()\n",
    "clock = pygame.time.Clock()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3f4d375f",
   "metadata": {},
   "source": [
    "Das Spiel soll später in einem extra Fenster geöffnet werden. Wir können festlegen wie groß es sein soll."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2efd87d9",
   "metadata": {},
   "outputs": [],
   "source": [
    "screen_width = 1000\n",
    "screen_height = 750\n",
    "screen = pygame.display.set_mode((screen_width,screen_height))\n",
    "pygame.display.set_caption('Ping-Pong-Spiel') # Legt den Namen des Fensters fest."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a39d5f6f",
   "metadata": {},
   "source": [
    "Bisher haben wir nur eine schwarze Oberfläche. Wir fügen jetzt den Ball hinzu und die später beweglichen \"Bretter\" (Striche) der Spieler. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bd12bb53",
   "metadata": {},
   "outputs": [],
   "source": [
    "# pygame.Rect(x,y,breite,höhe )\n",
    "# x, y sind die Koordinaten, an denen das Objekt erscheinen soll\n",
    "\n",
    "ball = pygame.Rect(screen_width/2-15,screen_height/2-15,30,30) # mittig auf dem Spielfeld\n",
    "player = pygame.Rect(screen_width -20,screen_height/2-70,10,140) # rechte Seite, mittig\n",
    "opponent = pygame.Rect(10,screen_height/2-70,10,140) # linke Seite, mittig\n",
    "\n",
    "# Wir geben den Objekten noch Farben, da sie sich sonst nicht vom Hintergrund abheben würden.\n",
    "# Um die Farbe zu verändern, kannst du für jede der drei Zahlen einen Wert zwischen 0 und 255 wählen.\n",
    "bg_color = (0,0,0)\n",
    "object_color = (200,200,200) "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "54003c4d",
   "metadata": {},
   "source": [
    "Aktuell lässt sich unser Fenster noch nicht schließen, sondern stürzt immer ab. Deshalb fügen wir folgenden Code ein: "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e62ba4cb",
   "metadata": {},
   "outputs": [],
   "source": [
    "while True: \n",
    "    for event in pygame.event.get():\n",
    "        if event.type == pygame.QUIT:\n",
    "            pygame.quit()   # schließt das Fenster\n",
    "            sys.exit()      # schließt das gesamte Programm"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "462930ce",
   "metadata": {},
   "source": [
    "Damit die Objekte in unserem Fenster angezeigt werden, nutzen wir die Funktion \"pygame.draw\". Diese erwartete drei Attribute: \n",
    "\n",
    "Das Attribut **surface** ist in unserem Fall nicht so bedeutend, da wir ein sehr simples Spiel programmieren. In komplexeren Spielen kann es sinnvoll sein, die Objekte auf mehrere Schichten zu verteilen. Diese kann man über das Attribut surface zuweisen. \n",
    "\n",
    "Dem Attribut **color** können wir die von uns gewählt Farbe als Variable übergeben.\n",
    "\n",
    "Das Attribut **rect** erwartete das Objekt, welches angezeigt werden soll. Diese haben wir vorher mit der Funktion *pygame.Rect* erstellt."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dfb283b9",
   "metadata": {},
   "outputs": [],
   "source": [
    "# pygame.draw(surface, color, rect)\n",
    "    screen.fill(bg_color) # die untere Schicht zuerst zeichnen\n",
    "    pygame.draw.rect(screen, object_color, player)\n",
    "    pygame.draw.rect(screen, object_color, opponent)        \n",
    "    pygame.draw.ellipse(screen, object_color, ball)\n",
    "    pygame.draw.aaline(screen, object_color, (screen_width/2,0), (screen_width/2,screen_height))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f9f6df74",
   "metadata": {},
   "source": [
    "### Zeit zum Ausprobieren!\n",
    "\n",
    "In der nächsten Zelle ist der bisher geschrieben Code zusammengetragen und am Ende noch ein Befehl, um alles darzustellen. Sieh dir an was passiert. Denk daran, dass du hier gern die Farbveränderungen vornehmen kannst!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d7700ae5",
   "metadata": {},
   "outputs": [],
   "source": [
    "# die Umgebung vorbereiten\n",
    "import pygame, sys, random\n",
    "pygame.init()\n",
    "clock = pygame.time.Clock()\n",
    "\n",
    "# das Fenster erstellen\n",
    "screen_width = 1000\n",
    "screen_height = 750\n",
    "screen = pygame.display.set_mode((screen_width,screen_height))\n",
    "pygame.display.set_caption('Ping-Pong-Spiel')\n",
    "\n",
    "# die Objekte und deren Farbe erstellen und festlegen\n",
    "ball = pygame.Rect(screen_width/2-15,screen_height/2-15,30,30) # mittig auf dem Spielfeld\n",
    "player = pygame.Rect(screen_width -20,screen_height/2-70,10,140) # rechte Seite, mittig\n",
    "opponent = pygame.Rect(10,screen_height/2-70,10,140) # linke Seite, mittig\n",
    "\n",
    "bg_color = (0,0,0)\n",
    "object_color = (200,200,200)\n",
    "\n",
    "# schließen des Programmes\n",
    "while True: \n",
    "    for event in pygame.event.get():\n",
    "        if event.type == pygame.QUIT:\n",
    "            pygame.quit()   \n",
    "            sys.exit()\n",
    "            \n",
    "# Zeichnen \n",
    "    screen.fill(bg_color) \n",
    "    pygame.draw.rect(screen, object_color, player)\n",
    "    pygame.draw.rect(screen, object_color, opponent)        \n",
    "    pygame.draw.ellipse(screen, object_color, ball)\n",
    "    pygame.draw.aaline(screen, object_color, (screen_width/2,0), (screen_width/2,screen_height))\n",
    "            \n",
    "            \n",
    "    pygame.display.flip()\n",
    "    clock.tick(60) # 60 steht hier für 60 fps (frames per second) und gibt an, wie oft das Bild aktualisiert wird"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e1544127",
   "metadata": {},
   "source": [
    "Damit jetzt so langsam ein Spiel entsteht, fügen wir nun den Code hinzu, der später die Bewegung ermöglicht. Wir legen fest, wie schnell sich die Objekte bewegen. Das ist auch ein super Regulator für den Schwierigkeitsgrad: je höher die Zahlen, desto schneller und desto schwieriger."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "db7904d4",
   "metadata": {},
   "outputs": [],
   "source": [
    "ball_speed_x = 7 * (random.choice((1,-1))) # der Grund für die Multiplikation wird später noch erläutert\n",
    "ball_speed_y = 7 * (random.choice((1,-1)))\n",
    "player_speed = 0 # Da wir den Spieler am Ende selbst steuern, hat dieser hier noch keine Geschwindigkeit. \n",
    "opponent_speed = 7"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1d7fe945",
   "metadata": {},
   "source": [
    "Die Regeln zur Bewegung des Balls fassen wir in einer Funktion zusammen.\n",
    "\n",
    "Die Objekte werden wie Rechtecke behandelt, da wir sie über die Funktion pygame.Rect angelegt haben. Um diese zu bewegen, kann man an den verschiedenen Punkten ansetzen:\n",
    "![](rectangle.svg)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "74c89f37",
   "metadata": {},
   "outputs": [],
   "source": [
    "# die Bewegung des Balls\n",
    "def ball_animation():\n",
    "    global ball_speed_x, ball_speed_y # es ist wichtig, dass die Variable hier global ist!\n",
    "    ball.x += ball_speed_x # Die x-Koordinate des Balls soll um den Wert der Geschwindigkeit erhöht werden\n",
    "    ball.y += ball_speed_y\n",
    "    \n",
    "    if ball.top <= 0 or ball.bottom >= screen_height: # 0 ist hier als Koordinate zu verstehen\n",
    "        ball_speed_y *= -1 # sorgt für einen Richtungswechsel (der Ball prallt ab)\n",
    "    if ball.left <= 0 or ball.right >= screen_width: \n",
    "        ball_restart()\n",
    "        \n",
    "    if ball.colliderect(player) or ball.colliderect(opponent): # Der Ball wird erfolgreich vom Spieler / Gegner getroffen.\n",
    "        ball_speed_x *= -1"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ca9f7061",
   "metadata": {},
   "source": [
    "Wie können wir jetzt unseren Spieler bewegen? "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a736701f",
   "metadata": {},
   "outputs": [],
   "source": [
    "if event.type == pygame.KEYDOWN: # KEYDOWN bedeutet eine beliebige Taste wird gedrückt\n",
    "    if event.key == pygame.K_DOWN: # K_DOWN ist die Pfeiltaste nach unten\n",
    "        player_speed += 7\n",
    "    if event.key == pygame.K_UP:\n",
    "        player_speed -= 7\n",
    "                \n",
    "if event.type == pygame.KEYUP:\n",
    "    if event.key == pygame.K_DOWN:\n",
    "        player_speed -= 7\n",
    "    if event.key == pygame.K_UP:\n",
    "        player_speed += 7"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "62ca6990",
   "metadata": {},
   "source": [
    "Aktuell kann das Brett des Spielers sich noch aus dem Bildausschnitt hinaus bewegen. Um das zu ändern, schreiben wir eine weitere Funktion"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cbf65817",
   "metadata": {},
   "outputs": [],
   "source": [
    "def player_animation():\n",
    "    player.y += player_speed\n",
    "    if player.top <= 0: \n",
    "        player.top=0\n",
    "    if player.bottom >= screen_height:\n",
    "        player.bottom = screen_height"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ae1cc1c9",
   "metadata": {},
   "source": [
    "Unser Spiel ist jetz fast fertig! Wir brauchen aber noch einen sich bewegenden Gegner. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dee362b6",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Die Bewegungsrichtung des Gegners hängt von der Position des Balles ab. \n",
    "def opponent_animation():\n",
    "    if opponent.top < ball.y:\n",
    "        opponent.top += opponent_speed\n",
    "    if opponent.bottom > ball.y:\n",
    "        opponent.bottom -= opponent_speed\n",
    "    if opponent.top <= 0: \n",
    "        opponent.top=0\n",
    "    if opponent.bottom >= screen_height:\n",
    "        opponent.bottom = screen_height"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "26987bc3",
   "metadata": {},
   "source": [
    "Bisher kann noch niemand einen Punkt erzielen, da der Ball auch einfach von den Wänden abprallt, wenn er nicht von den Spielern getroffen wird. Lass uns das noch anpassen. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1e0fe8a7",
   "metadata": {},
   "outputs": [],
   "source": [
    "def ball_restart():\n",
    "    global ball_speed_x, ball_speed_y\n",
    "    ball.center = (screen_width/2, screen_height/2) # platziert den Ball mittig auf dem Spielfeld\n",
    "    ball_speed_y *= random.choice((1,-1)) # random.choice sorgt dafür, dass der Ball nicht immer in die gleiche Richtung startet\n",
    "    ball_speed_x *= random.choice((1,-1))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "623a1f3c",
   "metadata": {},
   "source": [
    "### SUPER! Wir haben allen Code zusammen den wir brauchen. Spiel gern mal eine Runde!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7486f34d",
   "metadata": {},
   "outputs": [],
   "source": [
    "# die Umgebung vorbereiten\n",
    "import pygame, sys, random\n",
    "pygame.init()\n",
    "clock = pygame.time.Clock()\n",
    "\n",
    "# Funktion für die Bewegung des Balls\n",
    "def ball_animation():\n",
    "    global ball_speed_x, ball_speed_y, player_score, opponent_score\n",
    "    ball.x += ball_speed_x\n",
    "    ball.y += ball_speed_y\n",
    "    \n",
    "    if ball.top <= 0 or ball.bottom >= screen_height:\n",
    "        ball_speed_y *= -1\n",
    "    if ball.left <= 0:\n",
    "        ball_restart()\n",
    "        \n",
    "    if ball.right >= screen_width:\n",
    "        ball_restart()\n",
    "        \n",
    "        \n",
    "    if ball.colliderect(player) or ball.colliderect(opponent):\n",
    "        ball_speed_x *= -1\n",
    "\n",
    "# Schränkt die Bewegung des Spielers auf die Höhe des Feldes ein.\n",
    "def player_animation():\n",
    "    player.y += player_speed\n",
    "    if player.top <= 0: \n",
    "        player.top=0\n",
    "    if player.bottom >= screen_height:\n",
    "        player.bottom = screen_height\n",
    "        \n",
    "# die Bewegung des Gegners\n",
    "def opponent_animation():\n",
    "    if opponent.top < ball.y:\n",
    "        opponent.top += opponent_speed\n",
    "    if opponent.bottom > ball.y:\n",
    "        opponent.bottom -= opponent_speed\n",
    "    if opponent.top <= 0: \n",
    "        opponent.top=0\n",
    "    if opponent.bottom >= screen_height:\n",
    "        opponent.bottom = screen_height\n",
    "        \n",
    "# nach einem erzielten Punkt den Ball in der Mitte platieren und neustarten\n",
    "def ball_restart():\n",
    "    global ball_speed_x, ball_speed_y\n",
    "    ball.center = (screen_width/2, screen_height/2)\n",
    "    ball_speed_y *= random.choice((1,-1))\n",
    "    ball_speed_x *= random.choice((1,-1))\n",
    "\n",
    "\n",
    "# das Fenster erstellen\n",
    "screen_width = 1000\n",
    "screen_height = 750\n",
    "screen = pygame.display.set_mode((screen_width,screen_height))\n",
    "pygame.display.set_caption('Ping-Pong-Spiel')\n",
    "\n",
    "# Objekte erstellen\n",
    "ball = pygame.Rect(screen_width/2-15,screen_height/2-15,30,30)\n",
    "player = pygame.Rect(screen_width -20,screen_height/2-70,10,140)\n",
    "opponent = pygame.Rect(10,screen_height/2-70,10,140)\n",
    "\n",
    "bg_color = (0,0,0)\n",
    "object_color = (200,200,200)\n",
    "\n",
    "# Geschwindigkeit (und Schwierigkeit) festlegen\n",
    "ball_speed_x = 7 * (random.choice((1,-1)))\n",
    "ball_speed_y = 7 * (random.choice((1,-1)))\n",
    "player_speed = 0\n",
    "opponent_speed = 7\n",
    "\n",
    "\n",
    "while True: \n",
    "    for event in pygame.event.get(): # diese Schleife schließt das Programm später\n",
    "        if event.type == pygame.QUIT:\n",
    "            pygame.quit()\n",
    "            sys.exit() \n",
    "            \n",
    "        if event.type == pygame.KEYDOWN: #Bewegung des Spielers\n",
    "            if event.key == pygame.K_DOWN:\n",
    "                player_speed += 7\n",
    "            if event.key == pygame.K_UP:\n",
    "                player_speed -= 7\n",
    "                \n",
    "        if event.type == pygame.KEYUP:\n",
    "            if event.key == pygame.K_DOWN:\n",
    "                player_speed -= 7\n",
    "            if event.key == pygame.K_UP:\n",
    "                player_speed += 7\n",
    "                \n",
    "    # Einbinden der Funktionen\n",
    "    ball_animation()\n",
    "    player_animation()\n",
    "    opponent_animation()\n",
    "    \n",
    "    # Zeichnen \n",
    "    screen.fill(bg_color) \n",
    "    pygame.draw.rect(screen,object_color, player)\n",
    "    pygame.draw.rect(screen,object_color, opponent)        \n",
    "    pygame.draw.ellipse(screen,object_color, ball)\n",
    "    pygame.draw.aaline(screen, object_color, (screen_width/2,0), (screen_width/2,screen_height))\n",
    "    \n",
    "\n",
    "    # das Bild aktualisieren\n",
    "    pygame.display.flip()\n",
    "    clock.tick(60)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "350f99da",
   "metadata": {},
   "source": [
    "### Ideen für dich: \n",
    "* ändere die Farben\n",
    "* probiere verschiedene Schwierigkeitsgrade aus\n",
    "* füge einen Counter ein (https://www.youtube.com/watch?v=E4Ih9mpn5tk bis 10:55)\n",
    "* füge einen Countdown für den Start ein (https://www.youtube.com/watch?v=E4Ih9mpn5tk ab 11:00)\n",
    "* \n",
    "* "
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}