Mercurial

annotate mrjunejune/src/public/dog-game.js @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 9c2eec61a152
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 // Dog frames
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 const imagesSrc = [
241
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
3 "/public/sprite_shiba0.webp",
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
4 "/public/sprite_shiba1.webp",
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
5 "/public/sprite_shiba2.webp",
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
6 "/public/sprite_shiba3.webp",
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 ];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 const images =imagesSrc.map((src, index) => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 const img = new Image();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 img.src = src;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 img.onload = () => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 if (index == imagesSrc.length-1)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 startAnimation();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 };
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 return img
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 // Load treat image
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 const treatImage = new Image();
241
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
20 treatImage.src = "/public/dog-treat.webp";
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 // Load star images for background
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
23 const lightStarColors = ["#315a91", "#8f3f63", "#34705f", "#76519b"];
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 let starImages = [
241
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
25 { src: "/public/start-large.webp", img: new Image(), lightImg: null },
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
26 { src: "/public/start-small-1.webp", img: new Image(), lightImg: null },
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
27 { src: "/public/start-small-2.webp", img: new Image(), lightImg: null },
9c2eec61a152 [assets] Generate site images as WebP with Bazel
MrJuneJune <me@mrjunejune.com>
parents: 240
diff changeset
28 { src: "/public/start-small-3.webp", img: new Image(), lightImg: null }
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 ];
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
30 starImages.forEach((star, index) => {
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
31 star.img.onload = () => {
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
32 const tinted = document.createElement("canvas");
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
33 tinted.width = star.img.naturalWidth;
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
34 tinted.height = star.img.naturalHeight;
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
35 const tintedCtx = tinted.getContext("2d");
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
36 tintedCtx.drawImage(star.img, 0, 0);
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
37 tintedCtx.globalCompositeOperation = "source-in";
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
38 tintedCtx.fillStyle = lightStarColors[index];
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
39 tintedCtx.fillRect(0, 0, tinted.width, tinted.height);
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
40 star.lightImg = tinted;
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
41 updateStarPalette();
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
42 };
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
43 star.img.src = star.src;
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
44 });
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 const background = document.getElementById('background');
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 const bgCtx = background.getContext("2d");
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 const ctx = game.getContext("2d");
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 const uiCtx = gameUI.getContext("2d");
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
50 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
51
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
52 function isDarkMode() {
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
53 const root = document.documentElement;
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 241
diff changeset
54 if (root.dataset.zenTheme === "ink") return true;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 241
diff changeset
55 if (root.dataset.zenTheme) return false;
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
56 return darkModePreference.matches;
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
57 }
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
58
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
59 function starImageForTheme(imageIndex) {
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
60 const star = starImages[imageIndex];
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
61 return isDarkMode() ? star.img : star.lightImg || star.img;
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
62 }
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
63
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
64 function updateStarPalette() {
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
65 stars.forEach(star => {
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
66 star.image = starImageForTheme(star.imageIndex);
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
67 });
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
68 }
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 // Dog initial position and movement
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 const initialDogVx = 2;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 let x = Math.random() * (game.width);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 let y = Math.random() * (game.height);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 let vx = initialDogVx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 let vy = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 const gravity = 0.5;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 const jumpForce = -12;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 let isFlipped = false;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 // Random jump interval
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 // TODO: let's do it by frame?
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 let nextJump = Math.random() * 2000 + 1000;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 // Treat system
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 const originalTreatSize = 30;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 let treatSize = originalTreatSize;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 const treatMargin = 20;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 const reachDistance = 50;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 let treatRainActive = false;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 let treats = [];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 let lastTreatSpawn = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 const treatFallSpeed = 0.25;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 const treatGravity = 0.13;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 // Background stars
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 let stars = [];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 function createStars() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 stars = [];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 const starCount = window.innerWidth * 0.05;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 for (let i = 0; i < starCount; i++) {
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
103 const imageIndex = Math.floor(Math.random() * starImages.length);
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
104 const starType = starImages[imageIndex];
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 const scale = 0.5 + Math.random() * 0.8; // Random scale
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 stars.push({
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 x: Math.random() * background.width,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 y: Math.random() * background.height,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 vx: (Math.random() - 0.5) * 0.5,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 vy: (Math.random() - 0.5) * 0.5,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 rotation: Math.random() * Math.PI * 2,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 rotationSpeed: (Math.random() - 0.5) * 0.02,
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
114 imageIndex: imageIndex,
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
115 image: starImageForTheme(imageIndex),
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 size: starType.img.width,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 scale: scale,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 opacity: 0.3 + Math.random() * 0.4 // Random opacity
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123 function animateBackground() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 bgCtx.clearRect(0, 0, background.width, background.height);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 stars.forEach(star => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 // Update position
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 star.x += star.vx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 star.y += star.vy;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 star.rotation += star.rotationSpeed;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132 // Wrap around edges
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 if (star.x < -100) star.x = background.width + 100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 if (star.x > background.width + 100) star.x = -100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 if (star.y < -100) star.y = background.height + 100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 if (star.y > background.height + 100) star.y = -100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
137
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 // Draw star
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139 bgCtx.save();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 bgCtx.globalAlpha = star.opacity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141 bgCtx.translate(star.x, star.y);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 bgCtx.rotate(star.rotation);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
143
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
144 const size = star.size * star.scale;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 bgCtx.drawImage(star.image, -size / 2, -size / 2, size, size);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 bgCtx.restore();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 requestAnimationFrame(animateBackground);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153 function getMousePosition(event) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154 const rect = game.getBoundingClientRect();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 const x = event.clientX - rect.left;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156 const y = event.clientY - rect.top;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157 return { x: x, y: y };
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 // UI canvas click - toggle treat rain
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161 gameUI.addEventListener('click', (e) => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 treatRainActive = !treatRainActive;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163 if (treatRainActive)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164 game.classList.add('active');
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 else
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 game.classList.remove('active');
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 game.addEventListener('click', (e) => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 if (treatRainActive) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171 const mousePos = getMousePosition(e);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172 treats.push({ x: mousePos.x, y: mousePos.y, vy: treatFallSpeed });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 function startAnimation() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 requestAnimationFrame(animate);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
178 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
179
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
180
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
181 let index = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 let last = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
183 const frameDuration = 120; // ms per frame
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
184 function animate(ts) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185 if (ts - last > frameDuration) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186 index = (index + 1) % images.length;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187 last = ts;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
188 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
189
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
190 // Get image dimensions
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
191 const imgWidth = images[0].width;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
192 const imgHeight = images[0].height;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
193
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
194 // Update falling treats
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
195 treats.forEach(treat => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
196 treat.vy += treatGravity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 treat.y += treat.vy;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
198 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
199 treats = treats.filter(treat => treat.y < game.height + treatSize);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
200
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 // Find closest treat for dog to chase
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202 let targetTreat = null;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
203 let closestDist = Infinity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 treats.forEach(treat => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 const dx = treat.x + treatSize / 2 - (x + imgWidth / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
206 const dy = treat.y + treatSize / 2 - (y + imgHeight / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
207 const dist = Math.sqrt(dx * dx + dy * dy);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
208
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
209 if (dist < closestDist) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
210 closestDist = dist;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
211 targetTreat = treat;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 // Dog behavior
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216 if (targetTreat) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
217 const dx = targetTreat.x + treatSize / 2 - (x + imgWidth / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 const dy = targetTreat.y + treatSize / 2 - (y + imgHeight / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219 const distance = Math.sqrt(dx * dx + dy * dy);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
221 // Dog eating
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
222 if (distance < reachDistance)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
223 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224 treats = treats.filter(t => t !== targetTreat);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
225 vx = initialDogVx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
226 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
227 // Looking for it
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
228 else
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
229 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
230 const speed = initialDogVx * 1.5;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
231 vx = dx > 0 ? speed : -speed;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233 // Update flip direction
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 if ((dx > 0 && isFlipped) || (dx < 0 && !isFlipped))
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
235 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
236 isFlipped = !isFlipped;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
238
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
239 // Jump if treat is above and dog is on ground
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
240 const onGround = y + imgHeight >= game.height - 5;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
241 if (dy < -50 && onGround && Math.abs(vy) < 1)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
242 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
243 vy = jumpForce;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
246 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
247
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248 // --- Entity updates --- //
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
249 vy += gravity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250 x += vx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
251 y += vy;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
252
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
253 // Bounce off walls
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
254 if (x <= 0 || x + imgWidth >= game.width)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
255 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
256 if (!targetTreat)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
257 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
258 vx = -vx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
259 isFlipped = !isFlipped;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
261 x = x <= 0 ? 0 : game.width - imgWidth;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
262 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
263
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
264 // Bounce off floor
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
265 if (y + imgHeight >= game.height)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
266 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
267 y = game.height - imgHeight;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
268 vy = -vy * 0.7;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
269 if (Math.abs(vy) < 2) vy = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
270 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
271
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
272 // Random jumps (only when not chasing treat)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
273 if (!targetTreat && Date.now() > nextJump && Math.abs(vy) < 1)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
274 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
275 vy = jumpForce;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
276 nextJump = Date.now() + 1000 + Math.random() * 3000;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
277 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
278
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
279 // --- Draw entity --- //
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
280 ctx.clearRect(0, 0, game.width, game.height);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
281 ctx.save();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
282
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
283 if (isFlipped) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
284 ctx.translate(x + imgWidth, y);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
285 ctx.scale(-1, 1);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
286 ctx.drawImage(images[index], 0, 0);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
287 } else {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
288 ctx.drawImage(images[index], x, y);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
289 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
290
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
291 ctx.restore();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
292 treats.forEach(treat => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
293 ctx.drawImage(treatImage, treat.x, treat.y, treatSize, treatSize);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
294 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
295
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
296 drawUI();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
297 // repeat
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
298 requestAnimationFrame(animate);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
299 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
300
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
301 // Draw UI elements (treat toggle button)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
302 function drawUI() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
303 uiCtx.drawImage(treatImage, 0, 0, treatSize, treatSize);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
304 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
305
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
306 // --- Window functions --- //
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
307 function resizeCanvas() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
308 background.width = window.innerWidth;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
309 background.height = window.innerHeight;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
310 game.width = window.innerWidth;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
311 game.height = window.innerHeight;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
312
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
313 // resize treats
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
314 treatSize = window.innerWidth < 700 ? originalTreatSize * 0.6 : originalTreatSize;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
315
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
316 // Size UI canvas to fit treat button + text
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
317 gameUI.width = treatSize + 10;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
318 gameUI.height = treatSize + 25;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
319
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
320 createStars(); // Recreate stars on resize
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
321 drawUI(); // Redraw UI after resize
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
322 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
323 resizeCanvas();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
324 window.addEventListener('resize', resizeCanvas);
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
325 new MutationObserver(updateStarPalette).observe(
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
326 document.documentElement,
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 241
diff changeset
327 { attributes: true, attributeFilter: ["data-zen-theme"] }
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
328 );
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 241
diff changeset
329 document.addEventListener("zen-theme-change", updateStarPalette);
240
c345083cd8a7 [mrjunejune] Show star animation in light mode
MrJuneJune <me@mrjunejune.com>
parents: 212
diff changeset
330 darkModePreference.addEventListener("change", updateStarPalette);
212
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
331
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
332 window.onload = () => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
333 resizeCanvas(); // ensure canvas has real size
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
334 createStars(); // stars need correct canvas size
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
335 animateBackground(); // safe to start background animation
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
336 };