From c236524e627b6364659c2a16712f3ef846d90d40 Mon Sep 17 00:00:00 2001
From: structix <amateurdoedel@gmail.com>
Date: Sun, 26 May 2019 21:25:41 +0200
Subject: [PATCH] Update uebung4

---
 uebung4/drei-gewinnt.html      |  75 ++++++++++++++++++++++-
 uebung4/fliegender-drache.html | 107 +++++++++++++--------------------
 uebung4/smiley.html            |  81 +++++++++++++------------
 3 files changed, 156 insertions(+), 107 deletions(-)

diff --git a/uebung4/drei-gewinnt.html b/uebung4/drei-gewinnt.html
index 517d758..72ac4b3 100644
--- a/uebung4/drei-gewinnt.html
+++ b/uebung4/drei-gewinnt.html
@@ -84,10 +84,79 @@
 
 
 <script>
+        var board = document.getElementById("board");
+        var info = document.getElementById("info");
+        var player = "x";
+        var win = false;
+        var draw = false;
+        
+        board.addEventListener('click', function listener(event) {
+                var target = event.target;
+                                   
+                function updateGame() {
+                        if (target.nodeName==="TD") { 
+                                if(target.innerHTML == "") {
+                                        target.innerHTML = player;
+                                        checkWin();
+                                        checkDraw();
+                                        updateInfo();
+                                }
+                        }
+                }
+                
+                function changePlayer() {
+                        player = (player === "x") ? "o" : "x";
+                }
 
-   // Ergänzen Sie hier Ihren javaScript-Code
-
+                function updateInfo() {
+                        if (win) {
+                                info.innerHTML = player + " hat gewonnen";
+                        } else if(draw) {
+                                info.innerHTML = "Unentschieden";
+                        } else {
+                                changePlayer();
+                                info.innerHTML = player + " ist am Zug";
+                        }
+                }
+        
+                function checkWin() {
+                        for (i = 0; i < 3; i++) {
+                                if (board.rows[i].cells[0].innerHTML !== "" && board.rows[i].cells[0].innerHTML === board.rows[i].cells[1].innerHTML && board.rows[i].cells[0].innerHTML === board.rows[i].cells[2].innerHTML) {
+                                        win = true;
+                                }
+                                if (board.rows[0].cells[i].innerHTML !== "" && board.rows[0].cells[i].innerHTML === board.rows[1].cells[i].innerHTML && board.rows[0].cells[i].innerHTML === board.rows[2].cells[i].innerHTML) {
+                                        win = true;
+                                }       
+                        }
+                        //diagonal
+                        if (board.rows[0].cells[0].innerHTML !== "" && board.rows[0].cells[0].innerHTML === board.rows[1].cells[1].innerHTML && board.rows[0].cells[0].innerHTML === board.rows[2].cells[2].innerHTML) {
+                                win = true;
+                        }
+                        if (board.rows[0].cells[2].innerHTML !== "" && board.rows[0].cells[2].innerHTML === board.rows[1].cells[1].innerHTML && board.rows[0].cells[2].innerHTML === board.rows[2].cells[0].innerHTML) {
+                                win = true;
+                        }
+                }
+        
+                function checkDraw() {
+                        temp = 0;
+                        for (i = 0; i < 3; i++) {
+                                for (k = 0; k < 3; k++) {
+                                        if (board.rows[i].cells[k].innerHTML !== "") {
+                                                temp++;
+                                        }
+                                }
+                        }
+                        if (temp == 9) {
+                                draw = true;
+                        }
+                }
+              
+        if(draw === false && win === false) {
+                updateGame();
+        }
+        
+    });
 </script>
-
 </body>
 </html>
+
diff --git a/uebung4/fliegender-drache.html b/uebung4/fliegender-drache.html
index 34867be..d279d9b 100644
--- a/uebung4/fliegender-drache.html
+++ b/uebung4/fliegender-drache.html
@@ -1,71 +1,46 @@
 <!DOCTYPE html>
 <html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="fliegender-drache.css" rel="stylesheet">
