<HTML lang="ja">
<HEAD>
<TITLE>ルーレット</TITLE>
<STYLE TYPE="text/css">
td.tdlevel {
width: 50px;
height: 10px;
background-color: #ffff00;
color: #0000ff;
font-weight: bold;
text-align: center;
font-size: 13px;
cursor: pointer;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
td.tdlblm {
color: #000000;
font-size: 13px;
text-align: right;
background-color: #e6ffff;
font-weight: bold;
width: 30px;
border: 2px solid #ffffff;
}
td.tdmsg {
text-align: center;
background-color: #e6ffff;
color: #000000;
font-weight: bold;
font-size: 18px;
}
button.btn1 {
text-align: center;
color: #ffffff;
font-size: 18px;
background-color: #0000ff;
border: 2px solid #00ffff;
width: 640px;
cursor: pointer;
}
button.btn1:hover {
background-color: #ff0000;
}
button.btn3 {
text-align: center;
width: 90px;
background-color: #ff0000;
color: #ffffff;
font-weight: bold;
cursor: pointer;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
button.btn3:hover {
background-color: #0000ff;
}
button.btn4 {
text-align: center;
width: 25px;
background-color: #0000ff;
color: #ffffff;
font-weight: bold;
cursor: pointer;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
button.btn4:hover {
background-color: #00ff00;
}
</STYLE>
<SCRIPT>
let ix1 = 1;
let ix2 = 1;
let ix3 = 1;
let ix4 = 0;
let lbl = new Array(300,200,100,50);
let sw=new Array(1,1,1);
const wk = new Array("img/btn052-0.gif","img/btn052-1.gif","img/btn052-2.gif","img/btn052-3.gif","img/btn052-4.gif",
"img/btn052-5.gif","img/btn052-6.gif","img/btn052-7.gif","img/btn052-8.gif","img/btn052-9.gif");
let img=new Array();
for (let i = 0; i < wk.length; i++) {
img[i] = new Image();
img[i].src = wk[i];
}
function anime() {
document.getElementById('gameMsg').innerHTML="Ｇａｍｅ Ｓｔａｒｔ";
if(sw[0]==1) {sw[0] = 0;
ix1 = Math.round(Math.random()*10);
an1=setInterval('anime_1()',lbl[ix4]);}
if(sw[1]==1) {sw[1] = 0;
ix2 = Math.round(Math.random()*10);
an2=setInterval('anime_2()',lbl[ix4]);}
if(sw[2]==1) {sw[2] = 0;
ix3 = Math.round(Math.random()*10);
an3=setInterval('anime_3()',lbl[ix4]);}
}
function anime_1() {
ix1++;
if(ix1>wk.length-1) {ix1=0;}
if(sw[0]==1) {clearTimeout(an1);} else
{document.getElementById("anime1").src = img[ix1].src;}
CHK();
}
function anime_2() {
ix2++;
if(ix2>wk.length-1)ix2=0;
if(sw[1]==1) {clearTimeout(an2);} else
{document.getElementById("anime2").src = img[ix2].src;}
CHK();
}
function anime_3() {
ix3++;
if(ix3>wk.length-1)ix3=0;
if(sw[2]==1) {clearTimeout(an3);} else
{document.getElementById("anime3").src = img[ix3].src;}
CHK();
}
function CHK() {
if(sw[0]!=1) return;
if(sw[1]!=1) return;
if(sw[2]!=1) return;
if(ix1==ix2 && ix1==ix3) {
document.getElementById('gameMsg').innerHTML="Congraturation";
}
}
function STP(ix) {
sw[ix] = 1;
}
function LBL() {
ix4++;
ix4 = (ix4<4)? ix4:0;
document.getElementById('lbl').innerHTML = lbl[ix4];
}
</SCRIPT>
</head>
<BODY onLoad="anime()">
<div align="center">
<FORM NAME="form1">
<table border="1" bordercolor="0000ff">
<tr><td align="center">
<table border="3" bordercolor="0000ff">
<tr><td align="center"><img src="img/btn052-0.gif" alt="anime1" id="anime1"></td>
<td align="center"><img src="img/btn052-0.gif" alt="anime2" id="anime2"></td>
<td align="center"><img src="img/btn052-0.gif" alt="anime3" id="anime3"></td>
</tr></table>
<table border="0" width="90px">
<tr><td align="center"><button TYPE="button" class='btn4' onMouseDown="STP('0')">1</button></td>
<td align="center"><button TYPE="button" class='btn4' onMouseDown="STP('1')">2</button></td>
<td align="center"><button TYPE="button" class='btn4' onMouseDown="STP('2')">3</button></td>
</tr>
<tr><td align="center" colspan="3">
<button type='button' class='btn3' onClick="anime()">Start</button>
</td></tr></table>
<table border="0">
<tr><td class="tdlevel" onClick="LBL()">Level</td>
<td class="tdlblm" id="lbl">300</td></tr>
</td></tr></table>
</td><td>
・１のボタンをクリックすると左、２のボタンをクリックすると中央、<BR>
３のボタンをクリックすると右の数字がとまります。<BR>
・Ｓｔａｒｔのボタンをクリックすると数字が回転します。<br>
・Ｌｅｖｅｌボタンをクリックすると右の数字が変わります。<br>
３００は１／３００秒に次の数字にかわります。
</td></tr>
<tr><td class="tdmsg" colspan="2" align="center" id="gameMsg">Ｇａｍｅ Ｓｔａｒｔ</td>
</tr></table>
</FORM>
</div>
</body>
</html>
|