hawk-de · github-classroom · Jul 27, 2022 · Jul 28, 2022 · Jul 29, 2022 · Jul 29, 2022
diff --git a/2nd_Game b/2nd_Game
diff --git a/Button.png b/Button.png
diff --git a/Editing nutzloses-netz-Phelb:README.md at main · hawk-de:nutzloses-netz-Phelb.html b/Editing nutzloses-netz-Phelb:README.md at main · hawk-de:nutzloses-netz-Phelb.html
diff --git a/Geist-empty.png b/Geist-empty.png
diff --git a/Geist.png b/Geist.png
diff --git a/Magnet.png b/Magnet.png
diff --git a/Roboter.png b/Roboter.png
diff --git a/end.html b/end.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>End</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <script src="libraries/p5.min.js"></script>
+    <script src="libraries/p5.sound.min.js"></script>
+  </head>
+  <body>
+    <main>
+      <p>You didn't win, because nobody does! <br />Have a nice day! :)</p>
+    </main>
+  </body>
+</html>
diff --git a/game_2.html b/game_2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Game 2</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <script src="libraries/p5.min.js"></script>
+    <script src="libraries/p5.sound.min.js"></script>
+  </head>
+  <body>
+    <header>
+      <div id="someDiv"></div>
+    </header>
+    <main id="ghost">
+      <p>Touch the ghost!</p>
+      <!-- BOOOO YOU SCARED YET???-->
+      <div id="canvasForHTML"></div>
+    </main>
+    <footer>
+      <button type="button" class="butt" onclick="next('game_3.html')">
+        next
+      </button>
+    </footer>
+    <!--TIK TAK TIK TAK...-->
+    <script>
+      let timeleft = 30;
+      let elem = document.getElementById('someDiv');
+
+      let timerId = setInterval(countdown, 1000);
+      function countdown() {
+        if (timeleft == -1) {
+          clearTimeout(timerId);
+        } else {
+          elem.innerHTML = timeleft + ' seconds remaining';
+          timeleft--;
+          if (timeleft == 0) {
+            window.location = 'game_3.html';
+          }
+        }
+      }
+    </script>
+    <script src="script.js"></script>
+  </body>
+  <!-- Let's hope by  now you cannot win this, right? -->
+</html>
diff --git a/game_3.html b/game_3.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Game 3</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <script src="libraries/p5.min.js"></script>
+    <script src="libraries/p5.sound.min.js"></script>
+  </head>
+  <body>
+    <header>
+      <div id="someDiv" onload="countdown()"></div>
+    </header>
+    <main id="robot">
+      <p>The robot is stuck! Help him!</p>
+      <!-- Little hint: no  one can help that tin buddy -->
+      <div id="canvasForHTML"></div>
+    </main>
+    <footer>
+      <button type="button" class="butt" onclick="next('end.html')">
+        next
+      </button>
+    </footer>
+    <script src="script_2.js"></script>
+    <script>
+      let timeleft = 30;
+      let elem = document.getElementById('someDiv');
+
+      let timerId = setInterval(countdown, 1000);
+      function countdown() {
+        if (timeleft == -1) {
+          clearTimeout(timerId);
+        } else {
+          elem.innerHTML = timeleft + ' seconds remaining';
+          timeleft--;
+          if (timeleft == 0) {
+            window.location = 'end.html';
+          }
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,26 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <title>Starter</title>
-    <meta name="description" content="something" />
-    <meta name="author" content="me" />
-    <link href="style.css" rel="stylesheet"/>
-    <style>
-
-    </style>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>1st_Game</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
-  <body class="container">
-    <div id="sketch" class="flex-item"></div>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"
-      integrity="sha512-NxocnqsXP3zm0Xb42zqVMvjQIktKEpTIbCXXyhBPxqGZHqhcOXHs4pXI/GoZ8lE+2NJONRifuBpi9DxC58L0Lw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <script src="index.js"></script>
+  <body>
+    <header><div id="someDiv" onload="countdown()"></div></header>
+    <main>
+      <!--Don't  continue  reading bc that's cheating ok?! -->
+      <p>
+        Clicking the <a href="game_2.html">button </a> brings you to the next
+        level
+      </p>
+      <img src="IMG/Button.png" alt="" width="200px" class="center" />
+    </main>
+    <footer>
+      <button type="button" class="butt">next</button>
+    </footer>
+    <script src="script.js"></script>
+    <script>
+      let timeleft = 30;
+      let elem = document.getElementById('someDiv');
+
+      let timerId = setInterval(countdown, 1000);
+      function countdown() {
+        if (timeleft == -1) {
+          clearTimeout(timerId);
+        } else {
+          elem.innerHTML = timeleft + ' seconds remaining';
+          timeleft--;
+          if (timeleft == 0) {
+            window.location = 'game_2.html';
+          }
+        }
+      }
+    </script>
   </body>
-</html>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "include": [
+    "*.js",
+    "libraries/*.js",
+    "/Users/carstenangel/.vscode/extensions/samplavigne.p5-vscode-1.2.11/p5types/global.d.ts"
+  ]
+}
diff --git a/p5.min.js b/p5.min.js
diff --git a/p5.sound.min.js b/p5.sound.min.js
diff --git a/readme. b/readme.
@@ -0,0 +1,11 @@
+# youwillloose2
+Website where you might win one mini-game and loos the two others. completely useless - wow.
+
+Bei der Aufgabenstellung "Kreiere eine 'useless' Website" ist mir bei der Recherche https://cursoreffects.com aufgefallen.
+Mir gefiel das Durchklicken und schnell kam ich zu der Idee kleine Mini-Games zu erstellen. Mini-Games selbst sind ja gar nicht so "useless", weswegen ich beim ersten Spiel, kann man noch gewinnen, wenn man etwas um die Ecke denkt (ich möchte nicht zu viel verraten). 
+Die anderen beiden Spiele kann man nicht gewinnen. Damit man trotzdem zum nächsten Level kommen kann, habe ich einen "next"-Button, sowie einen 30-sekündigen Timer eingebaut, der die Spielenden zum nächsten Level schickt. Nach dem dritten und letzten Spiel erscheint ein Schlussbildbildschirm, der auflöst, dass man nicht gewinnen kann.
+
+Ich habe pro Seite eine html-Datei erstellt und jeder Seite gesagt, wo sie hingeleitet werden soll (bei countdown und next-button).
+Des Weiteren gibt es eine CSS-Datei. für Textgröße, -positionierung, Margin, … .   Es gibt zwei js-Dateien, eine für den Geist im zweiten Spiel. und eine  für den Roboter und Magneten im dritten Spiel.
+
+Auf die Ideen (Geist verschwindet, Roboter wird an den Magneten zurückgezogen) kam ich beim Durchstöbern der p5.js Library. und habe überlegt,  welche Bildmotive dazu passen würden. Das Farbschema soll einen Retro-Vibe hervorbringen.
diff --git a/script.js b/script.js
@@ -0,0 +1,49 @@
+let img, imgEmpty;
+
+let showGhost = true;
+let ghostx = 200;
+let ghosty = -20;
+let ghostwidth = 600 * 0.8;
+let ghostheight = 800 * 0.8;
+let changeDirection;
+
+function preload() {
+  img = loadImage('IMG/Geist.png');
+  imgEmpty = loadImage('IMG/Geist-empty.png');
+}
+
+function setup() {
+  let canvas = createCanvas(displayWidth, 0.6 * displayHeight);
+  canvas.parent('canvasForHTML');
+}
+function draw() {
+  const ghostCenter = {
+    x: ghostx + ghostwidth / 2,
+    y: ghosty + ghostheight / 2,
+  };
+
+  const distance = dist(ghostCenter.x, ghostCenter.y, mouseX, mouseY);
+
+  if (distance < 300) {
+    showGhost = false;
+  } else {
+    showGhost = true;
+  }
+
+  fill('#fbcfe8');
+  noStroke();
+  if (showGhost === true) {
+    // scale(0.3);
+    rect(0, 0, width, height);
+    image(img, ghostx, ghosty, ghostwidth, ghostheight);
+    console.log('showing ghost', showGhost);
+  } else {
+    rect(0, 0, width, height);
+    image(imgEmpty, ghostx, ghosty, ghostwidth, ghostheight);
+    console.log('not showing ghost', showGhost);
+  }
+}
+
+function next(adresse) {
+  window.location = adresse;
+}
diff --git a/script_2.js b/script_2.js
@@ -0,0 +1,41 @@
+let img1, img2;
+
+let robotx = 300;
+let roboty = -20;
+let robotwidth = 600 * 0.6;
+let robotheight = 800 * 0.6;
+let magnetx = 150;
+let magnety = 70;
+let magnetwidth = 600 * 0.6;
+let magnetheight = 600 * 0.6;
+
+function preload() {
+  img1 = loadImage('IMG/Roboter.png');
+  img2 = loadImage('IMG/Magnet.png');
+}
+
+function setup() {
+  let canvas = createCanvas(displayWidth, 0.6 * displayHeight);
+  canvas.parent('canvasForHTML');
+}
+function draw() {
+  background('#fbcfe8');
+  image(img1, robotx, roboty, robotwidth, robotheight);
+  image(
+    img2,
+    magnetx + random(-2, 2),
+    magnety + random(-2, 2),
+    magnetwidth,
+    magnetheight
+  );
+
+  if (robotx > 298) {
+    robotx -= 2;
+  } else if (robotx < 298) {
+    robotx += 2;
+  }
+  robotx += floor(movedX / 5);
+}
+function next(adresse) {
+  window.location = adresse;
+}
diff --git a/style.css b/style.css
@@ -1,23 +1,54 @@
+body {
+  background-color: #fbcfe8;
+  margin: 0;
+  height: 80%;
+}
 html {
-  font-size: 100%;
-} /*16px*/
+  height: 80%;
+  width: 100%;
+}
+.butt {
+  background-color: aquamarine;
+  font-size: xx-large;
+  font-style: normal;
+  border-radius: 8px;
+  font-family: monospace;
+  padding: 10px 20px;
+  box-shadow: 0 8px 16px #c95daf;
+}
 
-body {
-  background-color: white;
-  display: flex;
-  margin: 0 0;
-  color: #1d2429;
-}
-/*
- see A Complete Guide to Flexbox
-  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- */
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-.flex-item {
-  align-self: center;
-}
+header {
+  text-align: right;
+  background-color: #7fffd4;
+  border: none;
+}
+#someDiv {
+  font-size: xx-large;
+  font-family: monospace;
+  padding: 10px;
+  color: rgb(0, 0, 0);
+}
+
+main {
+  height: max-content;
+  font-family: monospace;
+  font-size: xx-large;
+  object-position: 50% 50%;
+  border: none;
+  padding: 10px;
+}
+a {
+  text-decoration: none;
+  color: black;
+}
+
+footer {
+  text-align: right;
+}
+
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 30%;
+}