使用 div 标签的响应式俄罗斯方块网格

Question

我想在没有任何教程的情况下使用 javaScript 和 HTML 构建俄罗斯方块游戏。我的方法很原始。我正在使用 div 标签制作我的网格。问题是它没有我预期的那么灵敏。

这是我的网格中的一行：

                <div class="row">
                <div id="sq1" class="square fender">&nbsp;</div>
                <div id="sq2" class="square free">&nbsp;</div>
                <div id="sq3" class="square free">&nbsp;</div>
                <div id="sq4" class="square free">&nbsp;</div>
                <div id="sq5" class="square free">&nbsp;</div>
                <div id="sq6" class="square free">&nbsp;</div>
                <div id="sq7" class="square free">&nbsp;</div>
                <div id="sq8" class="square free">&nbsp;</div>
                <div id="sq9" class="square free">&nbsp;</div>
                <div id="sq10" class="square free">&nbsp;</div>
                <div id="sq11" class="square free">&nbsp;</div>
                <div id="sq12" class="square fender">&nbsp;</div>
            </div>

我为每个方块使用这种样式：

.square {
float: left;
width: 6%;
padding-bottom: 6%; 
border-top: 1px solid black;
border-left: 1px solid black;}

但是当我调整页面大小时，我的正方形变成了矩形。我还使用类似的较小网格来显示下一块。它被其他标签包围，这可能会使它变形。（整个项目在codepen。）

有什么简单的方法可以让我的方块变成正方形吗？我找到了几种制作响应式正方形的方法，但 none 对我有用。

Answer 1

您已经拥有的东西快要完成了。

查看您的标记，您似乎想要连续 12 个正方形，因此我使用了 width: 8%;。而且，正如您正确尝试的那样，您还需要添加一个匹配 8% 的 padding-bottom。例如

.square {
    float: left;
    width: 8%;
    padding-bottom: 8%; /* = width for a 1:1 aspect ratio */
    border-top: 1px solid black;
    border-left: 1px solid black;
}

您的方块的纵横比未固定的原因是您添加到所有 div 方块的  。您不能直接在正方形内添加内容（没有绝对定位的子项），因为这会增加它们的高度，因此正方形不再是正方形。

删除所有这些不间断空格后，您的方块将保持其纵横比。

最后，我整理了一些无关紧要的 HTML 错误，完整的分叉示例在这里：https://codepen.io/ahdigital/pen/LeNNWY?editors=1100

使用 div 标签的响应式俄罗斯方块网格

Responsive Tetris grid using div tags

html

css

grid

tetris