为什么我必须等到在body.js中添加主体并对它施加力之前？

如何解决为什么我必须等到在body.js中添加主体并对它施加力之前？

我使用something.js做了非常简单的事情。页面末尾有一个脚本，用于创建Engine，Render和World。然后我加一个球并施加力。问题是几乎每次我重新加载页面时，球都会落在不同的位置。这一切都取决于在创建和运行引擎以及将实体添加到世界并对其施加力量之间需要花费多少时间。如果我立即这样做，身体受到的力应该是它的两倍。但是如果我由于设置DOMContentLoaded而等待一秒钟，则window.onload，setTimeout或onClick会获得正常的力量。

一劳永逸地执行，会使身体承受的力量大约是我等待的力量的两倍。

<script>
            let Engine = Matter.Engine,Render = Matter.Render,World = Matter.World,Bodies = Matter.Bodies,Body = Matter.Body;
    
            let engine = Engine.create();
            let render = Render.create({
                element: document.body,engine: engine,options: {
                    width: 1900,height: 900,wireframes: false
                }
            });
    
            Engine.run(engine);
            Render.run(render);
                
            let floor = Bodies.rectangle(950,895,1900,10,{ isstatic: true });
            let ball = Bodies.circle(200,800,20,{ friction: 10,restitution: 0,density: .005,isstatic: false });
            World.add(engine.world,[floor]);
            
            
            World.add(engine.world,[ball]);
            Body.applyForce(ball,ball.position,{x: .2,y: -.2});
            
        </script>

如果我因以下原因而等待

window.onload = (e) =>{
                World.add(engine.world,[ball]);
                Body.applyForce(ball,y: -.2});
};

或

window.setTimeout(() => {
                World.add(engine.world,y: -.2});
},1000);

然后力量是正常的，就像我单击鼠标一样。

document.onclick = (e) => {
                World.add(engine.world,y: -.2});
}