justin/pokesql
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix pokeball throw animation: use offset-path curve to reliably hit the Pokemon

Browse Source
This commit is contained in:
Sterling Archer
2026-05-27 14:28:26 -07:00
parent 329afd5b0f
commit b8ccd12279
2 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.js
+2 -10
View File
@@ -1337,19 +1337,11 @@ class Game {
ball.className = 'pokeball-throw'; ball.className = 'pokeball-throw';
catchScreen.appendChild(ball); catchScreen.appendChild(ball);
const pokemonRect = pokemonEl.getBoundingClientRect();
const screenRect = catchScreen.getBoundingClientRect();
const targetX = pokemonRect.left - screenRect.left + pokemonRect.width / 2 - 16;
const targetY = pokemonRect.top - screenRect.top + pokemonRect.height / 2 - 16;
ball.style.setProperty('--target-x', targetX + 'px');
ball.style.setProperty('--target-y', targetY + 'px');
setTimeout(() => { setTimeout(() => {
const burst = document.createElement('div'); const burst = document.createElement('div');
burst.className = 'pokeball-burst'; burst.className = 'pokeball-burst';
burst.style.left = targetX + 'px'; burst.style.left = '50%';
burst.style.top = targetY + 'px'; burst.style.top = '25%';
catchScreen.appendChild(burst); catchScreen.appendChild(burst);
ball.remove(); ball.remove();
style.css
+5 -6
View File
@@ -1272,17 +1272,16 @@ html, body {
position:absolute; position:absolute;
width:32px; width:32px;
height:32px; height:32px;
bottom:10%; bottom:15%;
right:10%; right:8%;
z-index:200; z-index:200;
image-rendering:pixelated; image-rendering:pixelated;
offset-path:path('M 0 0 C -60 -120, -120 -220, -140 -300');
animation:pokeThrow .7s cubic-bezier(.2,.8,.3,1) forwards; animation:pokeThrow .7s cubic-bezier(.2,.8,.3,1) forwards;
} }
@keyframes pokeThrow { @keyframes pokeThrow {
0% { transform:translate(0, 0) rotate(0deg) scale(1); opacity:1; } 0% { offset-distance:0%; transform:rotate(0deg) scale(1); opacity:1; }
30% { transform:translate(calc(var(--target-x) * 0.3 - 80px), calc(var(--target-y) * 0.5 - 180px)) rotate(-180deg) scale(1.2); } 100% { offset-distance:100%; transform:rotate(-540deg) scale(0.7); opacity:1; }
60% { transform:translate(calc(var(--target-x) * 0.7 - 40px), calc(var(--target-y) * 0.8 - 100px)) rotate(-360deg) scale(1); }
100% { transform:translate(calc(var(--target-x) - 100%), calc(var(--target-y) - 90%)) rotate(-540deg) scale(0.8); opacity:1; }
} }
.pokeball-burst { .pokeball-burst {