71 lines
2.8 KiB
HTML
71 lines
2.8 KiB
HTML
<!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> |