Tìm kiếm trang web

javascript - Làm thế nào tôi có thể tạo một con xúc xắc ảo (để chơi trò chơi xúc xắc) bằng cách sử dụng html và css?

Tôi đang cố gắng tạo một con xúc xắc ảo (để chơi xúc xắc) bằng CSS/HTML và JavaScript... Phần JavaScript của tôi hoạt động, nhưng dường như tôi không thể làm cho HTML/CSS hiển thị theo cách tôi muốn (mà không tạo một bảng không viền và đặt mỗi chấm vào một ô). Tôi đã tạo JSfiddle sau: http://jsfiddle.net/ShoeMaker/KwBaN/5/ và khi bạn được một số 4, 5 hoặc 6, bạn có thể thấy vấn đề của tôi..

Tôi muốn có một con xúc xắc analog với bộ dấu ngoặc vuông [ ] chứa đúng số chấm bên trong. 1. nên có một chấm ở giữa giữa 2. nên có một chấm ở trên bên trái và một chấm ở dưới bên phải 3. nên có một chấm ở trên bên trái, một chấm ở giữa giữa, và một chấm ở dưới bên phải 4. nên có một chấm ở trên bên trái, trên bên phải, dưới bên trái, và dưới bên phải 5. nên có một chấm ở trên bên trái, trên bên phải, giữa giữa, dưới bên trái, và dưới bên phải 6. nên có ba chấm dọc theo phía trên và ba chấm dọc theo phía dưới (hoặc ba chấm dọc theo phía trái và ba chấm dọc theo phía phải).

Tôi đã nghĩ đến việc tạo một bảng không viền, nhưng tôi muốn thử làm nó bằng block/inline và super/sub trước. Tôi KHÔNG muốn hiển thị hình ảnh (không được phép). Chúng chỉ cần hiển thị kết quả cuối cùng, không nhấp nháy và giả vờ đang quay (mặc dù điều đó có thể thú vị trong tương lai). Tôi không quan tâm đến việc làm chúng 'kỹ thuật số' bằng ký tự ASCII hay tương tự. (Quá truyền thống, giống xúc xắc analog).

Có ai biết tại sao fiddle của tôi không hoạt động như tôi mong muốn không?

Một vài ghi chú nhỏ bổ sung...

  • Tôi có thể muốn sử dụng điều này với những con xúc xắc “không tiêu chuẩn” (những con có 7, 9, 12, 20, ??? mặt) trong tương lai, cần phải dễ dàng điều chỉnh (Sử dụng “:” không hiệu quả).

  • Muốn nó tương đối nhỏ (Không nên chiếm 1/8 màn hình mỗi viên xúc xắc (Yahtzee sẽ chiếm hơn nửa màn hình!))

Câu trả lời #1

Một vài điều.

Các phần tử span đã là phần tử inline nên bạn không cần chỉ định điều đó trong CSS của mình.

Lưu ý rằng các phần tử "row" của bạn hiện đã được bao bọc trong một phần tử cha với kiểu hiển thị "inline-block". Các phần tử bên trong đã được đổi thành các phần tử block vì bạn muốn chúng được "chồng" lên nhau để đạt được hiệu ứng mong muốn.

<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 cập nhật: http://jsfiddle.net/KwBaN/11/

CHỈNH SỬA: Theo bình luận của bạn, đây là một cập nhật khác để làm cho "die" nhỏ hơn một chút:

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

một fiddle cập nhật khác: http://jsfiddle.net/KwBaN/34/

Câu trả lời #2

Tôi đã làm một số html và css và kết quả đây -

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

Chỉnh sửa:
Cập nhật fiddle với css nội tuyến.
http://jsfiddle.net/ashwyn/KwBaN/36/