javascript - 如何使用 html 和 css 创建虚拟骰子(用于玩骰子)？

Question

我正在尝试使用 CSS/HTML 和 JavaScript 制作一个虚拟骰子(用于玩骰子)...我的 JavaScript 部分正在运行，但我似乎无法让 HTML/CSS 以我想要的方式显示它(无需创建无边框表格并将每个点放在一个单元格中)。我制作了以下 JSfiddle:http://jsfiddle.net/ShoeMaker/KwBaN/5/当你得到 4、5 或 6 时，你就会看到我的问题..

我想要一个带有一组方括号 [ ] 且内部点数正确的模拟骰子。 1.中间应该有一个点 2.左上角一个点，右下角一个点 3.左上角1个点，中部1个点，右下角1个点 4.左上角、右上角、左下角、右下角应该各有一个 5.左上、右上、中、中、左下、右下应该各有一个 6. 顶部应该有 3 个，底部有 3 个(或者左侧有 3 个，右侧有 3 个)。

我考虑过创建无边框表格，但我想先尝试使用 block /内联和 super /子来实现。我不想显示图像(不允许)。他们只需要显示最终结果，而不是闪烁和假装滚动(尽管将来可能会很酷)。我不关心使用 ASCII 字符或类似字符使它们“数字化”。 (太传统了，像模拟骰子)。

有什么想法我的 fiddle 没有按我的预期工作吗？

几个小的附加说明......

• 我可能想在未来将其与“非标准”骰子(那些有 7、9、12、20、??? 面的骰子)一起使用，需要易于适应(使用“:”不没用)。

• 希望它相对较小(每个 die 不应占用屏幕的 1/8(Yahtzee 会占用超过一半的屏幕!))

Answer 1

一些事情。

Span 元素已经是内联元素，因此您无需在 css 中指定此类元素。

请注意，您的“行”元素现在包装在显示样式为“内联 block ”的父容器中。内部元素已更改为 block 元素，因为您希望它们“堆叠”在彼此之上以达到您想要的效果。

<span class="bracket">[</span>
<div id="die">
    <div id="TopRow">&nbsp;&nbsp;&nbsp;</div>
    <div id="MidRow">&nbsp;&nbsp;&nbsp;</div>
    <div id="BotRow">&nbsp;&nbsp;&nbsp;</div>
</div>
<span class="bracket">]</span>

#die {
    display: inline-block; 
    padding: 5px;             
}

span.bracket {
    font-size: 95px;       
}

#TopRow, #MidRow, #BotRow {
    font-weight: bold;           
}

更新 fiddle :http://jsfiddle.net/KwBaN/11/

编辑:根据您的评论，这里是另一个使“死”更小的更新:

div {
     padding: 0;
     margin: 0; 
}

#die {
    display: inline-block;              
}

span.bracket {
    font-size: 40px;       
}

#TopRow, #MidRow, #BotRow {
    font-weight: bold;  
    font-size: 12px;
    line-height: 8px;    
}

另一个更新的 fiddle :http://jsfiddle.net/KwBaN/34/