スロットマシーン 1
単純に乱数を利用したスロットマシーン風の表示をします。
デモ
プログラム
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>スロットマシーン 1</title> <style> input { width:40px; font-size:30px; text-align:center; } button { width:50px; } .x1 { padding:10px 0; } .x1 div { float:left; width:60px; text-align:center; } </style> <script> window.onload = function() { var a = document.getElementById('a'); var b1 = document.getElementById('b1'); var b2 = document.getElementById('b2'); var b3 = document.getElementById('b3'); var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var c3 = document.getElementById('c3'); var t1 = null; var t2 = null; var t3 = null; function start() { if (t1) { clearInterval(t1); } if (t2) { clearInterval(t2); } if (t3) { clearInterval(t3); } c1.value = Math.floor(Math.random() * 10); c2.value = Math.floor(Math.random() * 10); c3.value = Math.floor(Math.random() * 10); t1 = setInterval(function () { c1.value = (+c1.value + 1) % 10; }, 200); t2 = setInterval(function () { c2.value = (+c2.value + 1) % 10; }, 200); t3 = setInterval(function () { c3.value = (+c3.value + 1) % 10; }, 200); } function stop1() { if (t1) { clearInterval(t1); t1 = null; } check(); } function stop2() { if (t2) { clearInterval(t2); t2 = null; } check(); } function stop3() { if (t3) { clearInterval(t3); t3 = null; } check(); } function check() { if (!t1 && !t2 && !t3) { if (c1.value == c2.value && c1.value == c3.value) { alert('あたり!'); } else { alert('はずれ!'); } } } a.addEventListener('click', start); b1.addEventListener('click', stop1); b2.addEventListener('click', stop2); b3.addEventListener('click', stop3); start(); } </script> </head> <body> <button type="button" id="a">start</button> <div class="x1"> <div> <input type="text" id="c1"> <button type="button" id="b1">stop</button> </div> <div> <input type="text" id="c2"> <button type="button" id="b2">stop</button> </div> <div> <input type="text" id="c3"> <button type="button" id="b3">stop</button> </div> </div> </body> </html>
解説
(追記予定)