-    <title>Fliegender Drache</title>
-  </head>
-  <body>
-      <canvas id="canvas" width="700" height="350" style="border: 1px solid;"></canvas>
-      <img src="dragon.png" style="display: none" id="dragon">
-      <img src="background.png" style="display: none" id="hintergrund"><br>
-      <p><label for="speed1">Steig-Sinkgeschwindigkeit:</label> <input type="range" min="1" max="10" value="5" id="speed1"></p>
-      <p><label for="speed2">Drachengeschwindigkeit   :</label> <input type="range" min="1" max="10" value="5" id="speed2"></p>
+<head>
+        <meta charset="utf-8" />
+        <link href="fliegender-drache.css" rel="stylesheet">
+        <title>Fliegender Drache</title>
+</head>
+<body>
+        <canvas id="canvas" width="700" height="350" style="border: 1px solid;"></canvas>
+        <img src="dragon.png" style="display: none" id="dragon">
+        <img src="background.png" style="display: none" id="background"><br>
       
-<!--      <p id="werte_hg"></p>
-      <p id="werte_drg"></p>-->
-      <script>
-          var canvas = document.getElementById("canvas");
-          var context = canvas.getContext("2d");
-          var dragon = document.getElementById("dragon");
-          var hintergrund = document.getElementById("hintergrund");
-          var hg_speed = 10;
-          var hg1 = canvas.width;
-          var hg2;
-          var drg = 100;
-          var drg_speed = 10;
-          var drg_steigend = false;
+        <script>
+                let canvas = document.getElementById("canvas");
+                let context = canvas.getContext("2d");
+                let dragon = document.getElementById("dragon");
+                let background = document.getElementById("background");
+                let dragon_speed = background_speed = 10;
+                let drg = 100;
+                let drg_up = true;
+                let bg1 = canvas.width;
+
+                //Initial start of animation
+                requestAnimationFrame(animation);
           
