IOS touch/touchstart вызывает задержку HTML-холста ⇐ IOS

[Anonymous]

Похоже, что iOS вызывает задержку при нажатии на html-холст с использованием фрейма requestAnimation.
Я создал код с простой игрой на js-холсте - когда вы нажимаете на холст, это вызывает небольшую задержку всплески/дрожание/зависание. Кажется, проблема возникает только на iPhone iOS - отлично работает на ПК и Android
https://codepen.io/Sebastian-Jakobsen/p ... itors=1010
Мне интересно, знает ли кто-нибудь решение этой проблемы?
index.html

Код: Выделить всё

Game

main.js

Код: Выделить всё

const gameCanvas = document.getElementById('gameCanvas');
let context = gameCanvas.getContext('2d');
let requestId = null;
let lastTime = 0;
let pickupTimer = 0;
let obstacleTimer = 0;

const chopper = {
x: 50,
y: 150,
width: 50,
height: 20,
dy: 0,
};

let pickups = new Set();
let obstacles = new Set();
const pickupWidth = 10;
const pickupHeight = 10;
const obstacleWidth = 30;
const obstacleHeight = 30;
let score = 0;
let gameRunning = true;
let gameSpeed = -0.5;
let isFlapping = false;

function spawnPickup(delta) {
pickupTimer += delta;
if (pickupTimer >= 0.5) { // 0.5 seconds interval
const x = context.canvas.width;
const y = Math.random() * (context.canvas.height - pickupHeight);
pickups.add({ x, y, width: pickupWidth, height: pickupHeight, value: 10, dx: gameSpeed });
pickupTimer = 0;
}
}

function spawnObstacle(delta) {
obstacleTimer += delta;
if(obstacleTimer >= 0.6) { // 0.6 seconds interval
const x = context.canvas.width;
const y = Math.random() * (context.canvas.height - obstacleHeight);
obstacles.add({ x, y, width: obstacleWidth, height: obstacleHeight, dx: gameSpeed});
obstacleTimer = 0;
}
}

function drawPickup(pickup) {
context.fillStyle = 'gold';
context.fillRect(pickup.x, pickup.y, pickup.width, pickup.height);
}

function drawObstacle(obstacle) {
context.fillStyle = 'red';
context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}

function drawChopper(deltaTime) {
if (isFlapping) {
chopper.dy = -0.3;
isFlapping = false;
}
chopper.dy += 0.0009 * deltaTime; // Adjust gravity and flapping force by delta time
chopper.y += chopper.dy * deltaTime;

if (chopper.y + chopper.height > context.canvas.height || chopper.y < 0) {
endGame();
}

context.fillStyle = 'green';
context.fillRect(chopper.x, chopper.y, chopper.width, chopper.height);
}

function checkCollision(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}

function handlePickupOverlap(deltaTime) {
pickups.forEach(pickup => {
pickup.x += pickup.dx * deltaTime; // Adjust by delta time
drawPickup(pickup);
if (checkCollision(chopper, pickup)) {
score += pickup.value;
pickups.delete(pickup);
} else if (pickup.x + pickup.width < 0) {
pickups.delete(pickup);
}
});
}

function handleObstacleOverlap(deltaTime) {
obstacles.forEach(obstacle => {
obstacle.x += obstacle.dx * deltaTime; // Adjust by delta time
drawObstacle(obstacle);
// if (checkCollision(chopper, obstacle)) {
//   endGame();
// } else if (obstacle.x + obstacle.width < 0) {
//   obstacles.delete(obstacle);
// }
});
}

function updateGame(timestamp = 0) {
const deltaTime = timestamp - lastTime;  // Convert to seconds
lastTime = timestamp;

if (gameRunning) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);

drawChopper(deltaTime);
spawnPickup(deltaTime)
spawnObstacle(deltaTime)

handlePickupOverlap(deltaTime);

handleObstacleOverlap(deltaTime);

requestId = requestAnimationFrame(updateGame);
}
}

function endGame() {
// gameRunning = false;

// just reset for testing
chopper.y = 140
chopper.dy = 0;
}

function setupCanvas() {
context.canvas.width = 300;
context.canvas.height = 600;
requestId = requestAnimationFrame(updateGame);

window.addEventListener('touchstart', (event) => {
event.preventDefault();
event.stopPropagation();
isFlapping = true;
});
}

setupCanvas();

Я пытался предотвратить Default/event.stopPropagation(); чтобы проверить, не пыталось ли устройство что-то сделать при тачстарте, но это не помогло

Подробнее здесь: https://stackoverflow.com/questions/785 ... canvas-lag