Mercurial

annotate mrjunejune/src/public/dog-game.js @ 216:e82b80b24012 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Make webp translate background job.
author June Park <parkjune1995@gmail.com>
date Sat, 28 Feb 2026 21:04:43 -0800
parents 84826b3c655b
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 = [
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 "/public/sprite_shiba0.png",
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 "/public/sprite_shiba1.png",
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 "/public/sprite_shiba2.png",
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 "/public/sprite_shiba3.png",
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();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 treatImage.src = "/public/dog-treat.png";
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 let starImages = [
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 { src: "/public/start-large.png", img: new Image() },
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 { src: "/public/start-small-1.png", img: new Image() },
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 { src: "/public/start-small-2.png", img: new Image() },
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 { src: "/public/start-small-3.png", img: new Image() }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 ];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 starImages.forEach(star => star.img.src = star.src);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 const background = document.getElementById('background');
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 const bgCtx = background.getContext("2d");
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 const ctx = game.getContext("2d");
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 const uiCtx = gameUI.getContext("2d");
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 // Dog initial position and movement
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 const initialDogVx = 2;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 let x = Math.random() * (game.width);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 let y = Math.random() * (game.height);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 let vx = initialDogVx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 let vy = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 const gravity = 0.5;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 const jumpForce = -12;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 let isFlipped = false;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 // Random jump interval
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 // TODO: let's do it by frame?
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 let nextJump = Math.random() * 2000 + 1000;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 // Treat system
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 const originalTreatSize = 30;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 let treatSize = originalTreatSize;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 const treatMargin = 20;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 const reachDistance = 50;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 let treatRainActive = false;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 let treats = [];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 let lastTreatSpawn = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 const treatFallSpeed = 0.25;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 const treatGravity = 0.13;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 // Background stars
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 let stars = [];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 function createStars() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 stars = [];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 const starCount = window.innerWidth * 0.05;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 for (let i = 0; i < starCount; i++) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 const starType = starImages[Math.floor(Math.random() * starImages.length)];
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 const scale = 0.5 + Math.random() * 0.8; // Random scale
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 stars.push({
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 x: Math.random() * background.width,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 y: Math.random() * background.height,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 vx: (Math.random() - 0.5) * 0.5,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 vy: (Math.random() - 0.5) * 0.5,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 rotation: Math.random() * Math.PI * 2,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 rotationSpeed: (Math.random() - 0.5) * 0.02,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 image: starType.img,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 size: starType.img.width,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 scale: scale,
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 opacity: 0.3 + Math.random() * 0.4 // Random opacity
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 });
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 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 function animateBackground() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 bgCtx.clearRect(0, 0, background.width, background.height);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 stars.forEach(star => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 // Update position
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 star.x += star.vx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 star.y += star.vy;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 star.rotation += star.rotationSpeed;
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 // Wrap around edges
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 if (star.x < -100) star.x = background.width + 100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 if (star.x > background.width + 100) star.x = -100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 if (star.y < -100) star.y = background.height + 100;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 if (star.y > background.height + 100) star.y = -100;
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 // Draw star
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 bgCtx.save();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 bgCtx.globalAlpha = star.opacity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 bgCtx.translate(star.x, star.y);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 bgCtx.rotate(star.rotation);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 const size = star.size * star.scale;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 bgCtx.drawImage(star.image, -size / 2, -size / 2, size, size);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 bgCtx.restore();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 requestAnimationFrame(animateBackground);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 function getMousePosition(event) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 const rect = game.getBoundingClientRect();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 const x = event.clientX - rect.left;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 const y = event.clientY - rect.top;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 return { x: x, y: y };
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 // UI canvas click - toggle treat rain
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 gameUI.addEventListener('click', (e) => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 treatRainActive = !treatRainActive;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 if (treatRainActive)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 game.classList.add('active');
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 else
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 game.classList.remove('active');
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 game.addEventListener('click', (e) => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 if (treatRainActive) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 const mousePos = getMousePosition(e);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 treats.push({ x: mousePos.x, y: mousePos.y, vy: treatFallSpeed });
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 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 function startAnimation() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141 requestAnimationFrame(animate);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 }
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 let index = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146 let last = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 const frameDuration = 120; // ms per frame
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 function animate(ts) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 if (ts - last > frameDuration) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 index = (index + 1) % images.length;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151 last = ts;
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154 // Get image dimensions
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 const imgWidth = images[0].width;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156 const imgHeight = images[0].height;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158 // Update falling treats
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159 treats.forEach(treat => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 treat.vy += treatGravity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161 treat.y += treat.vy;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163 treats = treats.filter(treat => treat.y < game.height + treatSize);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 // Find closest treat for dog to chase
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 let targetTreat = null;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167 let closestDist = Infinity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168 treats.forEach(treat => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 const dx = treat.x + treatSize / 2 - (x + imgWidth / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 const dy = treat.y + treatSize / 2 - (y + imgHeight / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171 const dist = Math.sqrt(dx * dx + dy * dy);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 if (dist < closestDist) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 closestDist = dist;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175 targetTreat = treat;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 });
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 // Dog behavior
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
180 if (targetTreat) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
181 const dx = targetTreat.x + treatSize / 2 - (x + imgWidth / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 const dy = targetTreat.y + treatSize / 2 - (y + imgHeight / 2);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
183 const distance = Math.sqrt(dx * dx + dy * dy);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
184
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185 // Dog eating
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186 if (distance < reachDistance)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
188 treats = treats.filter(t => t !== targetTreat);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
189 vx = initialDogVx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
190 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
191 // Looking for it
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
192 else
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 const speed = initialDogVx * 1.5;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
195 vx = dx > 0 ? speed : -speed;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
196
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 // Update flip direction
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
198 if ((dx > 0 && isFlipped) || (dx < 0 && !isFlipped))
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
199 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
200 isFlipped = !isFlipped;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
203 // Jump if treat is above and dog is on ground
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 const onGround = y + imgHeight >= game.height - 5;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 if (dy < -50 && onGround && Math.abs(vy) < 1)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
206 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
207 vy = jumpForce;
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 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
210 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
211
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 // --- Entity updates --- //
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 vy += gravity;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214 x += vx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 y += vy;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
217 // Bounce off walls
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 if (x <= 0 || x + imgWidth >= game.width)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220 if (!targetTreat)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
221 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
222 vx = -vx;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
223 isFlipped = !isFlipped;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
225 x = x <= 0 ? 0 : game.width - imgWidth;
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
228 // Bounce off floor
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
229 if (y + imgHeight >= game.height)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
230 {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
231 y = game.height - imgHeight;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232 vy = -vy * 0.7;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233 if (Math.abs(vy) < 2) vy = 0;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 }
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 // Random jumps (only when not chasing treat)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 if (!targetTreat && Date.now() > nextJump && Math.abs(vy) < 1)
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 vy = jumpForce;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
240 nextJump = Date.now() + 1000 + Math.random() * 3000;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
241 }
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 // --- Draw entity --- //
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244 ctx.clearRect(0, 0, game.width, game.height);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245 ctx.save();
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 if (isFlipped) {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248 ctx.translate(x + imgWidth, y);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
249 ctx.scale(-1, 1);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250 ctx.drawImage(images[index], 0, 0);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
251 } else {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
252 ctx.drawImage(images[index], x, y);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
253 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
254
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
255 ctx.restore();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
256 treats.forEach(treat => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
257 ctx.drawImage(treatImage, treat.x, treat.y, treatSize, treatSize);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
258 });
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
259
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260 drawUI();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
261 // repeat
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
262 requestAnimationFrame(animate);
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
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
265 // Draw UI elements (treat toggle button)
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
266 function drawUI() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
267 uiCtx.drawImage(treatImage, 0, 0, treatSize, treatSize);
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
268 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
269
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
270 // --- Window functions --- //
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
271 function resizeCanvas() {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
272 background.width = window.innerWidth;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
273 background.height = window.innerHeight;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
274 game.width = window.innerWidth;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
275 game.height = window.innerHeight;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
276
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
277 // resize treats
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
278 treatSize = window.innerWidth < 700 ? originalTreatSize * 0.6 : originalTreatSize;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
279
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
280 // Size UI canvas to fit treat button + text
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
281 gameUI.width = treatSize + 10;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
282 gameUI.height = treatSize + 25;
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
283
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
284 createStars(); // Recreate stars on resize
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
285 drawUI(); // Redraw UI after resize
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
286 }
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
287 resizeCanvas();
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
288 window.addEventListener('resize', resizeCanvas);
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 window.onload = () => {
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
291 resizeCanvas(); // ensure canvas has real size
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
292 createStars(); // stars need correct canvas size
84826b3c655b [MrJuneJune] Forgot to add assets.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
293 animateBackground(); // safe to start background animation
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