chore(de): translate diff [2024-10-31]

Machine translation from English using gpt-4o-2024-08-06.

Source: https://github.com/mdn/content/tree/217a5e09a120f8d8ae3de0505ab4d9de918126f7

System prompt:

```md
You are tasked with translating MDN Web Docs content from English to German.

Ensure that the translation is accurate, preserves technical terminology, and follows the rules provided below.

# Rules for Translation

1. Format:

   - The input is a Markdown file.
   - The output should be a Markdown file.
   - Return the raw output, without wrapping it in a Markdown code block.
   - Keep GFM alert syntax untranslated, such as `> [!NOTE]`, `> [!WARNING]`, and `> [!CALLOUT]`.
   - If the input contains HTML tags wrapped in backticks (e.g. `<video>`), make sure they are wrapped in the output.

2. Language:

   - Prefer formal language ("Sie") over informal language ("du").

3. Code blocks:

   - Do not translate code blocks.
   - Do not translate terms wrapped in backticks.

4. Macro calls:

   - MDN uses macros for dynamic content insertion. These macros must remain **unchanged** and not translated.
   - Macro calls start with `{{`, followed by the macro name, optional parameters, and end with `}}`.
   - Avoid invalid macro calls by ensuring curly braces, parentheses, and quotes are closed properly.

5. Technical terms and code snippets in text:

   - Keep technical terms like element names, attributes, and method names in **English**. Only translate the surrounding descriptive text.

6. Links and References:

   - Translate link descriptions, but keep the URLs and their structure intact.
   - Do not change the locale in URLs.

7. Glossary:

   - "Browser compatibility" => "Browser-Kompatibilität"
   - "Guide" => "Leitfaden"
   - "How to" => "Anleitung"

# Translation Scope

Translate the following Markdown content from **English** to **German** while adhering to the rules above.
```

files/de/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md

@@ -1,32 +1,32 @@
 ---
-title: Laden Sie die Assets und zeigen Sie sie auf dem Bildschirm an
+title: Laden der Assets und Anzeige auf dem Bildschirm
 slug: Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen
 l10n:
-  sourceCommit: b0d4232c133f19213742db2286d2c293ce71f674
+  sourceCommit: c5cba390fe98f5133f2548fde041b30edc0693f7
 ---
 
 {{GamesSidebar}}
 
