Веб -игра Flappy Bird работает на разных скоростях на разных мобильных устройствах (не связано с браузером/ОС) ⇐ Javascript

[Anonymous]

У меня есть простая игра в стиле птиц, сделанная с HTML, CSS и JavaScript. Игра уже размещена и отлично работает в браузерах для настольных компьютеров. Это похоже на то, что физика игры (гравитация) отличается - но я подтвердил, что гравитационное значение в моем коде одинаково везде. /> Проверка производительности devtools из настольного браузера (через устройство
emulation) не показывает проблем. SPEED. /> // Board
let board;
let boardHeight = 640;
let boardWidth = 360;
let aspectRatio = 360 / 640;
let context;

// Bird
let bird = {
x: 0,
y: 0,
width: 0,
height: 0
};

// Pipes
let pipeArray = [];
let pipeWidth = 0;
let pipeHeight = 0;
let pipeX = 0;
let pipeY = 0;

// Physics
let velocityX = -2;
let velocityY = 0;
let gravity = 0.4;

let gameOver = false;
let score = 0;
let highScore = 0;

window.onload = window.onresize = function() {
board = document.getElementById("board");
context = board.getContext("2d");

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;

let targetHeight = windowHeight;
let targetWidth = windowHeight * aspectRatio;

if (targetWidth > windowWidth) {
targetWidth = windowWidth;
targetHeight = windowWidth / aspectRatio;
}

board.width = targetWidth;
board.height = targetHeight;

bird.width = board.width * (34 / 360);
bird.height = board.height * (24 / 640);
bird.x = board.width / 8;
bird.y = board.height / 2;

pipeWidth = board.width * (64 / 360);
pipeHeight = board.height * (512 / 640);
pipeX = board.width;
pipeY = 0;
};

document.getElementById("playButton").addEventListener("click", function() {
document.getElementById("startScreen").style.display = "none";
startGame();
});

function startGame() {
placePipes();
setInterval(placePipes, 1500);
requestAnimationFrame(update);
document.addEventListener("keydown", moveBird);
document.addEventListener("touchstart", function() {
velocityY = -6;
});
}

function draw() {
// Background
context.fillStyle = "#70c5ce";
context.fillRect(0, 0, board.width, board.height);

velocityY += gravity;
bird.y = Math.max(bird.y + velocityY, 0);

// Bird (red placeholder)
context.fillStyle = "red";
context.fillRect(bird.x, bird.y, bird.width, bird.height);

if (bird.y > board.height) {
gameOver = true;
}

// Pipes (green placeholder)
for (let i = 0; i < pipeArray.length; i++) {
let pipe = pipeArray;
pipe.x += velocityX;
context.fillStyle = "green";
context.fillRect(pipe.x, pipe.y, pipe.width, pipe.height);

// Score
if (!pipe.passed && bird.x > pipe.x + pipe.width) {
score += 0.5;
pipe.passed = true;
}

if (detectCollision(bird, pipe)) {
gameOver = true;
}
}

// Clear old pipes
while (pipeArray.length > 0 && pipeArray[0].x < -pipeWidth) {
pipeArray.shift();
}
}

function update() {
requestAnimationFrame(update);
if (gameOver) return;

context.clearRect(0, 0, board.width, board.height);
draw();

// Score text
context.font = "20px sans-serif";
context.fillStyle = "white";
context.fillText(score, 10, 30);
}

function placePipes() {
if (gameOver) return;

let randomPipeY = pipeY - pipeHeight / 4 - Math.random() * pipeHeight / 2;
let openingSpace = board.height / 4;

let topPipe = {
x: pipeX,
y: randomPipeY,
width: pipeWidth,
height: pipeHeight,
passed: false
};
pipeArray.push(topPipe);

let bottomPipe = {
x: pipeX,
y: randomPipeY + pipeHeight + openingSpace,
width: pipeWidth,
height: pipeHeight,
passed: false
};
pipeArray.push(bottomPipe);
}

function moveBird(e) {
if (e.code == "Space" || e.code == "ArrowUp" || e.code == "KeyX") {
velocityY = -6;
}
}

function detectCollision(b, p) {
return b.x < p.x + p.width &&
b.x + b.width > p.x &&
b.y < p.y + p.height &&
b.y + b.height > p.y;
}< /code>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #70c5ce;
}

#gameContainer {
position: relative;
}

#board {
display: block;
background: #70c5ce;
}

#startScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 50;
}

#playButton {
font-size: 24px;
padding: 10px 20px;
}< /code>



FLAPPY BIRD
PLAY

< /code>
< /div>
< /div>
< /p>
Я хочу, чтобы скорость игры оставалась одинаковой на разных устройствах.
заранее. < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ices-not-b