はじめに

こんにちは！@70days_jsです。

タイピングゲームを作ろうと思い、今日はその触りということでkeydownを使って文字入力できるようにしました。
今日は36日目。(2019/11/23)
よろしくお願いします。

サイトURL

やったこと

ここ数日かけてちゃんとしたタイピングゲームを作ろうと思い、今日はその触りとしてeventオブジェクトのkeydownを使って文字入力で遊びました。↓

<body>
    <p>あの時、どう思ったのか。</p>
    <div id="keyDownWrapper">
        <div id="keyDown"></div>
    </div>
</body>

id="keyDown"のdivに文字が入力されていきます。

javascript↓

document.addEventListener('keydown', logKey);
let keyDown = document.getElementById('keyDown');
let count = 0;

function logKey(e) {
    let myKeyCode = e.keyCode;
    console.log(myKeyCode);
    if (myKeyCode == 190) {
        keyDown.innerHTML += '.<br>';
        count++;
    } else if (myKeyCode == 32) {
        keyDown.innerHTML += ' ';
        count++;
    } else if (myKeyCode == 13) {
        keyDown.innerHTML += '<br>';
        count++;
    } else if (myKeyCode < 65 || myKeyCode > 91) {
        return false;
    } else {
        let myCharCode = String.fromCharCode(myKeyCode);
        let myCharCodeLower = myCharCode.toLowerCase();
        keyDown.innerHTML += myCharCodeLower;
        count++;
    }

    if (count > 25) {
        keyDown.innerHTML += '<br>';
        count = 0;
    }
}

イベントリスナーで、keydownされたらlogkey関数を呼び出す設定にしています。
documentで呼び出しているので、キーを押したらすぐに呼び出されます。

let myKeyCode = e.keyCode;

keyCodeプロパティを参照して、キーコード番号を取り出します。

190は.です。.が押されたら.と改行をする設定にしています。
32はスペースです。
13は改行です。
65~91でa~zをカバーしています。それ以外の数字はfalseを返します。（0~9はカバーしていません）
count変数は、25文字を超えたら自動的に改行されるように設定しています。

感想

色々調べていると、タイピングゲームにはどうやらブラウザの互換性とか厄介な問題が絡んでくるようです。さて、どう乗り切ろう・・・。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

キーコード一覧 (http://faq.creasus.net/04/0131/CharCode.html)
String.fromCharCode() - JavaScript | MDN (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode)

参考にさせていただきました。ありがとうございます！