-          function animation()
-          {
-            x = parseInt(document.getElementById("speed1").value);
-            y = parseInt(document.getElementById("speed2").value);
-            if (hg1 > 0)
-                {
-                    hg1 = parseInt(hg1)-(hg_speed*(y/10));
+                function animation() {
+                        bg1 = (bg1 > 0) ? parseInt(bg1) - background_speed / 2 : canvas.width;
+                        let bg2 = parseInt(bg1) - canvas.width;
+                        if (!drg_up && drg <200) {
+                                drg = drg + dragon_speed / 6;
+                        } else if (!drg_up && drg >= 200) {
+                                drg_up = true;
+                        } else if (drg_up && drg > 0) {
+                                drg = drg - dragon_speed / 2;
+                        } else {
+                                drg_up = false;
+                        }
+                  
+                        context.drawImage(background,bg1,0,700,350);
+                        context.drawImage(background,bg2,0,700,350);
+                        context.drawImage(dragon, 200, drg, 169, 200);
+                        requestAnimationFrame(animation);
                 }
-            else
-                {
-                    hg1 = canvas.width;
-                }
-            hg2 = parseInt(hg1) - canvas.width;
-            
-            if (drg_steigend == false && drg <200)
-                {
-                    drg = drg + (drg_speed*(x/10));
-                }
-              else if (drg_steigend== false && drg >= 200)
-                  {
-                  drg_steigend = true;
-                  }
-              else if (drg_steigend == true && drg > 0)
-                  {
-                      drg = drg - (drg_speed*(x/10));
-                  }
-              else
-                  {
-                      drg_steigend = false;
-                  }
-            context.drawImage(hintergrund,hg1,0,700,350);
-            context.drawImage(hintergrund,hg2,0,700,350);
-            context.drawImage(dragon, 200, drg, 169, 200);
-/*            document.getElementById("werte_hg").innerHTML = "hg1: " + hg1 + "  hg2: " + hg2 + "  hg_speed: " + hg_speed;
-            document.getElementById("werte_drg").innerHTML = "drg: " + drg + "  drg steigt: " + drg_steigend + "  drg_speed: " + drg_speed + "  regler: " + x; */ 
-            
-            requestAnimationFrame(animation);
-          }
-          requestAnimationFrame(animation);
-      </script>
-  </body>
-</html>
\ No newline at end of file
+        </script>
+</body>
+</html>
diff --git a/uebung4/smiley.html b/uebung4/smiley.html
index 3ff1bbe..33199ef 100644
--- a/uebung4/smiley.html
+++ b/uebung4/smiley.html
@@ -1,46 +1,51 @@
 <!DOCTYPE html>
 <html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href=".css" rel="stylesheet">
-    <title>Smiley</title>
-  </head>
-  <body onload="werte()" style="text-align: center;">
-    <h1>Smiley</h1>
+        <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <link href=".css" rel="stylesheet">
+                <title>Smiley</title>
+        </head>
+<body onload="changeValue()" style="text-align: center;">
+        <h1>Smiley</h1>
       
-      <canvas width="400" height="400" id="smileycanvas" style="border: 1px solid; vertical-align: middle;">Dieser Text wird angezeigt, falls der Browser kein Canvas unterstützt.</canvas><br>
-      <input type="range" max="75" min="-75" value="0" id="slider" style="width: 400px; height: 50px;" oninput="changesmiley()">
-      <p id="ausgabe"></p>
-    <script>
-        let sliderval = 0;
-        
-        function changesmiley() {
-                sliderval = parseInt(document.getElementById("slider").value);
-                let canvas = document.getElementById("smileycanvas");
+        <canvas width="400" height="400" id="canvas" style="border: 1px solid; vertical-align: middle";>
+                Fallback falls der Browser keinen Canvas unterstützt.
+        </canvas>
+        <br>
+        <input type="range" max="75" min="-75" value="0" id="slider" style="width: 400px; height: 50px;" oninput="changeValue()" >
+        <script>
+                let h = 0;
+                let canvas = document.getElementById("canvas");
+                let slider = document.getElementById("slider");
                 let smiley = canvas.getContext('2d');
 
-                smiley.arc(200, 200, 190, 0, 2 * Math.PI);
-                smiley.fillStyle="yellow";
-                smiley.fill();
-                smiley.stroke();
+                function changeValue(){
+                        h = parseInt(slider.value);
+                        //draw head
+                        smiley.beginPath();
+                        smiley.arc(200, 200, 190, 0, 2 * Math.PI);
+                        smiley.fillStyle="yellow";
+                        smiley.fill();
+                        smiley.stroke();
 
+                        //draw left eye
+                        smiley.beginPath();
+                        smiley.arc(100, 130, 25 + (0.1 * h), 0, 2 * Math.PI);
+                        smiley.fillStyle="black";
+                        smiley.fill();
 
-                smiley.beginPath();
-                smiley.arc(100, 130, 25 + (0.1*sliderval), 0, 2*Math.PI);
-                smiley.fillStyle="black";
-                smiley.fill();
+                        //draw right eye
+                        smiley.beginPath();
+                        smiley.arc(270, 130, 25 + (0.1 * h), 0, 2 * Math.PI);
+                        smiley.fillStyle = "black";
+                        smiley.fill();
 
-                smiley.beginPath();
-                smiley.arc(270, 130, 25 + (0.1*sliderval), 0, 2*Math.PI);
-                smiley.fillStyle = "black";
-                smiley.fill();
-
-                smiley.beginPath();
-                smiley.bezierCurveTo(75, 270, 200, 270 + sliderval, 325, 270);
-                smiley.stroke();
-
-
-        }
-      </script>
-    </body>
+                        //draw mouth
+                        smiley.beginPath();
+                        //I used 2*k to get a bright smile :)
+                        smiley.bezierCurveTo(75, 270, 200, 270 + 2 * h, 325, 270);
+                        smiley.stroke();
+                }
+        </script>
+</body>