Question

我正在制作一个HTML5浏览器游戏，可以分为3个部分：两个UI面板位于游戏界面的中央方形画布的左侧和右侧。三个面板需要水平对齐，整个游戏需要保持16：9的宽高比。左侧和右侧面板的宽度应相等，并且所有三个面板的高度必须相等。我在检测到onresize事件时调用的resize（）函数中指定了最小宽度和高度。

目前，每个面板都是一个div，所有三个都包含在一个部分中。现在，该部分不是必需的，但我希望将游戏与屏幕底部的额外内容分开，我可能会选择稍后添加。

CSS样式如下：

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

#gameSection {
    white-space: nowrap;
    overflow-x: hide;
    overflow-y: hide;
}


#leftPanel, #centerPanel, #rightPanel {
    display: inline-block;
}

#leftPanel {
    background-color: #6495ed;
}

#centerPanel {
    background-color: #e0ffff;
}

#rightPanel {
    background-color: #b0c4de;

现在，我已经设置了每个div的背景颜色，只是为了在我正确设置每个div的大小时向我显示。

我的HTML文档正文如下：

<body onresize="resize()">
    <section id="gameSection">
        <div id="leftPanel">Left Panel.</div>
        <div id="centerPanel">Center Panel.</div>
        <div id="rightPanel">Right Panel.</div>
    </section>
</body>

最后，我的resize（）函数（我创建了一个单独的函数来调整游戏大小，以防我稍后添加更多元素）：

    function resize() {
        var MIN_GAME_WIDTH = 800;
        var MIN_GAME_HEIGHT = 450;
        var GAME_ASPECT_RATIO = 16 / 9;

        var width = window.innerWidth;
        var height = window.innerHeight;

        var gWidth, gHeight;

        if(width < MIN_GAME_WIDTH || height < MIN_GAME_HEIGHT) {
            gWidth = MIN_GAME_WIDTH;
            gHeight = MIN_GAME_HEIGHT;
        }
        else if ((width / height) > GAME_ASPECT_RATIO) {
            <!-- width is too large for height -->
            gHeight = height;
            gWidth = height * GAME_ASPECT_RATIO;
        }
        else {
            <!-- height is too large for width -->
            gWidth = width;
            gHeight = width / GAME_ASPECT_RATIO;
        }

        resizeGame(gWidth, gHeight, GAME_ASPECT_RATIO);
    }

    function resizeGame(var gWidth, var gHeight, var aspectRatio) {
        var gSection = document.getElementById("gameSection");
        var lPanel = document.getElementById("leftPanel");
        var cPanel = document.getElementById("centerPanel");
        var rPanel = document.getElementById("rightPanel");

        gSection.height = gHeight;
        gSection.width = gWidth;

        <!-- should the below be taken care of in the CSS? -->
        lPanel.height = gHeight;
        cPanel.height = gHeight;
        rPanel.height = gHeight;

        cPanel.width = cPanel.height;
        lPanel.width = (gWidth - cPanel.width) / 2;
        rPanel.width = lPanel.width;
    }

我已经尝试了许多不同的命令来调整div的大小，但它对我不起作用。当我尝试添加测试画布时，会出现颜色，但框仍然不是正确的尺寸。我还考虑过将不可见的背景图像加载到每个div并将其缩放到所需的大小;但是，之前我可以使用上面的方法调整我的画布大小，它看起来效果很好。

附加说明
虽然我已经在调整单个画布的调整方面取得了相当不错的成功，但我不想只为游戏使用一个画布，因为不需要同时绘制UI的所有部分。

我试图将此仅保留在Javascript中。

我怀疑我可以通过将纵横比固定为16：9并使用宽度：中心面板的宽度：56.25％和侧面板的宽度：21.875％来使用CSS来处理尺寸调整，但这限制了我的一个方面比率并没有解释为什么我的上述脚本无效。

如果需要，我可以提供整个HTML文件。它应该是这样的： End Goal (without right panel)

谢谢！

UDPATE：
jsfiddle

Answer 1

我有点工作here。在找到错误之前（除了各种语法错误之外），我对代码做了很多更改/小修复：

您使用的是.width和.height而不是.style.width和.style.height，而您正在对这些应用整数而不是附加了“px”的字符串。这些都是完全可以理解的。

我还将onresize从body标签移动到了JS中，不知道为什么它不能用于jsfiddle，但这仍然是一种很好的做法。

将来：学习如何使用控制台调试JS，当您提出问题时，请使用小示例，而不是整个代码库。这个问题本来可以简化为“我如何调整div的大小？”有一行JS和一个div。您还应该考虑不在JS中执行此特定操作，并使用flexbox作为redbmk说。

以编程方式调整Div的大小

1 个答案: