v0.1.0

2025-07-29 17:02:15 +02:00 · 2025-07-29 17:02:15 +02:00 · 8f988bb78b
commit 8f988bb78b
parent 0589cdf554
9 changed files with 158 additions and 33 deletions
--- a/.assets/icon.ico
+++ b/.assets/icon.ico
--- a/.assets/logo_1024x1024.png
+++ b/.assets/logo_1024x1024.png
--- a/.assets/logo_512x512.png
+++ b/.assets/logo_512x512.png
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,6 @@
+# CHANGELOG
+
+- **0.1.0.alpha-1.0**
+  - [x] Pong hinzugefügt
+
+---
--- a/README.md
+++ b/README.md
@ -1,40 +1,26 @@
-# QElectrotech [DE]
+# **Javascript/ Typescript [DE]**

-Alles zum Thema QElectroTech ...
+![LOGO](./.assets/logo_512x512.png)

-![Buch-Logo](.media/logo.svg)  
+&copy; 1992-2025 - Adam Skotarczak

-Sammlung von Unterlagen und Informationen zu QElectrotech.
+- [**Javascript/ Typescript \[DE\]**](#javascript-typescript-de)
+  - [Übungen und Codebeispiele](#übungen-und-codebeispiele)
+    - [Asteroid](#asteroid)
+    - [Pong](#pong)
+
+Neue Versionen sind jeweils in den Commits erfasst.
+Beachte das [CHANGELOG.md](./CHANGELOG.md) und checke die entsprechende Version aus!

 ---

-## Informationen zu QElectrotech
+## Übungen und Codebeispiele

- [x] **Offizielle Internetseite:**  
-  - <https://qelectrotech.org/>  
- [x] **GitHUB Mirror:**  
-  - <https://github.com/qelectrotech/qelectrotech-source-mirror>  
-
-### Backups
-
- [x] [**Backup Dokumentation version 0.8 - build October 01, 2020 [EN]**](./dokumente/QElectroTechdoc-0.8.pdf)  
-  Diese OFFIZIELLE Dokumentation in Englischer Sprache, ist im Internet schwer zu finden da sehr verschachtelt untergebracht.
-  Die Originalquelle ist unter <https://download.qelectrotech.org/qet/> zu finden.
+### Asteroid

 ---

-## Submodule
+### [Pong](./codesnippes/pong.html)

- [x] **handbuch-QElectrotech**  
-  - **ORIGIN:**  
-    <https://local.ionivation.com/writer/handbuch-QElectroTech>
-  - **MIRROR:**  
-    <GITHUB>
-
---
-
-## Lizenz
-
-**(C) 2025 - Adam Skotarczak**  
-
---
+> **Beschreibung:**  
+> 100% allen in einem File und dient als Übung zu Evant-Handlern
--- a/2
+++ b/2
@ -1 +1 @@
-0.1.0.alpha-1.0
+0.1.0
--- a/codesnippes/asteroid.html
+++ b/codesnippes/asteroid.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <title>Asteroid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <!--
+    
+      Aktuell in Entwicklung!
+    
+    -->
+    <p>
+      <script>
+        /* Programmbeschreibung:
+
+        */
+        let appname = 'Asteroid'
+        document.writeln("HALLO");
+
+      </script>
+      <noscript>Kein JS aktiviert?</noscript>
+    </p>
+    <canvas id="canvas" width="600" height="200">
+    </canvas>
+  </body>
+</html>
--- a/codesnippes/pong.html
+++ b/codesnippes/pong.html
@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Pong in JS</title>
+  <style>
+    canvas {
+      display: block;
+      margin: 0 auto;
+      background: #000;
+    }
+  </style>
+</head>
+<body>
+  <canvas id="pong" width="800" height="600"></canvas>
+  <script>
+    const canvas = document.getElementById("pong");
+    const ctx = canvas.getContext("2d");
+
+    // 🏓 Spieleinstellungen
+    const paddleWidth = 10, paddleHeight = 100, ballSize = 10;
+    let leftY = 150, rightY = 150;
+    let ballX = 300, ballY = 200;
+    let ballDX = 3, ballDY = 3;
+
+    // 🎯 Framerate-Begrenzung
+    let lastTime = 0;
+    const fps = 60;
+    const interval = 1000 / fps;
+
+    // 🧍 Linkes Paddle per Tastatur
+    document.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowUp") leftY -= 20;
+    if (e.key === "ArrowDown") leftY += 20;
+
+    // Grenzen setzen
+    leftY = Math.max(0, Math.min(canvas.height - paddleHeight, leftY));
+    });
+
+    function gameLoop(now) {
+      requestAnimationFrame(gameLoop);
+
+      // ⏱ FPS-Begrenzung
+      const delta = now - lastTime;
+      if (delta < interval) return;
+      lastTime = now;
+
+      // 🧼 Hintergrund zeichnen
+      ctx.fillStyle = "black";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // 🎮 Paddles zeichnen
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, leftY, paddleWidth, paddleHeight); // Linkes Paddle
+      ctx.fillRect(canvas.width - paddleWidth, rightY, paddleWidth, paddleHeight); // Rechtes Paddle
+
+      // ⚽ Ball zeichnen
+      ctx.fillRect(ballX, ballY, ballSize, ballSize);
+
+      // 🚀 Ballbewegung
+      ballX += ballDX;
+      ballY += ballDY;
+
+      // 🔁 Kollision mit oben/unten
+      if (ballY <= 0 || ballY + ballSize >= canvas.height) {
+        ballDY = -ballDY;
+      }
+
+      // 🛡 Kollision mit Paddle links
+      if (
+        ballX <= paddleWidth &&
+        ballY >= leftY &&
+        ballY <= leftY + paddleHeight
+      ) {
+        ballDX = -ballDX;
+      }
+
+      // 🛡 Kollision mit Paddle rechts
+      if (
+        ballX + ballSize >= canvas.width - paddleWidth &&
+        ballY >= rightY &&
+        ballY <= rightY + paddleHeight
+      ) {
+        ballDX = -ballDX;
+      }
+
+      // ♻️ Ball zurücksetzen bei Punktverlust
+      if (ballX < 0 || ballX > canvas.width) {
+        ballX = canvas.width / 2;
+        ballY = canvas.height / 2;
+        ballDX = -ballDX;
+        ballDY = 3 * (Math.random() > 0.5 ? 1 : -1); // Zufällige Richtung
+      }
+
+      // 🤖 Einfache KI für rechtes Paddle
+      rightY += (ballY - rightY - paddleHeight / 2) * 0.1;
+
+    }
+
+    // 🔁 Spiel starten
+    requestAnimationFrame(gameLoop);
+  </script>
+</body>
+</html>
--- a/codesnippes/template.html
+++ b/codesnippes/template.html
@ -1,7 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="de">
  <head>
-       <title>Asteroid</title>
+    <meta charset="UTF-8">
+    <title>Titel</title>
  </head>
  <body>
    <p>