lt25106.github.io/animation.html at main · lt25106/lt25106.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style>
		#cube {
			background-color: black;
			width: 3em;
			height: 3em;
			position: absolute;
			bottom: 1em;
			box-shadow: 0 0 2em;
			border-radius: 0.25em;
		}
		#spike {
			background-color: red;
			width: 3em;
			height: 3em;
			position: absolute;
			bottom: 1em;
			right: 1em;
			box-shadow: 0 0 2em red;
			animation: spike 2s linear infinite;
			animation-play-state: paused;
		}
		#startbutton {
			box-shadow: 0 0 1em;
			font-size: 12em;
			border-radius: 0.2em;
		}
		.jump {animation: jump 1s linear;}
		@keyframes spike {
			0% {right: 1em;}
			100% {right: 100%}
		}
		@keyframes jump {
			0% {bottom: 1em;}
			50% {bottom: 7em;}
			100% {bottom: 1em;}
		}
		@media (prefers-color-scheme: dark) {
			#cube {background-color: white;}
			#startbutton {box-shadow: 0 0 1em white;}
		}
	</style>
	<body>
		<div style="position: absolute;right: 0;">
			<a href="index.html" class="logo">
				<picture>
					<source srcset="SVGs/llogo.svg" media="(prefers-color-scheme: light)">
					<source srcset="SVGs/dlogo.svg" media="(prefers-color-scheme: dark)">
					<img src="SVGs/dlogo.svg" style="height: 1em">
				</picture>
			</a>
			<img src="drawing.svg" style="height: 1em;border-radius: 0.2em;">, a part of &nbsp;
		</div>
		<h1 id="attempt">0</h1>
		<button onclick="startstop()" id="startbutton">Start</button>
		<div id="cube"></div>
		<div id="spike"></div>
		<script>

			const spike = document.getElementById("spike");

			function jump() {
				document.getElementById("cube").classList.add("jump")
				setTimeout(function() {
					document.getElementById("cube").classList.remove("jump")
				}, 1000)
			}

			document.addEventListener("keypress", function(event) {jump()})
			document.addEventListener("click", function(event) {jump()})

			setInterval(function() {
				const cubebottom = parseInt(window.getComputedStyle(document.getElementById("cube")).getPropertyValue("bottom"))
				const spikeleft = parseInt(window.getComputedStyle(spike).getPropertyValue("left"))
				if (spike.style.animationPlayState == "running") {document.getElementById("attempt").innerText++}
				console.log(spikeleft)
				if (spikeleft < 60 && cubebottom < 64) {
					alert("skill issue")
					location.reload()
				}
			}, 50)

			function startstop() {
				const started = spike.style.animationPlayState == "running";
				document.getElementById("startbutton").innerText = started ? "Start" : "Pause"
				spike.style.animationPlayState = started ? "paused" : "running";
			}

		</script>
	</body>
</html>