ロボコンタイマーの意外な出来!使えそう!

ロボコンタイマー画面

こんにちは、ロボットプログラミング担当の政井(まさい)です。

皆さん小学生ロボットコンテストってご存じですか?

今年始まった小学生が簡単に作れるロボットコンテストです。

小学生ロボットコンテスト

https://www.youtube.com/watch?v=plna1v4lUuI

今回はこのロボットコンテストで使われている、時間を表示しているタイマーをHTMLとJavaScriptで作ってみました。

フォントはけしのみ工房様

https://www.keshikan.net/index.html

音源は「OtoLogic」様の物を使っています。

https://otologic.jp/

製作中の様子を「ほぼライブコーディング」でとっておりますので、ご興味のある方はご覧ください。

全ソースはこちら

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8">
    <head>
        <title>ロボコンタイマー</title>
        <style>
            @font-face {
                font-family: 'seven';
                src: url('font/DSEG14Classic-BoldItalic.woff') format('woff');
             }

            body{
                text-align: center;
                font-family: 'seven','Courier New';
                background-color: black;
            }    

            #timer{
                color: white;
                font-size: 50px;
                padding: 50px;
            }

            .copy>a:link{
                color: gray;
                font-size: 8px;
            }
            .copy>a:visited{
                color: gray;
                font-size: 8px;
            }

        </style>
    </head>
    <body>
        <div class='container'>
            <div id = 'timer'>READY</div>
            <div>
                <div class = 'copy'><a href = 'https://otologic.jp/'>音源は[OtoLogic]様の物を使っています</a></div>
                <div class = 'copy'><a href = 'https://www.keshikan.net/index.html'>フォントは[けしのみ工房]様の物を使っています。</a></div>
            </div>
        </div>

        <script >
        'use strict'

            let status = 0;
            let currentTime = 5;
            let startTime;
            let timerID;
            let audio_sec;
            let audio_start;

            const timerTxt = document.getElementById('timer');

            window.onload = ()=>{
                audio_sec = new Audio();
                audio_sec.src = 'sound/Countdown06-5.mp3';
                audio_sec.preload = 'auto';

                audio_start = new Audio();
                audio_start.src = 'sound/Countdown06-6.mp3';
                audio_start.preload = 'auto';
                
            }
        
            window.onclick = ()=>{

                switch(status){
                    //スタート待ち
                    case 0:
                    default:
                        status = 1;
                        currentTime = 5;
                        count();
                        break;
                    //動作中
                    case 1:
                        status = 2;
                        clearTimeout(timerID);
                        timerID = 0;
                        break;
                    //終了
                    case 2:
                        status = 0;
                        timerTxt.textContent = 'READY';
                        break;
                }
            }

            function count(){
                //テキスト書き換え
                if(currentTime > 0){
                    audio_sec.pause();
                    audio_sec.currentTime = 0;
                    timerTxt.textContent = String(currentTime);
                    audio_sec.play();
                }else if(currentTime === 0){
                    timerTxt.textContent = 'START';
                    startTime = new Date();
                    audio_start.play();
                }else{
                    const time = new Date(Date.now() - startTime);
                    const min = String(time.getMinutes()).padStart(2,'0');
                    const sec = String(time.getSeconds()).padStart(2,'0');

                    //00:00
                    timerTxt.textContent = `${min}:${sec}`;
                }

                currentTime--;

                //タイマースタート
                timerID = setTimeout(()=>{
                    count();
                },1000);
            }
        </script>
    </body>
</html>

ロボットコーダーズは鹿児島市にあるロボットプログラミング教室です。

ロボットプログラミング以外にも、Arduino,JavaScript,C#,Arduino等いろいろな言語が学べます。自分でいろいろ作ってみたい子供たちに合った教室ですので、ぜひご検討ください。

この記事は鹿児島中央駅教室、国分教室担当の政井が書きました。

HTML,CSS,JavaScriptは

あわせて読みたい