diff --git a/uebung4/background.png b/uebung4/background.png
new file mode 100644
index 0000000..ecf7282
Binary files /dev/null and b/uebung4/background.png differ
diff --git a/uebung4/dragon.png b/uebung4/dragon.png
new file mode 100644
index 0000000..78d18a2
Binary files /dev/null and b/uebung4/dragon.png differ
diff --git a/uebung4/drei-gewinnt.html b/uebung4/drei-gewinnt.html
new file mode 100644
index 0000000..517d758
--- /dev/null
+++ b/uebung4/drei-gewinnt.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Drei gewinnt</title>
+
+
+    <style>
+
+        body {
+            font-family: sans-serif;
+            text-align: center;
+        }
+
+        table {
+            margin: auto;
+            border-collapse: collapse;
+        }
+
+        td {
+            width: 75px;
+            height: 75px;
+            border: 1px solid black;
+            font-size: 50px;
+        }
+
+
+        td:first-child {
+            border-left: 0;
+        }
+
+        td:last-child {
+            border-right: 0;
+        }
+
+        tr:first-child td {
+            border-top: 0;
+        }
+
+        tr:last-child td {
+            border-bottom: 0;
+        }
+
+        td:hover {
+            background-color: #eeeeee;
+            cursor: pointer;
+        }
+
+
+        #info {
+            margin-top: 1em;
+        }
+
+    </style>
+
+</head>
+<body>
+
+<h1>Drei gewinnt</h1>
+
+<table id="board">
+
+    <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+    </tr>
+
+    <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+    </tr>
+
+    <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+    </tr>
+
+</table>
+
+<div id="info">x ist am Zug</div>
+
+
+<script>
+
+   // Ergänzen Sie hier Ihren javaScript-Code
+
+</script>
+
+</body>
+</html>
diff --git a/uebung4/fliegender-drache.html b/uebung4/fliegender-drache.html
new file mode 100644
index 0000000..34867be
--- /dev/null
+++ b/uebung4/fliegender-drache.html
@@ -0,0 +1,71 @@
+<!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>
+      
+<!--      <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;
+          
+          function animation()
+          {
+            x = parseInt(document.getElementById("speed1").value);
+            y = parseInt(document.getElementById("speed2").value);
+            if (hg1 > 0)
+                {
+                    hg1 = parseInt(hg1)-(hg_speed*(y/10));
+                }
+            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
diff --git a/uebung4/smiley.html b/uebung4/smiley.html
index 3318498..5b1e525 100644
--- a/uebung4/smiley.html
+++ b/uebung4/smiley.html
@@ -1,10 +1,44 @@
 <!DOCTYPE html>
-<head>
-        <meta charset="utf-8">
-        <title>Smiley</title>
-</head>
-<body>
-        <canvas id="canvas" weight="400" height="400">Falls der Browser kein Canvas unterstützt, wird das hier angezeigt.</canvas>
-</body>
+<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>
+      
+      <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;
+        let canvas = document.getElementById("smileycanvas");
+        let smiley = canvas.getContext('2d');
 
-</html>
+        function changesmiley() {
+                sliderval = parseInt(document.getElementById("slider").value);
+                smiley.arc(200, 200, 190, 0, 2 * Math.PI);
+                smiley.fillStyle="yellow";
+                smiley.fill();
+                smiley.stroke();
+
+
+                smiley.beginPath();
+                smiley.arc(100, 130, 25 + (0.1*sliderval), 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>
