forked from marijnh/Eloquent-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path13_3_the_cats_hat.html
More file actions
32 lines (24 loc) · 915 Bytes
/
13_3_the_cats_hat.html
File metadata and controls
32 lines (24 loc) · 915 Bytes
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
<!doctype html>
<base href="http://eloquentjavascript.net/">
<body style="min-height: 200px">
<img src="img/cat.png" id="cat" style="position: absolute">
<img src="img/hat.png" id="hat" style="position: absolute">
<script>
var cat = document.querySelector("#cat");
var hat = document.querySelector("#hat");
var angle = 0, lastTime = null;
function animate(time) {
if (lastTime != null)
angle += (time - lastTime) * 0.0015;
lastTime = time;
cat.style.top = (Math.sin(angle) * 50 + 80) + "px";
cat.style.left = (Math.cos(angle) * 200 + 230) + "px";
// By adding π to the angle, the hat ends up half a circle ahead of the cat
var hatAngle = angle + Math.PI;
hat.style.top = (Math.sin(hatAngle) * 50 + 80) + "px";
hat.style.left = (Math.cos(hatAngle) * 200 + 230) + "px";
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</body>