Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- gf2:javascript [2025/06/09 16:19] – 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 240: / Zeile 242: @@
 Um etwas besser am Programm arbeiten zu können, hilft es eventuell, die folgenden Zeilen durch einen doppelten Backslash aus zu kommentieren:
 <code javascript>
 // clearInterval(timer);
 //timer = setInterval(updateGameArea, 500 / speedSize);
 </code>
 <WRAP nicebox green>
-**Auftrag 2: **
+**Auftrag 2**\\
+  * Verändern Sie die Farbe des Food-Quadrats.\\
+  * 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. \\
+  * 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.
-- Verändern Sie die Farbe des Food-Quadrats.\\
-- Verändern Sie das Board, so das es Häuschen / ein Gitter hat.\\
+<accordion>
+<panel title="mögliche Lösungen">
+Um die Farbe des Essens zu verändern, könnte die Funktion createSquare verdoppelt werden und dann bei der kopierten Version der Funktion kann die Farbe anders eingestellt werden, beispielsweise
+<code javascript>
+gameAreaContext.fillStyle = '#FF0000'
+</code>
-- Fügen Sie Buttons unten am Spielfeld an, um die Richtung dort zu ändern und nicht mehr mit den Pfeiltasten. \\
+und weiter unten dann
-- Was passisert, wenn gameStart.disabled notiert wird?\\
+<code javascript>
+  // create the food
-- Zusätzlich kann auch die Geschwindigkeit nach jedem Essen der Schlange erhöht werden.\\
+  createSquare1(snakeFood.x, snakeFood.y);
+ </code>
-- Sie dürfen sich auch Hilfe bei einer KI // einem LLM holen, falls Sie möchten.\\
+Um ein Raster zu erhalten, muss die createGameArea() Funktion verändert werden, hier kann beispielsweise wie folgt vorgegangen werden:
-</WRAP>
+<code javascript>
+function createGameArea() {
+  gameAreaContext.fillStyle = '#FFFFFF';
+  gameAreaContext.fillRect(0, 0, gameAreaWidth, gameAreaHeight);
+  gameAreaContext.strokeStyle = '#000000';
+  gameAreaContext.strokeRect(0, 0, gameAreaWidth, gameAreaHeight);
+// Raster zeichnen
+  const gridSize = 20; // Größe der Rasterzellen
+  gameAreaContext.strokeStyle = '#CCCCCC'; // Hellgraue Rasterlinien
+  gameAreaContext.lineWidth = 1;
+// Vertikale Linien
+  for (let ix = 0; ix <= gameAreaWidth; ix= gridSize+1) {
+    gameAreaContext.beginPath();
+    gameAreaContext.moveTo(ix, 0);
+    gameAreaContext.lineTo(ix, gameAreaHeight);
+    gameAreaContext.stroke();
+  }
+  // Horizontale Linien
+  for (let iy = 0; iy <= gameAreaHeight; iy = gridSize+1) {
+    gameAreaContext.beginPath();
+    gameAreaContext.moveTo(0, iy);
+    gameAreaContext.lineTo(gameAreaWidth, iy);
+    gameAreaContext.stroke();
+  }
+  // Schwarzer Rahmen (wie vorher)
+  gameAreaContext.strokeStyle = '#000000';
+  gameAreaContext.strokeRect(0, 0, gameAreaWidth, gameAreaHeight);
+}
+</code>
+Um die Steuerung auf der Website unterhalb des Spielfelds anzeigen zu lassen, muss in der html-Datei beispielsweise folgendes verändert werden:
+<code html>
+<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" />
+  <br> <br>
+  <canvas id="gameArea"></canvas>
+  <br>
+<script src="app.js"></script>
+<button id="moveUp">Hoch</button>
+<br>
+<button id="moveLeft">links</button>
+<button id="moveRight">rechts </button>
+<br>
+<button id="moveDown">runter</button>
+</body>
+</code>
+und in der app.js Datei:
+Hier muss bei den Variablen noch für jede der vier Richtungen eine Variable dazugefügt werden.
+<code javascript>
+...
+  timer = {},
+  moveDown = {},
+  moveUp = {},
+  moveLeft = {},
+  moveRight= {};
+</code>
+Danach muss auch die funktion initElement() erweitert werden.
+<code javascript>
+function initElement() {
+  gameStart = document.querySelector('#gameStart');
+  gameSpeed = document.querySelector('#gameSpeed');
+  gameArea = document.querySelector('#gameArea');
+  manualStep = document.querySelector('#manualStep');
+  moveDown = document.querySelector('#moveDown');
+  moveUp = document.querySelector('#moveUp');
+  moveLeft = document.querySelector('#moveLeft');
+  moveRight = document.querySelector('#moveRight');
+ </code>
+zudem muss auch die Funktion initEvent() vervollständigt werden:
+<code javascript>
+function initEvent() {
+  gameStart.addEventListener('click', onStartGame);
+  manualStep.addEventListener('click', stepOnClick)
+  window.addEventListener('keydown', changeDirection);
+  moveDown.addEventListener('click', function() {
+    if (snakeDirection != 'up') snakeDirection = 'down';
+  });
+  moveLeft.addEventListener('click', function() {
+    if (snakeDirection != 'right') snakeDirection = 'left';
+  });
+  moveRight.addEventListener('click', function() {
+    if (snakeDirection != 'left') snakeDirection = 'right';
+  });
+  moveUp.addEventListener('click', function() {
+    if (snakeDirection != 'down') snakeDirection = 'up';
+  });
+}
+</code>
+</panel>
+</accordion>
+</WRAP>