为我的 class 在 JS 中更新样式时出现问题

Question

所以我在为 class 更新 JS 样式时遇到了问题。在调试中，我可以看到每个对象的变量都正确更改，但只有一个元素的样式更改。

这是我的 3 classes 和游戏循环（间隔）代码。主要问题应该出在函数 start() 或 bullet class 本身。

class Player{
    constructor(SpawnX, SpawnY, direction){
        this.dir = direction;
        this.X = SpawnX;
        this.Y = SpawnY;
        scene.innerHTML += '<div class="player">' + playerImg + '</div>';
        this.element = document.getElementsByClassName("player");
    }
    update(){
        this.fix();
        this.element[0].style.left = this.X + "px";
        this.element[0].style.bottom = this.Y + "px";
        this.element[0].style.transform = 'rotate(' + (this.dir - 90) + 'deg)';
    }
    fix(){
        if(this.X < 0){
            this.X = 0;
        }
        if(this.X > 1850){
            this.X = 1850;
        }
        if(this.Y < 17){
            this.Y = 17;
        }
        if(this.Y > 800){
            this.Y = 800;
        }

    }
    getX(){
        return this.X;
    }
    getY(){
        return this.Y;
    }
    getDir(){
        return this.dir;
    }
    setX(x){
        this.X = x;
    }
    setY(y){
        this.Y = y;
    }
    setDir(dir){
        this.dir = dir;
    }
}

class Bullet{
    constructor(player, speed, ID){
        this.X = player.getX()+15;
        this.Y = player.getY()+20;
        this.speed = speed;
        scene.innerHTML += '<hr class="Pbullet" id="b' + ID + '">';
        this.elem = document.getElementById('b' + ID);
    }
    update(){
        this.Y += this.speed;
        this.elem.style.bottom = this.Y + "px";
        this.elem.style.left = this.X + "px";
    }
    remove(){
        this.elem.remove();
    }
    getX(){
        return this.X;
    }
    getY(){
        return this.Y;
    }
    setX(x){
        this.X = x;
    }
    setY(y){
        this.Y = y;
    }
}

class Bullets{
    constructor(){
        this.bullets = [];
    }
    newBullet(player, speed, ID){
        let bullet = new Bullet(player, speed, ID);
        this.bullets.push(bullet);
        this.bullet = bullet;
    }
    getBullet(Id){
        return this.bullets[Id];
    }
    allBullets(){
        return this.bullets;
    }
    numberOfBullets(){
        return this.bullets.length;
    }
}

function start(){
    document.addEventListener('keydown', keyDownHandler, false);
    document.addEventListener('keyup', keyUpHandler, false);
    document.addEventListener('mousedown', function(){
        MousePressed = true;
    });
    document.addEventListener('mouseup', function(){
        MousePressed = false;
    });
    let player = new Player(window.innerWidth/2, 30, 0);
    let bullets = new Bullets();

    player.update();

    setInterval(() => {
        player.update();
        applyVelocity(player);
        
        
        console.log(bulletsShot);
        bullets.allBullets().forEach(Bullet =>{
            Bullet.update();
            console.log(Bullet);
            if(Bullet.getY() > 950){
                Bullet.remove();
            }
        });
        console.log('------------------------------------------------------------------');
        shoot(bullets, player);
    }, 20);
}


function shoot(bullets, player){
    if(MousePressed){
        bullets.newBullet(player, 20, bulletsShot);
        bullets.getBullet(bulletsShot).update();
        bulletsShot += 1;
        return;
    }
}

Answer 1

所以我发现我需要在更新函数中再次设置元素的修复，所以：

update(){
    this.elem = document.getElementById("b" + ID);
    this.Y += this.speed;
    this.elem.style.bottom = this.Y + "px";
    this.elem.style.left = this.X + "px";
}

为我的 class 在 JS 中更新样式时出现问题

Problem with updating styles in JS for my class

javascript

html

css

class

web