47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<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>
|
|
|
|
<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() {
|
|
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);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|