search

AnsonH / plinko-game

A Plinko game built with Svelte
https://plinko-web-game.netlify.app/
15 stars 6 forks source link

I found that on IOS, when I hit the bet button, it was very slow.Is there a solution? #12

Open denzhe22 opened 2 months ago

denzhe22 commented 2 months ago

When I hit this button quickly, the FPS on IOS was 10, ro less than 10

AnsonH commented 2 months ago

Hi @denzhe22, sorry for the slow performance issue 🙇

To help debugging easier, would it be possible to provide the following info? Thanks

denzhe22 commented 2 months ago

Hi @denzhe22, sorry for the slow performance issue 🙇

To help debugging easier, would it be possible to provide the following info? Thanks

  • iPhone model are you using
  • iOS version
  • A video recording of the website running on iOS

I tried to add sound, and when I quickly clicked [Drop Ball], I found that the frame rate dropped to about 10, and the page was enlarged, and without the sound playback, the frame rate dropped from 60 to 30, and the page was not enlarged. But actually 30 frames will also affect the user experience, because the ball will drop much slower. Here is the code I added to play the sound

` let audioEle: any; function playSound() { let audioUrl = 'a.mp3'; const audioEle = new Audio(audioUrl); audioEle.play(); }

function handleBetClick() { playSound(); $plinkoEngine?.dropBall(); }

https://github.com/AnsonH/plinko-game/assets/4111637/a1273e3a-d818-4e8e-a556-b331fe69ac42

https://github.com/AnsonH/plinko-game/assets/4111637/80b336ff-170c-42da-a377-2bae47a76668

`

AnsonH commented 2 months ago

Thanks for the demo 🙇

when I quickly clicked [Drop Ball], I found that the frame rate dropped to about 10, and the page was enlarged

Yes, I encountered this issue previously. The solution is to add touch-action: manipulation CSS to the "Drop Ball" button (see this Stack Overflow post)

In Tailwind CSS, it's the touch-manipulation class

denzhe22 commented 2 months ago

Thanks for the demo 🙇

when I quickly clicked [Drop Ball], I found that the frame rate dropped to about 10, and the page was enlarged

Yes, I encountered this issue previously. The solution is to add touch-action: manipulation CSS to the "Drop Ball" button (see this Stack Overflow post)

In Tailwind CSS, it's the touch-manipulation class

Thank you very much for your reply, but I saw that your latest content on gitHub added touch-manipulation, which still did not work, and I found that moving this button to the outermost layer (a level of Balance) would become very smooth. This is a magical result, and I am very confused