読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

ルーレットアイテムを作ってみる3

今日の気分求めったー

(^ω^) (・ω・) (°д°) ('д`)
('・ω・)     °(∀)°
(°д°))     (^ω^;)
(TдT) (∀0) (?д?) ( ̄∇ ̄)

今日の気分を求めるスクリプトです。

今回はルーレットの形について、考えてみました。

前回4個から12個まで増やして回転する形でルーレットかしました。

一応後は、止まった時に起きる処理をするだけとなります。

デザインもいろいろと考えていこうと思います。

 

Sample

<script type="text/JavaScript">
choice = 1; //選択場所を1にする
counter = 1; //カウンターを設定
number = Math.round (Math.random () * 11) + 2; // 2〜13のランダムな数

function roulette(date){
date = date - 1;
for(i=1;i<=12;i++){
document.getElementById("td" + i).style.backgroundColor = "#FFF";
document.getElementById("td" + i).style.color = "#000";
}
document.getElementById("td" + date).style.backgroundColor = "#000";
document.getElementById("td" + date).style.color = "#FFF";
number = Math.round (Math.random () * 11) + 2; // 2〜13のランダムな数
}

function kaiten(){
for(i=1;i<=12;i++){
document.getElementById("td" + i).style.backgroundColor = "#FFF";
document.getElementById("td" + i).style.color = "#000";
}
for(i=1;i<=12;i++){ //tdのid個数
if(choice == i){ //tdが1の時最後の部分を消す
if(i == 1){
document.getElementById("td" + choice).style.backgroundColor = "#000";
document.getElementById("td12").style.backgroundColor = "#FFF";
document.getElementById("td" + choice).style.color = "#DDD";
document.getElementById("td12").style.color = "#000";
}
else{
j = i - 1; //一個前の要素を設定
document.getElementById("td" + choice).style.backgroundColor = "#000";
document.getElementById("td" + j).style.backgroundColor = "#FFF";
document.getElementById("td" + choice).style.color = "#DDD";
document.getElementById("td" + j).style.color = "#000";
}
}
}
choice++;
counter++;
if(choice == 13){choice = 1;}
if(counter == 72 + number){
clearTimeout("tell");
date = number;
choice = 1;
counter = 1;
roulette(date);
}
else{
tell = setTimeout("kaiten()",60);
}
}

</script>

<table border="1">
<tr>
<td id="td1">(^ω^)</td>
<td id="td2">(・ω・)</td>
<td id="td3">(°д°)</td>
<td id="td4">('д`)</td>
<tr>
<tr>
<td id="td12">('・ω・)</td>
<td></td>
<td></td>
<td id="td5">°(∀)°</td>
</tr>
<tr>
<td id="td11">(°д°))</td>
<td></td>
<td></td>
<td id="td6">(^ω^;)</td>
</tr>
<tr>
<td id="td10">(TдT)</td>
<td id="td9">(∀0)</td>
<td id="td8">(?д?)</td>
<td id="td7">( ̄∇ ̄)</td>
</tr>
</table>

<input type="button" onClick="kaiten()" value="rouletteを回す">