structix/intecsync
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update

Browse Source
This commit is contained in:
structix
2019-05-23 17:50:23 +02:00
parent e61d9900ec
commit 5480ca4ef3
5 changed files with 206 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
uebung4/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
uebung4/dragon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

93
uebung4/drei-gewinnt.html Normal file
View File

@@ -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>

71
uebung4/fliegender-drache.html Normal file
View File

@@ -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>

50
uebung4/smiley.html
View File

@@ -1,10 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <html lang="de">
<meta charset="utf-8"> <head>
<title>Smiley</title> <meta charset="utf-8" />
</head> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<body> <link href=".css" rel="stylesheet">
<canvas id="canvas" weight="400" height="400">Falls der Browser kein Canvas unterstützt, wird das hier angezeigt.</canvas> <title>Smiley</title>
</body> </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>