响应的布局

本教程演示如何创建使用 JavaScript 的响应布局。向库中添加两个盒子。使一件红色和绿色的。这些盒子都只是一些例子。可以使用任何形状或对象。

将框添加到编辑器中。

安排两个盒子，所以他们填补左、右两侧。离开它们的边框。

现在，这可以是与左、右两边的内容的 web 页的一个示例。它看起来会好桌面 web 浏览器或横向模式的手机上。不幸的是，这种布局不好在肖像模式下工作。必须缩小这两个盒子，小，无法容纳，或扩大以填满整个屏幕，或两边的包厢切断。

这种情况是需要响应的布局。在肖像模式中，一个盒子应该移动其他之上。要做到这一点，我们需要移动使用 JavaScript 的框。这意味着关闭 '使用时间轴' 框和设置为 '脚本 ID'。

要移动框的边界之外的电影，我们需要关闭剪辑电影属性中。

将框排列的最佳地点是在 '在调整大小时' 的电影盛会。我们需要的函数是 GetLeft，GetTop，GetWidth 和 GetHeight。这些功能给 web 浏览器或设备使用的坐标电影的边界。启用剪辑后，这些值将返回电影的边界。如果您使用的 None 电影规模、 GetLeft 和 GetTop 将总是返回 0，并且可以忽略。首先让我们安排这两个盒子，所以一个填充左侧和其他填充的右手边。

BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

接下来，我们将添加一个边框大小为 10。此值 10 不一定以像素为单位，它是在相同规模的电影。使用电影规模 None 一切要以像素为单位。

var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

最后，我们将测试以查看是否 web 浏览器或设备的宽度小于高度。当发生这种情况时，重新垂直排列框。

var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

现在你可以看到，如果您调整大小玩家，这两个箱子会自动安排自己。这两个框可以方便地替换其他形状和对象。可以扩展此示例，以处理更复杂的布局。

创建一个游戏循环

扩展 HTML

本文档是从使用在线翻译的英语翻译。如果您发现任何错误，我们深表歉意。如果你想要帮助我们改正错误。还有一个翻译编辑器在 Hippani Animator （在帮助菜单上）。我们给出免费许可证密钥谁纠正了超过 100 个短语。请更多详细信息，联系我们。