响应式网页小游戏CSS/JS关键帧动画自适应屏幕适配方案咨询

你可以通过以下两种方案替换固定像素值，实现自适应的移动动画： #

方案1：基于玩家自身尺寸的百分比实现（更简单，无需额外变量） #

transform的百分比单位默认相对于元素自身尺寸，你的玩家方块本身已经是自适应舞台高度的，直接修改动画逻辑即可：

修改CSS代码 #

@keyframes moveLeft{
    0%{transform: translateX(0);}
    80%{transform: translateX(-200%);} /* 100%对应玩家自身宽度，可根据需求调整倍数 */
}
.animateLeft{animation: moveLeft 125ms ease-out;}

修改JS代码 #

1. 修复class判断的逻辑bug，同时替换固定60px为动态计算的玩家尺寸倍数：

// 修复移动状态判断逻辑
function checkPlayerMovement(){
    if(player.classList.contains('animateLeft')){
        isPlayerMoving = 1;
    }
    else{
        isPlayerMoving = 0;
    }
};

// 替换固定移动步长
function playerMotion(){
    checkPlayerMovement();
    if(a == 1){
        if(isPlayerMoving == 1){
            return;
        }
        else{
            // 2对应CSS动画里的200%，和动画位移幅度保持一致即可
            newPlayerX -= player.offsetWidth * 2; 
            playerLeft();
        }
    }
};

方案2：基于舞台宽度比例实现（移动距离和舞台宽度严格挂钩） #

如果需要移动距离和舞台宽度成固定比例，可以用CSS变量动态传值：

修改CSS代码 #

@keyframes moveLeft{
    0%{transform: translateX(0);}
    80%{transform: translateX(calc(-1 * var(--move-step)));}
}
.animateLeft{animation: moveLeft 125ms ease-out;}

修改JS代码 #

1. 定义固定的移动比例常量，调整数值可以控制移动幅度：

const MOVE_STEP_RATIO = 0.03; // 每次移动距离为舞台宽度的3%，可自定义

2. 在scale函数末尾新增CSS变量更新逻辑，每次窗口缩放同步更新步长：

function scale(){
    // 原有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`;

    // 新增：更新移动步长的CSS变量
    const moveStep = stageWidth * MOVE_STEP_RATIO;
    document.documentElement.style.setProperty('--move-step', `${moveStep}px`);
};

3. 修复class判断逻辑，同时替换固定移动步长：

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

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

内容的提问来源于stack exchange，提问作者Stephen Witwick