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

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>