Wie kann ich einen virtuellen Würfel (zum Würfelspielen) mit HTML und CSS erstellen?

Question

Ich versuche einen virtuellen Würfel (zum Würfelspielen) mit CSS/HTML und JavaScript zu erstellen ... Mein JavaScript-Teil funktioniert, aber ich kann das HTML/CSS nicht so sehen, wie ich es möchte (ohne eine randlose Tabelle zu erstellen und jeden Punkt in eine Zelle zu setzen). Ich habe die folgende JSfiddle: http://jsfiddle.net/ShoeMaker/KwBaN/5/ und wenn Sie eine 4, 5 oder 6 bekommen können Sie mein Problem sehen ..

Ich möchte einen analogen Würfel mit einer Reihe von eckigen Klammern [] mit der richtigen Anzahl von Punkten bekommen Innerhalb. 1. sollte einen Punkt in der Mitte-Mitte haben 2. sollte einen Punkt in der oberen linken und einen in der unteren rechten haben 3. sollte einen Punkt in der oberen linken, einen in der Mitte der Mitte haben , und eine in der unteren rechten 4. sollte eins in der oberen linken, oberen rechten, unteren linken und unteren rechten 5. sollte eins in der oberen linken, oben rechts, Mitte haben Mitte, unten links und unten rechts 6. sollte drei über die Oberseite und drei über die Unterseite haben (oder drei unten die linke Seite und drei unten die rechte Seite).

Ich habe über das Erstellen einer border-less Tabelle nachgedacht, aber ich möchte es zuerst mit block/inline und super/sub versuchen. Ich möchte keine Bilder anzeigen (nicht erlaubt). Sie müssen nur das Endergebnis anzeigen, nicht flackern und so tun, als würden sie rollen (auch wenn das in Zukunft cool sein könnte). Ich interessiere mich nicht dafür, sie "digital" mit ASCII-Zeichen oder dergleichen zu machen. (Zu traditionell, wie analoge Würfel).

Irgendwelche Ideen meine meine Geige funktioniert nicht so, wie ich es vorhabe?

paar kleinere zusätzliche Hinweise ...

• Ich möchte kann dies verwenden, um mit "non-standard" Würfel (die mit 7, 9, 12, 20, ??? Seiten) in der Zukunft, muss leicht anpassbar sein (":" funktioniert nicht).

• es relativ klein sein möchte (sollte 1/8 des Bildschirms pro Chip nicht nehmen (Yahtzee würde mehr als die Hälfte der Bildschirm nehmen)!)

Answer 1

Ein paar Dinge.

Span-Elemente sind bereits Inline-Elemente, so dass Sie diese nicht in Ihrem CSS angeben müssen.

Beachten Sie, dass Ihre "Zeilen" -Elemente nun in einen übergeordneten Container mit dem Anzeigestil "Inline-Block" eingeschlossen sind. Die inneren Elemente wurden so geändert, dass sie block Elemente sind, wie Sie sie übereinander gestapelt haben möchten, um Ihren gewünschten Effekt zu erzielen.

<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;   
} 

Aktualisiert Geige: http://jsfiddle.net/KwBaN/11/

EDIT: Wie hier pro Ihr Kommentar ein weiteres Update ist das "die" ein wenig kleiner zu machen:

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;  
} 

andere aktualisiert Geige : http://jsfiddle.net/KwBaN/34/

Answer 2

HTML:

<span>[</span> 
<div style="display:inline-block;"> 
    <div id='top'></div> 
    <div id='mid'></div> 
    <div id='bot'></div> 
</div> 
<span>]</span> 

Fügen Sie einfach Schriftgrößen hinzu und machen Sie die ID richtig und es sollte funktionieren. Es zeigt die Punkte in drei Reihen direkt übereinander an. Vielleicht mit line-height durcheinander bringen, um es hübsch zu machen.

Answer 3

Ein Konzept wie dieses?

http://jsfiddle.net/NuRKL/12/

Answer 4

Ich habe einige HTML und CSS und das Ergebnis ist hier -

http://jsfiddle.net/ashwyn/KwBaN/21/

Edit:
Aktualisiert Geige mit Inline-CSS.