javascript - How can I create a virtual die (for playing dice) using html and css? - Stack Overflow

admin管理员组

文章数量:1332872

I am trying to make a virtual die (for playing dice) using CSS/HTML and JavaScript... My JavaScript part is working, but I can't seem to get the HTML/CSS to display it the way I want (without creating a borderless table and putting each dot in a cell). I made the following JSfiddle: / and when you get a 4, 5, or 6 you can see my problem..

I want to get an analog die with a set of square brackets [ ] with the correct number of dots inside. 1. should have one dot in the middle-middle 2. should have one dot in the top-left and one in the bottom-right 3. should have one dot in the top-left, one in the middle-middle, and one in the bottom-right 4. should have one in the top-left, top-right, bottom-left, and bottom-right 5. should have one in the top-left, top-right, middle-middle, bottom-left, and bottom-right 6. should have three across the top and three across the bottom (or three down the left side and three down the right side).

I've thought about creating a border-less table, but I would like to try and do it with block/inline and super/sub first. I do NOT want to display images (not allowed). They only need to display the end result, not flicker and pretend to be rolling (although that may be cool in the future). I don't care to make them "digital" using ASCII characters or the like. (Too traditional, like analog dice).

Any ideas my my fiddle isn't working as I intend?

Couple of minor additional notes...

• I may want to use this with "non-standard" dice ( those with 7, 9, 12, 20, ??? sides ) in the future, needs to be easily adaptable (Using ":" doesn't work).

• Would like it to be relatively small (Shouldn't take up 1/8 of the screen per die (Yahtzee would take more than half the screen!))

I am trying to make a virtual die (for playing dice) using CSS/HTML and JavaScript... My JavaScript part is working, but I can't seem to get the HTML/CSS to display it the way I want (without creating a borderless table and putting each dot in a cell). I made the following JSfiddle: http://jsfiddle/ShoeMaker/KwBaN/5/ and when you get a 4, 5, or 6 you can see my problem..

I want to get an analog die with a set of square brackets [ ] with the correct number of dots inside. 1. should have one dot in the middle-middle 2. should have one dot in the top-left and one in the bottom-right 3. should have one dot in the top-left, one in the middle-middle, and one in the bottom-right 4. should have one in the top-left, top-right, bottom-left, and bottom-right 5. should have one in the top-left, top-right, middle-middle, bottom-left, and bottom-right 6. should have three across the top and three across the bottom (or three down the left side and three down the right side).

I've thought about creating a border-less table, but I would like to try and do it with block/inline and super/sub first. I do NOT want to display images (not allowed). They only need to display the end result, not flicker and pretend to be rolling (although that may be cool in the future). I don't care to make them "digital" using ASCII characters or the like. (Too traditional, like analog dice).

Any ideas my my fiddle isn't working as I intend?

Couple of minor additional notes...

• I may want to use this with "non-standard" dice ( those with 7, 9, 12, 20, ??? sides ) in the future, needs to be easily adaptable (Using ":" doesn't work).

• Would like it to be relatively small (Shouldn't take up 1/8 of the screen per die (Yahtzee would take more than half the screen!))

• javascript
• html
• css

Share Improve this question Follow edited Jun 13, 2012 at 5:43 ShoeMaker asked Jun 13, 2012 at 5:08 ShoeMakerShoeMaker 83388 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

A couple of things.

Span elements are already inline elements so you don't need to specify such within your css.

Note, that your "row" elements are now wrapped within a parent container with a display style of "inline-block". The inner elements were changed to be block elements as you want them to be "stacked" on top of each other to achieve your desired effect.

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

​ Updated fiddle: http://jsfiddle/KwBaN/11/

EDIT: As per your ment here is another update to make the "die" a little smaller:

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

another updated fiddle: http://jsfiddle/KwBaN/34/ ​

I did some html and css and the result is here -

http://jsfiddle/ashwyn/KwBaN/21/

Edit:
Updated fiddle with inline css.
http://jsfiddle/ashwyn/KwBaN/36/

HTML:

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

Just add font sizes to stuff and make the id's right and it should work. It displays the dots on three rows right above each other. Maybe mess with line-height to make it pretty.

A concept like this?

http://jsfiddle/NuRKL/12/

本文标签： javascriptHow can I create a virtual die (for playing dice) using html and cssStack Overflow