dice jackliver Follow 2010-09-03 17:30:02 License: MIT License Fork0 Fav0 View245 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 16 lines HTML 49 lines CSS 145 lines dice //document.write('<p>Hello, Worldd!</p>'); function roll(dice){ r=Math.random()*6; //乱数表で0~5.9999を発生させる rr=Math.floor(r)+1; //切り捨てて0~5の整数にし+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'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice2' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice3' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice4' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice5' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> </ul> <br><br> <input type='button' name='test' value='振る' onclick='rollAll();'> </div> 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('<p>Hello, Worldd!</p>'); function roll(dice){ r=Math.random()*6; //乱数表で0~5.9999を発生させる rr=Math.floor(r)+1; //切り捨てて0~5の整数にし+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'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice2' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice3' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice4' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> <li id='dice5' class='d1'> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> <span>●</span> </li> </ul> <br><br> <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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> Tweet twitter