Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- gf2:javascript [2025/06/09 17:20] – marroc
+++ gf2:javascript [2025/06/09 17:33] (aktuell) – marroc
@@ Zeile 2: / Zeile 2: @@
 Anhand vom Snake game sollen Sie verstehen, wofür JavaScript beispielsweise verwendet werden kann und dies auch etwas "ausprobieren".\\
-**Was ist JavaScript?**\\
+===Was ist JavaScript?===
 JavaScript ist eine Programmiersprache, die ursprünglich für die Entwicklung interaktiver Webseiten genutzt wurde. \\
 Die json Programme werden direkt im Browser ausgeführt und ermöglichen, Webseiten dynamisch zu gestalten und auf Benutzeraktionen zu reagieren. \\
 Heute wird JavaScript aber weit über den Browser hinaus eingesetzt und eine wichtige Programmiersprache für Webentwicklung, Server-Anwendungen, mobile Apps und sogar Desktop-Software geworden. Die Sprache ist dynamisch typisiert (Typ einer Variable wird erst zur Laufzeit bestimmt), relativ einfach zu erlernen und sehr vielseitig einsetzbar.
+===Snake Spiel===
+Das Ziel des Spiels ist es, die Schlange (das kleine Quadrat) zu steuern und das Futter zu fressen. Dadurch wird die Schlange länger und Punkte werden gesammelt. Aber Achtung: Das Spiel endet, wenn die Schlange gegen die Wand stößt oder sich selbst berührt!
 ==== Schritt 1 ====
   - Es ist nötig, dass Sie Visual Studio Code installiert haben. Falls dies noch nicht der Fall ist, sollten Sie mindestens zu zweit an einem Computer mit Visualstudiocode arbeiten können. Download [[https://code.visualstudio.com/download| https://code.visualstudio.com/download]] hier möglich.
-  - Laden Sie sich die Dateien des folgenden Ordners herunter: [[https://eduetatfr-my.sharepoint.com/:f:/g/personal/cathrine_marro_edufr_ch/EkaE_xa3X1VIsk9IwOnvaLUB_BTM8azxfmo4dNzhy1NlyA?e=GsrUS5|Link auf Onedrive von CMarro]]
+  - Laden Sie sich die Dateien herunter
+ des folgenden Ordners herunter: [[https://eduetatfr-my.sharepoint.com/:f:/g/personal/cathrine_marro_edufr_ch/EkaE_xa3X1VIsk9IwOnvaLUB_BTM8azxfmo4dNzhy1NlyA?e=GsrUS5|Link auf Onedrive von CMarro]]. Darin befindet sich eine app.css, eine app.js, eine html-Datei darin, die Sie nutzen müssen.
 ==== Schritt 2 ====
@@ Zeile 249: / Zeile 251: @@
 **Auftrag 2**\\
-Verändern Sie die Farbe des Food-Quadrats.\\
+  * Verändern Sie die Farbe des Food-Quadrats.\\
-Verändern Sie das Board, so das es Häuschen / ein Gitter hat.\\
+  * Verändern Sie das Board, so das es Häuschen / ein Gitter hat.\\
-Fügen Sie Buttons unten am Spielfeld an, um die Richtung dort zu ändern und nicht mehr mit den Pfeiltasten. \\
+  * Fügen Sie Buttons unten am Spielfeld an, um die Richtung dort zu ändern und nicht mehr mit den Pfeiltasten. \\
-Zusätzlich kann auch die Geschwindigkeit nach jedem Essen der Schlange erhöht werden.\\
+  * Zusätzlich kann auch die Geschwindigkeit nach jedem Essen der Schlange erhöht werden.\\
 \\
 Sie dürfen sich auch Hilfe bei einer KI // einem LLM holen, falls Sie möchten.
-</WRAP>
@@ Zeile 307: / Zeile 308: @@
 <body>
   Speed: <input type="number" id="gameSpeed" value="5" min="1" max="9" step="1" />
   <input type="button" value="Start" id="gameStart" />
   <input type="button" value="Schritt für Schritt" id="manualStep" />
@@ Zeile 313: / Zeile 313: @@
   <canvas id="gameArea"></canvas>
   <br>
- <input type="button" value="hoch" id="moveup"  />
+<script src="app.js"></script>
- <input type="button" value="runter" id="movedown"   />
+<button id="moveUp">Hoch</button>
- <input type="button" value="links" id="moveleft"   />
+<br>
- <input type="button" value="rechts" id="moveright"  />
+<button id="moveLeft">links</button>
-  <script src="app.js"></script>
+<button id="moveRight">rechts </button>
+<br>
+<button id="moveDown">runter</button>
 </body>
 </code>
@@ Zeile 367: / Zeile 370: @@
 </panel>
 </accordion>
+</WRAP>