I’ve made a Flappy Bird clone using vanilla JavaScript.
It runs pretty well on all non-mobile browsers.
However, when I play it using Chrome or Safari on iPhone, the tapping meant to make the bird jump causes the sliding obstacles to glitch (briefly shake in place). This happens every time I tap but only when I tap.
All of my animations use requestAnimationFrame().
I thought increased load during implementation of the jump() logic would be the cause, but the issue persists even after I have disabled:
-jump()
-crash detection
-gravity
-score tracker
Essentially, the only thing left running are my obstacles animation and the ‘touchstart’ event listener with no callbacks, yet the issue persists.
I tried preventDefault() on the event listener, but still to no avail.
Here is the animation which slides the objects:
function runShips() {
//create random ship every 5 seconds
generateShipsInterval();
let previousTime = null;
function slideShipsAnimation(currentTime) {
if (!previousTime) {
previousTime = currentTime;
}
let dt = (currentTime - previousTime) / 1000;
document.querySelectorAll('.ships').forEach(ship => {
ship.style.left = `${(parseFloat(getComputedStyle(ship).left) - 3 * dt * 60)}px`;
});
previousTime = currentTime;
loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
}
loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
//clear ships that are out of the screen every 10 seconds
clearShipsInterval();
}
and here is my event handler whose logic I have disabled:
if (isMobile()) {
//listen for tap
document.addEventListener('touchstart', function(event) {
event.preventDefault();
handleTap();
});
}
function handleTap() {
if (mode === gameStates.start) {
getReady();
return
}
if (mode === gameStates.play) {
jump();
return
}
if (laughingElon.style.display === 'block') return
if (mode === gameStates.crash) {
getReady();
return
}
if (mode === gameStates.ready) {
startGame();
jump();
return
}
}
function jump() {
// const x = 32;
// birdFrames.forEach((frame, index) => {
// setTimeout(() => {
// bird.src = frame;
// }, index * x);
// });
// velocity = -9.5;
}