ITコラム

JavaScript

2018.01.29

JavaScript【サンプル】１２～ストップウォッチとスロットゲーム

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

１．ストップウォッチ

　
シンプルなストップウォッチを作成します。
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() {
    //経過秒数を１秒ずつ加算
    ++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 ）を使用します。

▲目次へ戻る

２．スロットゲーム

　
スロットゲームを作成します。
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 ）を設定しています。

▲目次へ戻る