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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．ストップウォッチ

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

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

<script type="text/javascript">
let tm1;
let 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">
let time1;
let time2;
let 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()">
    </td></tr>
    <tr><td>
    <input type="text" id="dat1" value="0" style="text-align:center;">
    <td>
    <input type="text" id="dat2" value="0" style="text-align:center;">
    </td>
    <td>
    <input type="text" id="dat3" value="0" style="text-align:center;">
    </td></tr>
    <tr><td>
    <input type="button" value="STOP" onClick="stop1()">
    </td>
    <td>
    <input type="button" value="STOP" onClick="stop2()">
    </td>
    <td>
    <input type="button" value="STOP" onClick="stop3()">
    </td></tr>
    </table>
</div>

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

▲目次へ戻る