根据屏幕大小调整的 JavaScript/CSS 关键帧动画

Question

所以我一直在制作一个小游戏（小，我指的是一个在屏幕上移动的红框），出于某种原因，我决定添加一个自动设置特定纵横比的功能，以便它可以运行所有窗户的形状和尺寸。现在，我的关键帧动画被破坏了，因为使用了像素坐标。这是只有左侧动画的 CSS：

#stage{
    border: 1px solid black;
    margin: auto;
}

#player{
    background-color: red;
    position: relative;
}

@keyframes moveLeft{
    0%{transform: translateX(0px);}
    80%{transform: translateX(-60px);}
}

.animateLeft{animation: moveLeft 125ms ease-out;}

还有 JavaScript（删除了非左移动）：

var game = {};
game.fps = 50;
var player = document.getElementById('player');
var stage = document.getElementById('stage');
var playerX = 0, playerY = 0;
var stageWidth, stageHeight;
var borderAspectRatio = 16/9;
var a = 0;
var isPlayerMoving = 0, newPlayerX = 0, newPlayerY = 0;

function checkPlayerMovement(){
    if(player.classList == 'animateLeft'){
        isPlayerMoving = 1;
    }
    else{
        isPlayerMoving = 0;
    }
};

function playerHalt(){
    isPlayerMoving = 0;
    setNewPlayerPosition();
    player.classList.remove('animateLeft');
};

function playerLeft(){
    player.classList.add('animateLeft');
    setTimeout(playerHalt,100);
};

function setNewPlayerPosition(){
    if(isPlayerMoving == 0){
        playerX = newPlayerX;
        playerY = newPlayerY;
    }
    setPlayerPosition();
};

function setPlayerPosition(){
    var playerSideLength = stageHeight/15;
    player.style.width = `${playerSideLength}px`
    player.style.height = `${playerSideLength}px`
    player.style.left = `${playerX + (stageWidth - playerSideLength) / 2}px`;
    player.style.bottom = `${playerY - (stageHeight - playerSideLength) / 2}px`;
};

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 65) {a=1;}
});

document.addEventListener('keyup', function(event) {
    if(event.keyCode == 65) {a=0;}
});

function playerMotion(){
    checkPlayerMovement();
    if(a == 1){
        if(isPlayerMoving == 1){
            return;
        }
        else{
            newPlayerX -= 60; 
            playerLeft();
        }
    }
};

function scale(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    if(w/h > borderAspectRatio){
        stageWidth = 0.96*h*borderAspectRatio;
        stageHeight = 0.96*h;
    }
    else{
        stageWidth = 0.96*w;
        stageHeight = 0.96*w/borderAspectRatio;
    }
    stage.style.width = `${stageWidth}px`;
    stage.style.height = `${stageHeight}px`;
};

game.run = function() {
    scale();
    setPlayerPosition();
    playerMotion();
};

game._intervalId = setInterval(game.run, 1000 / game.fps);

如何更改它以使用屏幕的某个百分比（或某些 idk）而不是像素？

Answer 1

查看 MDN (here) 上的实际长度单位

尤其是vh和vw部分，分别是视口高度的1%和视口宽度的1%。