I have designed a simple snakes and ladders game, and used a simple dice roll javascript function for the user to ‘roll’ during the game. It works a treat on a desktop device with a mouse/mouse pad, but on touch screen devices it seems to get ‘stuck’. I’ve been learning javascript since monday (i.e. less than a week!). So I’m perhaps punching above my weight somewhat trying to do this.
The js function is initiated when the user clicks on “Click here to roll the dice”. This initiates a ‘dice roll’ timeline (i.e. whereby the dice and placeholder text rotate), and the function generates and prints a random number between 1 and 6 in the placeholder text element, which is revealed just as the dice roll finishes.
But on touch screen devices, the code just doesn’t seem to update the number displayed. Or it only works sporadically. Are there any known issues that spring to mind? I can upload the Hype doc for someone more expert than me to dig into if that helps?
My guess is that you’re targeting an element in your desktop layout that is different than in your smaller layout. You’ll need to insert the random number in the correct element ID depending on what layout is appearing.
Thanks Daniel. I’m not sure that is the problem though. The code refers to the correct unique element IDs in each layout. And the problem is specific to touchscreen devices – I can resize the browser on a desktop to any of the cut off points and it all works fine.
Yes, sure. Here it is. I’ve removed the background artwork to reduce the file size for upload. Otherwise, this includes all the javascript, timelines and layouts. Skipp ropes and ladders_small.zip (2.0 MB)
You have three layouts: iPhone, iPad Portrait, and iPad Landscape – you need three different scripts that take into account the unique element IDs of the three different elements.
Hmm… I thought that’s what I had done: Each layout uses its own script, and each script calls on the Unique element IDs in each layout. E.g. iPhone layout uses rollDiceMobile(), which pulls on buttonMobile and placeholderMobile as the element IDs. The other two layouts each use their own scripts, with their own element IDs. I’m sure I’m missing something obvious!
It may seem that iPad Portrait is the same layout as iPad Landscape, but it is not. You need to setup iPad Landscape to have a function as well. You currently have three layouts, and two different functions handling only 2 of 3 layouts.
And the problem persists if I strip everything back to just one layout (checking that the function and element IDs are all corresponding to each other): It works on a desktop/laptop with a mouse click, but not on a touchscreen device. The timeline animation works on both, but the dice roll and print number doesn’t.
I’m hosting it in on a wordpress website (running on a GeneratePress theme, and Elementor theme builder) using the Tumult Hype Animations (version 1.8.1) wordpress plugin. All other hype animations (built in Hype 3) on another website work wonderfully with the exact same setup.
Thanks Hans. I’m a total js novice, and I’m not sure if I have understood your comment. You think I should remove the javascript function from where it is now and only have it triggered on scene load?
Thanks for all the advice folks. I’m still not sure what the problem was, but I found an alternative approach from an old forum post of Daniel’s that uses a ‘jump to time in timeline’ function. This now replaces the script I was using, to generate the random number needed for the dice roll. I combined this with my an additional timeline to actually ‘roll’ the dice and reveal the number when the dice lands.
)