Obliczanie procentów dla @keyframes

Question

Cześć, może ktoś mi podpowiedzieć jak obliczyć procenty dla @keyframes, żeby piłka podążała z równą prędkością. Wiem, że ma różne odległości do pokonania, ale nie wiem jak do tego podejść i jak to wyliczyć  https://codepen.io/Rafff/pen/xxwKGbo?fbclid=IwAR3sDSoatlOAfdpCHUaVD18xRSZvoGVqOE9OpWqEzaOmi3CbHsq36JY9w2k

Answer 1

Jeżeli chcesz zrobić gre typu pong to raczej nie samym css, bedzie właśnie problem z odbijaniem się od ścian i paletek, do tego jakieś zliczanie punktów i poruszanie paletkami - tego w css się nie zrobi.

Proponowałbym Ci użyć canvas i js.

Dosyć długi i szczegółowy tutorial jest tutaj.

Brakuje ostatniej części, ale znąjac troche js mozna ją spokojnie dopisać.

Comments

Znaczy to ma być animacja, po prostu zależy mi na tym, żeby wyliczyć te procenty aby ta piłka  poruszała się z taką samą prędkości, wiem że da się to wyliczyć, ale nie wiem jak do tego się zabrać ;/;/

Answer 2

Zaznacz sobie na kartce papieru wszystkie punkty i połącz je liniami  potem dzieki dzieki przepształceniom twierdzenia pitagorasa jestes w stanie obliczyć długość każdej. Następnie sumujesz wszystkie. Suma wszystkich długości to 100 procent. Potem obliczasz procent dla kazdej lini

Comments

Dzięki, zabieram się za obliczanie

---

Wszystko działa jak należy, dziękuje za podpowiedz ;)