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

Update uebung4

Browse Source
This commit is contained in:
structix
2019-05-26 21:25:41 +02:00
parent 034e806551
commit c236524e62
3 changed files with 156 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
uebung4/fliegender-drache.html
View File

@@ -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>
</script>
</body>
</html>