テキスト型プログラミングを学ぶ前に「タイピング」に不安があるという声にお応えしてJavaScript約20行で作れる簡単なタイピグアプリをご用意しました。自分たちで作ったタイピングアプリなら、生徒達は楽しくプログラミングとタイピングを学べます（たぶん…）。カスタマイズ例として、ソースコードを数行追加すると効果音も付けられるようにしてあります。

作品イメージ

サンプルプロジェクト

タイピングアプリ
タイピングアプリ・効果音付きカスタマイズ版

HTML側(index.html)


   <script src="typing.js" defer></script>
</head>
<body>
    <h1>タイピングゲーム</h1>
    <h2>お題</h2>
    <div id="target">monaca</div>
    <button onclick="start()">スタート</button>
</body>

タイピングさせたい文字列をdivタグの中に記述して下さい。サンプルでは「monaca」と入っていますが、monacaである必要は無いので適当に変更して下さい。ankoとかdangoとか、お好みで。

CSS側(css/tyle.css)


body {
    text-align:center;
}
div {
    font-size:20px;
}
#target:first-letter{
    color:red;
    font-size:30px;
}
button {
    font-size:30px;
    background-color:pink;
    color:white;
}

body

文字を全部中央寄せにしています。

#target

お題を格納しているid=targetの要素の文字サイズを大きくしています。

#target:first-letter

お題を格納しているid=targetの要素の1文字目だけ、更に文字を大きくして色も変えています。

button

ボタンに装飾を当てています。

JavaScript側(typing.js)


let target = document.getElementById("target");

function start () {
    document.body.addEventListener("keydown", main); 
}
function end () {
    document.body.removeEventListener("keydown", main);
    alert("ゲームクリア");
}
function main(event) {
    if (target.textContent.charAt(0) == event.key) {
        target.textContent = target.textContent.slice(1);
        if (target.textContent.length == 0) {
            end();
        }
    }
    console.log(event.key + "が押されました");
}

変数定義

タイピングさせたい文字列をdivタグ(id=target)に格納しているため、そのDOMを取得しています。

start()関数

HTML側のbuttonタグが推されたらstart()関数が呼び出されるようにしております。「keydown」イベントを監視しして、キーが押されたらmain()関数を毎回呼び出すように設定しています。

end()関数

ゲームクリア時に呼び出される関数です。「keydown」イベントの監視を解除しつつ、alert()命令でゲームクリアをユーザーに伝えています。

main()関数

キーがタイピングされる度に毎回呼ばれる関数です。
「押された文字」と「タイピングさせたい文字列の先頭の文字」を比較して一致しているかどうかを判断します。
もし、一致した場合は、「タイピングさせたい文字列の先頭の文字」から1文字削ります。DOMの値から文字を削ると、HTML画面からもちゃんと1文字消えます。
文字を削る操作によって「タイピングさせたい文字列」が無くなったら（文字列の長さが0の状態）、end()関数を呼んでゲームを終了させます。

カスタマイズ：サウンドエフェクトを付ける

タイピングゲームですので、タイピングしているときに打鍵音を鳴らすようにしてみたいと思います。先ほどのソースコードを修正してサウンド対応を行います。なお、音声ファイルは既にプロジェクトに入っております。

HTML側の改造


<body>
    <h1>タイピングゲーム</h1>
    <h2>お題</h2>
    <div id="target">monaca</div>
    <button onclick="start()">スタート</button>
    <audio src="cacha.mp3" id="cacha"></audio>
    <audio src="tan.mp3" id="tan"></audio>
</body>

buttonタグの下にaudioタグの記述を2行追加して下さい。

JavaScript側の改造

DOMの取得

Audioタグの要素をJavaScriptで取得します。記述はtargetのDOMを取得する処理の直下で行うことにします。


let target = document.getElementById("target");
let cacha = document.getElementById("cacha");
let tan = document.getElementById("tan");

start()関数


document.body.addEventListener("keydown", main); 
function start () {
    document.body.addEventListener("keydown", main); 
    tan.play();
}

ゲーム開始と同時にエンターキーをたたく音を鳴らします。

end()関数


function end () {
    document.body.removeEventListener("keydown", main);
    tan.play();
    alert("ゲームクリア");
}

ゲームクリアのタイミングでもエンターキーをたたく音を鳴らすことにします。
なお、別の素材があれば、もっと景気の良い音に変えても良いと思います。

main()関数


function main(event) {
    if (target.textContent.charAt(0) == event.key) {
        cacha.play();
        target.textContent = target.textContent.slice(1);
        if (target.textContent.length == 0) {
            end();
        }
    }
    console.log(event.key + "が押されました");
}

お題の一文字目と一致するキーを叩いたタイミングで、効果音を鳴らすことにします。つまり、if文の中です。

関連情報

あんこエデュケーション内にAudioタグの紹介と、AudioタグとJavaScritpを使って音を鳴らすサンプルアプリの記事がございます。

Audio(オーディオ)

音を鳴らすアプリ