dice

jackliver

2010-09-03 17:30:02

License: MIT License

Fork: 0

Fav: 0

View: 245

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 16 lines
HTML 49 lines
CSS 145 lines

dice

dice

body { background-color: #DDDDDD; font: 30px sans-serif; }

.dice > LI {
  display:inline-block;
  margin:0px 0px 0px 0px;
}

.d1, .d2, .d3, .d4, .d5, .d6 {
  width: 48px;
  height: 48px;
  margin: 10px;
  position: absolute;
  top:50px;

background:-webkit-gradient(linear,left top,center bottom,from(#fff),color-stop(.5,#fff),color-stop(.5,#fcfcfc),to(#ccc));
  background:-moz-linear-gradient(-72deg,#fff,#fff 50%,#fcfcfc 50%,#ccc);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -webkit-box-shadow:0 0 4px #000;
  -moz-box-shadow:0 0 4px #000;
  text-align:center;
}

.dice > LI:nth-child(1){
  left : 10px;
}

.dice > LI:nth-child(2) {
  left : 70px;
}

.dice > LI:nth-child(3) {
  left : 130px;
}

.dice > LI:nth-child(4) {
  left : 190px;
}

.dice > LI:nth-child(5) {
  left : 250px;
}

.dice > LI > SPAN{
  font-size: 10px;
  position: absolute;
}

.d1{
  color: red;
}

.d1 > SPAN:nth-child(1),
.d1 > SPAN:nth-child(2),
.d1 > SPAN:nth-child(3),
.d1 > SPAN:nth-child(4),
.d1 > SPAN:nth-child(5),
.d1 > SPAN:nth-child(6),
.d3 > SPAN:nth-child(3),
.d3 > SPAN:nth-child(4),
.d5 > SPAN:nth-child(5),
.d5 > SPAN:nth-child(6) {
  top : 38%;
  left : 42%;
}

.d2 > SPAN:nth-child(1),
.d2 > SPAN:nth-child(2),
.d2 > SPAN:nth-child(3) {
  top : 25%;
  left : 25%;
}

.d2 > SPAN:nth-child(4),
.d2 > SPAN:nth-child(5),
.d2 > SPAN:nth-child(6){
  bottom : 22%;
  right : 22%;
}

.d3 > SPAN:nth-child(1),
.d3 > SPAN:nth-child(2),
.d4 > SPAN:nth-child(1),
.d5 > SPAN:nth-child(1){
  top : 18%;
  left : 22%;
}

.d3 > SPAN:nth-child(5),
.d3 > SPAN:nth-child(6),
.d4 > SPAN:nth-child(4),
.d4 > SPAN:nth-child(5),
.d4 > SPAN:nth-child(6),
.d5 > SPAN:nth-child(4){
  bottom : 18%;
  right : 18%;
}

.d4 > SPAN:nth-child(2),
.d5 > SPAN:nth-child(2){
  top : 18%;
  right : 18%
}

.d4 > SPAN:nth-child(3),
.d5 > SPAN:nth-child(3){
  bottom : 18%;
  left : 22%;
}

.d6 > SPAN:nth-child(1){
  top : 14%;
  left : 22%;
}

.d6 > SPAN:nth-child(2){
  top : 14%;
  right : 20%;
}

.d6 > SPAN:nth-child(3){
  top : 38%;
  left :22%;
}

.d6 > SPAN:nth-child(4){
  top : 38%;
  right : 20%;
}

.d6 > SPAN:nth-child(5){
  bottom : 14%;
  left : 22%;
}

.d6 > SPAN:nth-child(6){
  bottom : 14%;
  right : 20%;
}

#dice_field {
  background-color: #5696a6;
  padding : 5px;
}

//document.write('Hello, Worldd!'); function roll(dice){ 　r=Math.random()*6; //乱数表で０～５.９９９９を発生させる　rr=Math.floor(r)+1;　　 //切り捨てて０～５の整数にし＋１する dice.className = 'd' + rr; } function rollAll(){ roll(document.getElementById('dice1')); roll(document.getElementById('dice2')); roll(document.getElementById('dice3')); roll(document.getElementById('dice4')); roll(document.getElementById('dice5')); } <div id='dice_field'> <ul class='dice'> <li id='dice1' class='d1'> ● ● ● ● ● ● </li> <li id='dice2' class='d1'> ● ● ● ● ● ● </li> <li id='dice3' class='d1'> ● ● ● ● ● ● </li> <li id='dice4' class='d1'> ● ● ● ● ● ● </li> <li id='dice5' class='d1'> ● ● ● ● ● ● </li> </ul> <input type='button' name='test' value='振る' onclick='rollAll();'> </div> body { background-color: #DDDDDD; font: 30px sans-serif; } .dice > LI { display:inline-block; margin:0px 0px 0px 0px; } .d1, .d2, .d3, .d4, .d5, .d6 { width: 48px; height: 48px; margin: 10px; position: absolute; top:50px; background:-webkit-gradient(linear,left top,center bottom,from(#fff),color-stop(.5,#fff),color-stop(.5,#fcfcfc),to(#ccc)); background:-moz-linear-gradient(-72deg,#fff,#fff 50%,#fcfcfc 50%,#ccc); -webkit-border-radius:10px; -moz-border-radius:10px; -webkit-box-shadow:0 0 4px #000; -moz-box-shadow:0 0 4px #000; text-align:center; } .dice > LI:nth-child(1){ left : 10px; } .dice > LI:nth-child(2) { left : 70px; } .dice > LI:nth-child(3) { left : 130px; } .dice > LI:nth-child(4) { left : 190px; } .dice > LI:nth-child(5) { left : 250px; } .dice > LI > SPAN{ font-size: 10px; position: absolute; } .d1{ color: red; } .d1 > SPAN:nth-child(1), .d1 > SPAN:nth-child(2), .d1 > SPAN:nth-child(3), .d1 > SPAN:nth-child(4), .d1 > SPAN:nth-child(5), .d1 > SPAN:nth-child(6), .d3 > SPAN:nth-child(3), .d3 > SPAN:nth-child(4), .d5 > SPAN:nth-child(5), .d5 > SPAN:nth-child(6) { top : 38%; left : 42%; } .d2 > SPAN:nth-child(1), .d2 > SPAN:nth-child(2), .d2 > SPAN:nth-child(3) { top : 25%; left : 25%; } .d2 > SPAN:nth-child(4), .d2 > SPAN:nth-child(5), .d2 > SPAN:nth-child(6){ bottom : 22%; right : 22%; } .d3 > SPAN:nth-child(1), .d3 > SPAN:nth-child(2), .d4 > SPAN:nth-child(1), .d5 > SPAN:nth-child(1){ top : 18%; left : 22%; } .d3 > SPAN:nth-child(5), .d3 > SPAN:nth-child(6), .d4 > SPAN:nth-child(4), .d4 > SPAN:nth-child(5), .d4 > SPAN:nth-child(6), .d5 > SPAN:nth-child(4){ bottom : 18%; right : 18%; } .d4 > SPAN:nth-child(2), .d5 > SPAN:nth-child(2){ top : 18%; right : 18% } .d4 > SPAN:nth-child(3), .d5 > SPAN:nth-child(3){ bottom : 18%; left : 22%; } .d6 > SPAN:nth-child(1){ top : 14%; left : 22%; } .d6 > SPAN:nth-child(2){ top : 14%; right : 20%; } .d6 > SPAN:nth-child(3){ top : 38%; left :22%; } .d6 > SPAN:nth-child(4){ top : 38%; right : 20%; } .d6 > SPAN:nth-child(5){ bottom : 14%; left : 22%; } .d6 > SPAN:nth-child(6){ bottom : 14%; right : 20%; } #dice_field { background-color: #5696a6; padding : 5px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/urzi/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/jackliver/urzi" title="dice">dice - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

dice

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter