Babylongjs-Web应用的布局

虽然您可能希望您的游戏或应用程序占据大部分页面，但您可能需要一些空间作为示例说明。只需将< canvas >元素放在< div > 中并根据需要排列元素。

<div id = "holder">
        <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
</div>
<div id = "instructions">
    <br/>
    <h2>Instructions</h2>
    <br/>
    Instructions Instructions Instructions Instructions Instructions 
    Instructions Instructions Instructions Instructions Instructions 
</div>

带有其他样式

<style>
    #holder {
        width: 80%;
        height: 100%;
        float: left;
    }

    #instructions {
        width: 20%;
        height: 100%;
        float: left;
        background-color: grey;
    }
</style>

在开发世界的下一阶段，我们将通过为非常基本的汽车制作动画来增加运动效果。汽车需要独立于车身转动的车轮。要了解这是如何实现的，我们需要查看将轮子与身体相结合。