-{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Scaling", "Games/Workflows/2D_Breakout_game_Phaser/Move the ball")}}
+{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Scaling", "Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball")}}
 
-Dies ist der **3. Schritt** von 16 im [Gamedev Phaser-Tutorial](/de/docs/Games/Tutorials/2D_breakout_game_Phaser). Den Quellcode, wie er nach Abschluss dieser Lektion aussehen sollte, finden Sie unter [Gamedev-Phaser-Content-Kit/demos/lesson03.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson03.html).
+Dies ist der **3. Schritt** von 16 im [Gamedev Phaser Tutorial](/de/docs/Games/Tutorials/2D_breakout_game_Phaser). Sie finden den Quellcode, wie er nach Abschluss dieser Lektion aussehen sollte, unter [Gamedev-Phaser-Content-Kit/demos/lesson03.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson03.html).
 
-Unser Spiel wird einen Ball zeigen, der über den Bildschirm rollt, von einem Paddel abprallt und Ziegel zerstört, um Punkte zu sammeln – klingt vertraut, oder? In diesem Artikel werden wir uns ansehen, wie man Sprites in unsere Spielwelt einfügt.
+Unser Spiel wird einen Ball umfassen, der über den Bildschirm rollt, von einem Schläger abprallt und Ziegel zerstört, um Punkte zu sammeln—vertraut, oder? In diesem Artikel schauen wir uns an, wie man Sprites in unser Spielwelt hinzufügt.
 
 ## Einen Ball haben
 
-Beginnen wir mit der Erstellung einer JavaScript-Variable, die unseren Ball repräsentiert. Fügen Sie die folgende Zeile zwischen dem Spielinitialisierungscode (unserem `const game` Block) und der `preload()`-Funktion hinzu:
+Lassen Sie uns mit der Erstellung einer JavaScript-Variable beginnen, die unseren Ball repräsentiert. Fügen Sie die folgende Zeile zwischen dem Spielinitialisierungscode (unserem `const game` Block) und der `preload()` Funktion ein:
 
 ```js
 let ball;
 ```
 
 > [!NOTE]
-> Im Rahmen dieses Tutorials werden wir globale Variablen verwenden. Das Ziel des Tutorials ist es, Phaser-spezifische Ansätze zur Spieleentwicklung zu lehren und nicht die besten subjektiven Ansätze ausführlich zu behandeln.
+> Für den Zweck dieses Tutorials verwenden wir globale Variablen. Das Ziel des Tutorials ist es, Phaser-spezifische Ansätze für die Spieleentwicklung zu lehren, anstatt sich mit subjektiven Best Practices zu beschäftigen.
 
-## Laden des Ballsprites
+## Laden des Ball-Sprites
 
-Mit Phaser ist das Laden von Bildern und das Anzeigen auf unserer Leinwand viel einfacher als mit reinem JavaScript. Um das Asset zu laden, verwenden wir das `game`-Objekt, das von Phaser erstellt wurde, und führen dessen Methode `load.image()` aus. Fügen Sie die folgende neue Zeile direkt in die `preload()`-Funktion unten ein:
+Das Laden von Bildern und deren Anzeige auf unserem Canvas ist mit Phaser viel einfacher als mit reinem JavaScript. Um das Asset zu laden, verwenden wir das von Phaser erstellte `game` Objekt, indem wir dessen `load.image()` Methode ausführen. Fügen Sie die folgende neue Zeile direkt in die `preload()` Funktion am Ende ein:
 
 ```js
 function preload() {
@@ -35,28 +35,28 @@ function preload() {
 }
 ```
 
-Der erste Parameter, den wir dem Asset geben möchten, ist der Name, der in unserem Spielcode verwendet wird — zum Beispiel in unserem `ball` Variablennamen — deshalb müssen wir sicherstellen, dass er derselbe ist. Der zweite Parameter ist der relative Pfad zum grafischen Asset. In unserem Fall werden wir das Bild für unseren Ball laden. (Beachten Sie, dass der Dateiname nicht unbedingt auch derselbe sein muss, aber wir empfehlen dies, da es alles einfacher macht, zu folgen.)
+Der erste Parameter, den wir dem Asset geben möchten, ist der Name, der in unserem gesamten Spielcode verwendet wird—zum Beispiel in unserem `ball` Variablennamen—daher müssen wir sicherstellen, dass er derselbe ist. Der zweite Parameter ist der relative Pfad zum Grafik-Asset. In unserem Fall werden wir das Bild für unseren Ball laden. (Beachten Sie, dass der Dateiname nicht ebenfalls identisch sein muss, aber wir würden es empfehlen, da es alles einfacher zu verfolgen macht.)
 
-Natürlich muss das Bild, um geladen zu werden, in unserem Codeverzeichnis verfügbar sein. [Holen Sie sich das Ballbild von GitHub](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/ball.png), und speichern Sie es in einem `/img` Verzeichnis am selben Ort wie Ihre `index.html` Datei.
+Natürlich muss das Bild verfügbar in unserem Codeverzeichnis sein, um es zu laden. [Laden Sie das Ballbild von GitHub herunter](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/ball.png), und speichern Sie es in einem `/img` Verzeichnis am selben Ort wie Ihre `index.html` Datei.
 
-Jetzt, um es auf dem Bildschirm zu zeigen, verwenden wir eine andere Phaser-Methode namens `add.sprite()`; fügen Sie die folgende neue Codezeile in die `create()`-Funktion hinzu, wie gezeigt:
+Um es nun auf dem Bildschirm anzuzeigen, verwenden wir eine weitere Phaser-Methode namens `add.sprite()`; fügen Sie die folgende neue Codezeile in die `create()` Funktion ein, wie gezeigt:
 
 ```js
 function create() {
   ball = game.add.sprite(50, 50, "ball");
 }
 ```
 
-Dies wird den Ball dem Spiel hinzufügen und auf dem Bildschirm rendern. Die ersten beiden Parameter sind die x- und y-Koordinaten der Leinwand, wo Sie ihn hinzufügen möchten, und der dritte ist der Name des Assets, das wir zuvor definiert haben. Das war's — wenn Sie Ihre `index.html` Datei laden, werden Sie sehen, dass das Bild bereits geladen und auf der Leinwand gerendert wird!
+Dies wird den Ball dem Spiel hinzufügen und auf dem Bildschirm rendern. Die ersten beiden Parameter sind die x- und y-Koordinaten des Canvas, wo Sie ihn hinzufügen möchten, und der dritte ist der Name des zuvor definierten Assets. Das war's—wenn Sie Ihre `index.html` Datei laden, sehen Sie das Bild bereits auf dem Canvas geladen und gerendert!
 
 ## Vergleichen Sie Ihren Code
 
-Sie können den fertigen Code für diese Lektion im unten stehenden Live-Demo selbst überprüfen und damit spielen, um besser zu verstehen, wie er funktioniert:
+Sie können den fertigen Code für diese Lektion selbst im folgenden Live-Demo überprüfen und damit spielen, um besser zu verstehen, wie es funktioniert:
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/98xrv9x5/","","400")}}
 
 ## Nächste Schritte
 
-Das Ausdrucken des Balls war einfach; als nächstes werden wir versuchen, den Ball auf dem Bildschirm [zu bewegen](/de/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball).
+Das Ausdrucken des Balls war einfach; als Nächstes werden wir versuchen, [den Ball zu bewegen](/de/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball) auf dem Bildschirm.
 
-{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Scaling", "Games/Workflows/2D_Breakout_game_Phaser/Move the ball")}}
+{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Scaling", "Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball")}}