JavaScript【 サンプル 】12 ~ ストップウォッチとスロットゲーム

Stopwatch on yellow background in closeup

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript を使用して、共に START ボタンと STOP ボタンを使用する「ストップウォッチ」と「スロットゲーム」のサンプルを紹介します。

目次

 
1.ストップウォッチ
2.スロットゲーム

1.ストップウォッチ

 
シンプルなストップウォッチを作成します。
START ボタンとSTOP ボタンをクリックしてみて下さい。

 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
var tm1;
var tm2;

// START
function start() {
    tm1 = 0;
    tm2 = setInterval("disp()",  1000);
}

// STOP
function stop() {
    clearInterval(tm2);
}

//経過時間表示
function disp() {
    //経過秒数を1秒ずつ加算
    ++tm1;
    //時間(経過秒数 / 3600秒)
    hh = Math.floor(tm1 / 3600);
    //分(時間の余り / 60秒)
    mm = Math.floor((tm1 % 3600) / 60);
    //分(分の10の位と1の位を取得)
    mm1 = Math.floor(mm / 10);
    mm2 = mm % 10;
    //秒(経過秒数 / 60秒の余り)
    ss = tm1 % 60;
    //秒(秒の10の位と1の位を取得)
    ss1 = Math.floor(ss / 10);
    ss2 = ss % 10;
    document.getElementById("dat").value = hh + ":" + mm1 + mm2 + ":" + ss1 + ss2;
}

//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <input type="text" id="dat" size="10" value="0:00:00" style="text-align:center;font-size:30px">
    <br><br>
    <div style="display:inline-flex; padding : 0 30%;">
        <input type="button" value="START" onClick="start()"> 
        <input type="button" value="STOP" onClick="stop()">
    </div>
</div>

 
ストップウォッチがスタートしてから 1秒ずつ経過する時間を表示するための変数( tm1 )と、ストップウォッチをストップさせるために設定する変数( tm2 )を使用します。

▲目次へ戻る

 

2.スロットゲーム

 
スロットゲームを作成します。
START ボタンとSTOP ボタンをクリックしてみて下さい。

 

 
上のサンプルのソースコードは次の通りです。

<script language="JavaScript">
<!--
var time1;
var time2;
var time3;

// START
function start() {
    start1();
    start2();
    start3();
}

//各ランダム値を表示
function start1() {
    document.getElementById("dat1").value = Math.floor(Math.random()*10);
    time1 = setTimeout(start1,  10);
}
function start2() {
    document.getElementById("dat2").value = Math.floor(Math.random()*10);
    time2 = setTimeout(start2,  10);
}
function start3() {
    document.getElementById("dat3").value = Math.floor(Math.random()*10);
    time3 = setTimeout(start3,  10);
}

// STOP
function stop1() {
    clearTimeout(time1);
}
function stop2() {
    clearTimeout(time2);
}
function stop3() {
    clearTimeout(time3);
}
//-->
</script>

<style>
table, tr, td{
    border-style:none;
}
</style>

<div style="background-color : #CCC; padding : 20px;">
    <table>
    <tr><td colspan="3">
    <input type="button" value="START" onClick="slot()" style="width:100%;">
    </td></tr>
    <tr><td>
    <input type="text" id="dat1" value="0" style="text-align:center;font-size:30px">
    </td>
    <td>
    <input type="text" id="dat2" value="0" style="text-align:center;font-size:30px">
    </td>
    <td>
    <input type="text" id="dat3" value="0" style="text-align:center;font-size:30px">
    </td></tr>
    <tr><td>
    <input type="button" value="STOP" onClick="stop1()" style="width:100%;">
    </td>
    <td>
    <input type="button" value="STOP" onClick="stop2()" style="width:100%;">
    </td>
    <td>
    <input type="button" value="STOP" onClick="stop3()" style="width:100%;">
    </td></tr>
    </table>
</div>

 
3個のランダム値を それぞれストップさせるために、3つのタイマー変数( time1、time2、time3 )を設定しています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です