【JavaScript】e-typing風の本格派タイピングゲームを作る（英語編）

2022/10/06

以前作成したe-typing風タイピングゲームのローマ字版に続き、英語版も作ってみました。シフト操作ありで、英数字に加えて各種記号にも対応した本格モデルです。

今回も以前と同様、本家e-typingの仕様を忠実に再現しました。ちなみに、以前作成したローマ字版はこちらの記事で紹介しています↓

【JavaScript】e-typing風の本格派タイピングゲームを作る | IB-Note

JavaScriptでe-typingの腕試し風タイピングゲームを作りました。ローマ字の入力ゆれにも対応した本格モデルです。

本記事では英語版の特徴やソースコード、仕様などについて詳しくご紹介していきます。

特徴
デモ
ソースコードと仕様
ローカル環境での遊び方
プログラム解説

特徴

ローマ字版と同様、以下の特徴をもつタイピングゲームとなっています。

各種設定の切り替え機能
キーガイド
進捗状況を示すプログレスバー
タイプした部分の色付け
文章が長い場合の自動スクロール機能
ミスタイプ時のエフェクト
本家と同様のタイピング結果表示
「ミスだけ」「もう1回」機能

追加要素

以下は私が追加実装したオリジナル機能です。

リアルタイムWPM表示

現在の入力速度が気になることがあるので付けてみました。

（スタート画面の設定でON/OFF設定可能）

スピードバー表示

入力速度が直感的にわかったら便利だなぁと思って付けてみました。700WPM（≒11.67キー/秒）を基準値としてどれくらいの速度かがバーの長さで示されます。

（基準値はソースコード内で変更可能）

※1
本家の仕様と挙動を再現していますが、プログラム自体は私の完全オリジナルです。本家の内部処理については一切把握していません。

※2
運指ガイドはキーボードで力尽きて諦めました。本家と違い運指ガイドなしですが許してあげてください。

デモ

今回もデモを用意したので、試しにプレイしてみてください！

下のボタンをクリックするとゲーム画面が開きます。

※スクリーンサイズの都合上、解像度(横)748px以上のデバイスでのプレイを推奨します。

e-typing風タイピングゲーム（英語版）

ことわざ

日本語表示(J)

英語表示(E)

キーガイド(G)

WPM表示(W)

スピードバー(S)

日本語入力モードをオフにしてください

スペースキーで開始

（終了はEscキーです）

;

shift

space

今回のタイピング結果

前回の結果

---

ソースコードと仕様

ソースコード

こちらがゲームのソースコードです。

コードを確認

<!-- Typing game -->
<div id="typing-start">
  <p>下のボタンをクリックするとゲーム画面が開きます。</p>
  <button id="open-button" type="button">今すぐスタート！</button>
  <p class="note">※スクリーンサイズの都合上、解像度(横)748px以上のデバイスでのプレイを推奨します。</p>
  <noscript>
    <p class="msg">本ゲームをプレイするにはJavaScriptを有効化してください。</p>
  </noscript>
</div>
<div id="game-screen">
  <div id="game-header">
    <div class="description">e-typing風タイピングゲーム（英語版）</div>
    <button id="close-button1" type="button">閉じる</button>
  </div>
  <div id="game-banner">
    <a href="https://itblogger-note.blogspot.com" rel="noopener" target="_blank">
      <img alt="バナー画像" width="728" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhugBC199Dok0WEhlv_8Tp3Tgl5xdrsbqt80F_xCTKHvelgd0mA4m2_iNUUZnhytqo6yL7Pi8yhH8kvPRbxOdtUorLkhjK15RUzbaAvEKsfrdmw70DeqiKEzIbTgOs-j79s8KnrJLx-GYs/s0-e365/banner.png"/>
    </a>
  </div>
  <div id="game-body">
    <div id="game-view1">
      <div id="game-title">ことわざ</div>
      <div id="game-explain"></div>
      <button id="start-button" type="button">スタート</button>
      <div id="game-func">
        <span>日本語表示(J)</span>
        <div class="switch-btn">
          <button class="on-btn btn show" type="button">ON</button>
          <button class="off-btn btn" type="button">OFF</button>
        </div>
        <span>英語表示(E)</span>
        <div class="switch-btn">
          <button class="on-btn btn show" type="button">ON</button>
          <button class="off-btn btn" type="button">OFF</button>
        </div>
        <span>キーガイド(G)</span>
        <div class="switch-btn">
          <button class="on-btn btn show" type="button">ON</button>
          <button class="off-btn btn" type="button">OFF</button>
        </div>
        <span>WPM表示(W)</span>
        <div class="switch-btn">
          <button class="on-btn btn show" type="button">ON</button>
          <button class="off-btn btn" type="button">OFF</button>
        </div>
        <span>スピードバー(S)</span>
        <div class="switch-btn">
          <button class="on-btn btn show" type="button">ON</button>
          <button class="off-btn btn" type="button">OFF</button>
        </div>
      </div>
    </div>
    <div id="game-view2">
      <div id="text-container">
        <div id="miss-type-screen"></div>
        <div id="start-msg">
          <p>日本語入力モードをオフにしてください</p>
          <p><em>スペースキーで開始</em></p>
          <p>（終了はEscキーです）</p>
        </div>
        <div id="example"></div>
        <div id="sentence"></div>
        <div id="progress-bar"></div>
        <div id="current-wpm"></div>
        <div id="speed-bar">
          <div class="cover"></div>
        </div>
      </div>
      <div id="virtual-keyboard">
        <div class="deco_key1"></div>
        <div class="key_1">1</div>
        <div class="key_2">2</div>
        <div class="key_3">3</div>
        <div class="key_4">4</div>
        <div class="key_5">5</div>
        <div class="key_6">6</div>
        <div class="key_7">7</div>
        <div class="key_8">8</div>
        <div class="key_9">9</div>
        <div class="key_0">0</div>
        <div class="key_hyphen">-</div>
        <div class="deco_key2"></div>
        <div class="deco_key3"></div>
        <div class="deco_key4"></div>
        <div class="deco_key5"></div>
        <div class="key_q">Q</div>
        <div class="key_w">W</div>
        <div class="key_e">E</div>
        <div class="key_r">R</div>
        <div class="key_t">T</div>
        <div class="key_y">Y</div>
        <div class="key_u">U</div>
        <div class="key_i">I</div>
        <div class="key_o">O</div>
        <div class="key_p">P</div>
        <div class="key_atmark">@</div>
        <div class="deco_key6"></div>
        <div class="key_Enter"></div>
        <div class="deco_key7"></div>
        <div class="key_a">A</div>
        <div class="key_s">S</div>
        <div class="key_d">D</div>
        <div class="key_f">F</div>
        <div class="key_g">G</div>
        <div class="key_h">H</div>
        <div class="key_j">J</div>
        <div class="key_k">K</div>
        <div class="key_l">L</div>
        <div class="key_semicolon">;</div>
        <div class="key_colon">:</div>
        <div class="deco_key8"></div>
        <div class="key_lShift">shift</div>
        <div class="key_z">Z</div>
        <div class="key_x">X</div>
        <div class="key_c">C</div>
        <div class="key_v">V</div>
        <div class="key_b">B</div>
        <div class="key_n">N</div>
        <div class="key_m">M</div>
        <div class="key_comma">,</div>
        <div class="key_period">.</div>
        <div class="key_slash">/</div>
        <div class="deco_key9"></div>
        <div class="key_rShift">shift</div>
        <div class="deco_key10"></div>
        <div class="deco_key11"></div>
        <div class="deco_key12"></div>
        <div class="deco_key13"></div>
        <div class="key_space">space</div>
        <div class="deco_key14"></div>
        <div class="deco_key15"></div>
        <div class="deco_key16"></div>
        <div class="deco_key17"></div>
        <div class="deco_key18"></div>
      </div>
    </div>
    <div id="game-result">
      <div id="current-result">
        <div class="result-title">今回のタイピング結果</div>
        <div id="example-list"></div>
        <div class="result-data"></div>
      </div>
      <div id="prev-result">
        <div class="result-title">前回の結果</div>
        <div class="result-data"></div>
      </div>
      <div id="result-comment">
        <div class="container">---</div>
      </div>
      <div id="btn-area">
        <button id="replay-button" class="btn" type="button">もう1回</button>
        <button id="close-button2" class="btn" type="button">閉じる</button>
      </div>
    </div>
  </div>
</div>
<script>
/*
e-typing-like typing game (English version) v1.0 created with passion by Fuma(@fuma_it)
Have fun :)
*/
(function(window, document) {
  const overlay = document.createElement('div');
  overlay.id = 'game-overlay';
  const game = document.getElementById('game-screen');
  const button1 = document.getElementById('close-button1');
  const button2 = document.getElementById('open-button')
  const button3 = document.getElementById('start-button');
  const button4 = document.getElementById('replay-button');
  const button5 = document.getElementById('close-button2');
  const view1 = document.getElementById('game-view1');
  const gameFunc = document.getElementById('game-func');
  const onBtns = gameFunc.querySelectorAll('.on-btn');
  const offBtns = gameFunc.querySelectorAll('.off-btn');
  const view2 = document.getElementById('game-view2');
  const result = document.getElementById('game-result');
  const mScreen = document.getElementById('miss-type-screen');
  const startMsg = document.getElementById('start-msg');
  const example = document.getElementById('example');
  const sentence = document.getElementById('sentence');
  const progress = document.getElementById('progress-bar');
  const keyboard = document.getElementById('virtual-keyboard');
  const space = keyboard.querySelector('.key_space');
  let wordJPs = ["虎穴に入らずんば虎子を得ず", "千里の道も一歩から", "禍を転じて福となす", "よく学びよく遊べ", "知は力なり", "雄弁は銀、沈黙は金", "郷に入っては郷に従え", "転ばぬ先の杖", "百聞は一見に如かず", "ローマは一日にして成らず"]; // 表示文章
  let wordENs = ["Nothing ventured, nothing gained.", "A journey of a thousand miles must start with the first step.", "Bad luck often brings good luck.", "All work and no play makes Jack a dull boy.", "Knowledge is power.", "Speech is silver, silence is golden.", "When in Rome, do as the Romans do.", "Prevention is better than cure.", "Seeing is believing.", "Rome wasn't built in a day."]; // 英語文章
  let wordEN;
  let words; // 英語データ(表示用)
  let word;
  let record; // タイプした文章の記録
  let recordHTML;
  let recordM = []; // ミスした文章のインデックス
  let weakKeys; // 苦手キー格納用
  let gameData = []; // タイピング結果
  let backup1 = [];
  let backup2 = [];
  let isFirst = true;
  let isOpen = false;
  let startFlag = false;
  let sWait = false;
  let playing = false;
  let nFlag = false;
  let missFlag = false;
  let isStopped = false;
  let moPlay = false;
  let maxNum = 10; // 出題数の上限
  let random = true; // ランダム出題
  let resCmt = true; // 結果画面のコメント
  let flagJ = true; // 日本語表示
  let flagE = true; // 英語表示
  let flagG = true; // キーガイド
  let flagW = true; // リアルタイムのWPM
  let flagS = true; // スピードバー
  let flags = [flagJ, flagE, flagG, flagW, flagS];
  let ridx, limit, begin, count, idx1, correct, miss;
  let over1, over2, left1, left2;

  // ウィンドウオープン
  function open() {
    isOpen = true;
    overlay.style.display = 'block';
    overlay.style.width = document.body.clientWidth + 'px';
    overlay.style.height = document.body.clientHeight + 'px';
    game.style.display = 'block';
    game.style.top = window.pageYOffset + window.innerHeight / 2 - game.clientHeight / 2 + 'px';
    game.style.left = window.innerWidth / 2 - game.clientWidth / 2 + 'px';

    if (isFirst) {
      document.body.appendChild(overlay);
      document.body.appendChild(game);
      document.head.insertAdjacentHTML('beforeend', '<style id="custom-css"></style>');
    } else {
      view1.style.display = 'table-cell';
      view2.style.display = 'none';
      result.style.display = 'none';
    }

    let fData = localStorage.getItem('flags');
    if (fData) {
      fData = JSON.parse(fData);
      for (let i = 0; i < fData.length; i++) {
        if (!fData[i]) onBtns[i].click();
      }
    }

    isFirst = false;
  }

  // スタート処理
  function start() {
    view1.style.display = 'none';
    view2.style.display = 'block';
    startMsg.style.display = 'block';

    startFlag = true;
    sWait = true;
    space.classList.add('active');

    flagJ = flags[0];
    flagE = flags[1];
    flagG = flags[2];
    flagW = flags[3];
    flagS = flags[4];
    flags = [flagJ, flagE, flagG, flagW, flagS];
    localStorage.setItem('flags', JSON.stringify(flags));
  }

  // カウントダウン処理
  function ready() {
    startMsg.style.display = 'none';
    const count = document.createElement('div');
    count.id = 'countdown';
    startMsg.after(count);
    let readyTime = 3;
    count.innerHTML = readyTime;
    const readyTimer = setInterval(() => {
      readyTime--;
      if (readyTime == 0) {
        clearInterval(readyTimer);
        count.remove();
        gameInit();
      }
      count.innerHTML = readyTime;
    }, 1000);
  }

  // ゲーム開始処理
  function gameInit() {
    count = 0;
    idx1 = 0;
    correct = 0;
    miss = 0;
    ridx = [];
    record = [];
    recordHTML = '';
    weakKeys = [];
    nFlag = false;
    missFlag = false;

    if (moPlay) {
      let missJPs = [];
      let missENs = [];
      for (let i = 0; i < recordM.length; i++) {
        missJPs.push(wordJPs[recordM[i]]);
        missENs.push(wordENs[recordM[i]]);
      }
      if (backup1.length == 0) {
        backup1 = [...wordJPs];
        backup2 = [...wordENs];
      }
      wordJPs = missJPs;
      wordENs = missENs;
    } else {
      if (backup1.length > 0) {
        wordJPs = [...backup1];
        wordENs = [...backup2];
        backup1 = [];
        backup2 = [];
      }
    }
    recordM = [];

    let idx;
    let a = [...Array(wordENs.length).keys()];
    if (random) {
      while (a.length > 0) {
        idx = Math.floor(Math.random() * a.length);
        ridx.push(a[idx]);
        a.splice(idx, 1);
      }
    } else {
      ridx = a;
    }

    words = [];
    for (let i = 0; i < wordENs.length; i++) {
      words.push(convData(wordENs[i]));
    }
    limit = (maxNum < wordENs.length) ? maxNum : wordENs.length;
    playing = true;
    begin = new Date();
    wordSet();

    let style = '';
    if (!flagJ) {
      style += '#example > div {opacity: 0;}';
    }
    if (!flagE) {
      style += '#sentence span:not(.typed) {opacity: 0;}';
    }
    document.getElementById('custom-css').innerHTML = style;

    if (flagW) {
      const cWPM = document.getElementById('current-wpm');
      cWPM.style.display = 'block';
      cWPM.innerHTML = 'WPM: 0.00';
      const id = setInterval(() => {
        let time = new Date() - begin;
        let speed = correct / time * 60 * 1000;
        if (playing) {
          cWPM.innerHTML = 'WPM: ' + speed.toFixed(2);
        } else {
          clearInterval(id);
          cWPM.innerHTML = '';
          cWPM.style.display = 'none';
        }
      }, 100);
    }

    if (flagS) {
      const speedBar = document.getElementById('speed-bar');
      const cover = speedBar.querySelector('.cover');
      speedBar.style.display = 'block';
      cover.style.transform = 'none';
      const id = setInterval(() => {
        let time = new Date() - begin;
        let speed = correct / time * 60 * 1000;
        if (playing) {
          let scale = 1 - speed / 700;
          cover.style.transform = 'scaleX(' + scale + ')';
        } else {
          clearInterval(id);
          cover.style.transform = 'none';
          speedBar.style.display = 'none';
        }
      }, 100);
    }
  }

  // タイピング文章セット
  function wordSet() {
    if (count == limit) {
      finish();
    } else {
      example.innerHTML = '<div>' + wordJPs[ridx[count]] + '</div>';
      wordEN = wordENs[ridx[count]];
      word = words[ridx[count]];
      let html;
      html = '<div><span class="typed"></span><span>';
      for (let i = 0; i < word.length; i++) {
        html += word[i];
      }
      html += '</span></div>';
      sentence.innerHTML = html;
      if (count > 0) {
        progress.style.transform = 'scaleX(' + (1 - count / limit) + ')';
      }
      count++;
      selActive();
    }
  }

  // ゲーム終了
  function finish() {
    let time = new Date() - begin;
    playing = false;

    const actives = keyboard.querySelectorAll('.active');
    if (actives.length > 0) {
      for (let i = 0; i < actives.length; i++) {
        actives[i].classList.remove('active');
      }
    }

    view2.style.display = 'none';
    result.style.display = 'block';
    example.innerHTML = '';
    sentence.innerHTML = '';
    progress.style.transform = 'none';

    const resList = document.getElementById('example-list');
    const resData = result.querySelectorAll('.result-data');

    let speed, accuracy, score;
    speed = correct / time * 60 * 1000;
    accuracy = correct / (correct + miss);
    score = isStopped ? '-' : Math.floor(speed * accuracy ** 3);

    let html;
    html = '<ul>';
    for (let i = 0; i < limit; i++) {
      html += '<li>';
      html += '<div class="example">' + wordJPs[ridx[i]] + '</div>';
      html += '<div class="sentence">';
      if (isStopped) {
        if (record[i]) {
          html += record[i];
        } else {
          if (!!recordHTML) {
            html += recordHTML;
            recordHTML = '';
            if (missFlag) {
              weakKeys.push(wordENs[ridx[i]][idx1]);
              html += '<span class="miss">' + wordENs[ridx[i]][idx1] + '</span>';
              missFlag = false;
            } else {
              html += wordENs[ridx[i]][idx1];
            }
            for (let j = idx1 + 1; j < wordENs[ridx[i]].length; j++) {
              html += wordENs[ridx[i]][j];
            }
          } else {
            if (missFlag) {
              weakKeys.push(wordENs[ridx[i]][0]);
              html += '<span class="miss">' + wordENs[ridx[i]][0] + '</span>';
              for (let j = 1; j < wordENs[ridx[i]].length; j++) {
                html += wordENs[ridx[i]][j];
              }
              missFlag = false;
            } else {
              for (let j = 0; j < wordENs[ridx[i]].length; j++) {
                html += wordENs[ridx[i]][j];
              }
            }
          }
        }
      } else {
        html += record[i];
      }
      html += '</div></li>';
    }
    html += '</ul>';
    resList.innerHTML = html;

    if (gameData.length > 0) {
      html = '<ul>'
      html += '<li><div class="data">' + gameData[0] + '</div></li>';
      html += '<li><div class="data">' + gameData[1] + '</div></li>';
      html += '<li><div class="data">' + gameData[2] + '</div></li>';
      html += '<li><div class="data">' + gameData[3] + '</div></li>';
      html += '<li><div class="data">' + gameData[4] + '</div></li>';
      html += '<li><div class="data">' + gameData[5] + '</div></li>';
      html += '<li><div class="data">' + gameData[6] + '</div></li>';
      html += '<li><div class="data">' + gameData[7] + '</div></li>';
      html += '</ul>';
    } else {
      html = '<ul>'
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '<li><div class="data">-</div></li>';
      html += '</ul>';
    }
    resData[1].innerHTML = html;

    html = '<ul>';
    html += '<li><div class="title">スコア</div><div class="data">' + score + '</div></li>';
    html += '<li><div class="title">レベル</div><div class="data">' + getLevel(score) +'</div></li>';
    html += '<li><div class="title">入力時間</div><div class="data">' + convTime(time) + '</div></li>';
    html += '<li><div class="title">入力文字数</div><div class="data">' + correct + '</div></li>';
    html += '<li><div class="title">ミス入力数</div><div class="data">' + miss + '</div></li>';
    html += '<li><div class="title">WPM</div><div class="data">' + convStr(speed.toFixed(2)) + '</div></li>';
    html += '<li><div class="title">正確率</div><div class="data">' + convStr((accuracy * 100).toFixed(2)) + '%</div></li>';
    html += '<li><div class="title">苦手キー</div><div class="data">' + getWeaks(weakKeys) + '</div></li>';
    html += '</ul>';
    resData[0].innerHTML = html;
    gameData = [score, getLevel(score), convTime(time), correct, miss, convStr(speed.toFixed(2)), convStr((accuracy * 100).toFixed(2)) + '%', getWeaks(weakKeys)];

    if (resCmt) {
      const resComment = document.getElementById('result-comment');
      const container = resComment.querySelector('.container');
      const comment1 = 'ノーミス達成！おめでとうございます。';
      const comment2 = '惜しい！あと1文字。次はミス0を狙いましょう。';
      const comments = ['日々の練習が結果に繋がります。', '速さよりも正確性のほうがスコアに響きます。'];
      if (!isStopped) {
        if (miss == 0) {
          container.innerHTML = comment1;
        } else if (miss == 1) {
          container.innerHTML = comment2;
        } else {
          let idx = Math.floor(Math.random() * comments.length);
          container.innerHTML = comments[idx];
        }
      } else {
        container.innerHTML = '---';
      }
    }

    isStopped = false;

    const moBtn = document.getElementById('miss-only-button');
    if (recordM.length > 0) {
      if (!moBtn) {
        const button6 = document.createElement('button');
        button6.type = 'button';
        button6.id = 'miss-only-button';
        button6.classList.add('btn');
        button6.innerHTML = 'ミスだけ';
        button6.addEventListener('click', () => {
          moPlay = true;
          sWait = true;
          result.style.display = 'none';
          view2.style.display = 'block';
          startMsg.style.display = 'block';
          space.classList.add('active');
        });
        const btnArea = document.getElementById('btn-area');
        btnArea.appendChild(button6);
      }
    } else {
      if (moBtn) {
        moPlay = false;
        moBtn.remove();
      }
    }
  }

  // データ変換
  function convData(data) {
    const convMap = {' ':'<u>␣</u>'};

    let remStr = String(data), slStr;
    let result = [];

    function splice() {
      let oneChar = remStr.slice(0, 1);
      remStr = remStr.slice(1);
      return oneChar;
    }

    while (remStr) {
      slStr = splice();
      if (slStr == ' ') {
        result.push(convMap[slStr]);
      } else {
        result.push(slStr);
      }
    }

    return result;
  }

  // 打った部分の色付け
  function colorTyped() {
    let html = '<div><span class="typed">';
    for (let i = 0; i <= idx1; i++) {
      html += word[i];
    }
    html += '</span><span>';
    for (let i = idx1 + 1; i < word.length; i++) {
      html += word[i];
    }
    html += '</span></div>';
    return html;
  }

  // テキスト移動処理
  function textMove() {
    const textS = document.querySelector('#sentence > div');
    const textE = document.querySelector('#example > div');
    const textS1 = textS.querySelector('.typed');
    const textS2 = textS.querySelector('span:not(.typed)');
    let remLen = textS2.innerText.length;
    if (idx1 == 0) {
      over1 = textS.clientWidth - 580;
      over2 = textE.clientWidth - 580;
      left1 = 0, left2 = 0;
    }
    if (textS.clientWidth > 580) {
      if (textS1.getBoundingClientRect().width > 310) {
        let move1 = textS2.getBoundingClientRect().width / remLen;
        left1 += move1;
        textS.style.left = -left1 + 'px';
      }
    }
    if (textE.clientWidth > 580) {
      let move2 = over2 / remLen;
      left2 += move2;
      textE.style.left = -left2 + 'px';
      over2 -= move2;
    }
  }

  // ミス入力処理
  function missed() {
    miss++;
    if (recordM.indexOf(ridx[count - 1]) == -1) {
      recordM.push(ridx[count - 1]);
    }
    mScreen.classList.add('missed');
    setTimeout(() => {
      mScreen.classList.remove('missed');
    }, 200);
  }

  // アクティブキー処理
  function selActive() {
    const prevActives = keyboard.querySelectorAll('.active');
    if (prevActives.length > 0) {
      for (let i = 0; i < prevActives.length; i++) {
        prevActives[i].classList.remove('active');
      }
    }
    const key = keyConvert(wordEN[idx1]);
    let selectors = [];
    if (typeof(key) == 'string') {
      selectors.push('.key_' + key);
    } else {
      for (let i = 0; i < key.length; i++) {
        selectors.push('.key_' + key[i]);
      }
    }
    const targets = keyboard.querySelectorAll(selectors.join());
    if (targets.length > 0 && flagG) {
      for (let i = 0; i < targets.length; i++) {
        targets[i].classList.add('active');
      }
    }
  }

  // 対応キーの変換
  function keyConvert(key) {
    const keyMap = {
      'A':['a', 'rShift'], 'B':['b', 'rShift'], 'C':['c', 'rShift'], 'D':['d', 'rShift'], 'E':['e', 'rShift'],
      'F':['f', 'rShift'], 'G':['g', 'rShift'], 'H':['h', 'lShift'], 'I':['i', 'lShift'], 'J':['j', 'lShift'],
      'K':['k', 'lShift'], 'L':['l', 'lShift'], 'M':['m', 'lShift'], 'N':['n', 'lShift'], 'O':['o', 'lShift'],
      'P':['p', 'lShift'], 'Q':['q', 'rShift'], 'R':['r', 'rShift'], 'S':['s', 'rShift'], 'T':['t', 'rShift'],
      'U':['u', 'lShift'], 'V':['v', 'rShift'], 'W':['w', 'rShift'], 'X':['x', 'rShift'], 'Y':['y', 'rShift'],
      'Z':['z', 'rShift'], '!':['1', 'rShift'], '"':['2', 'rShift'], '#':['3', 'rShift'], '$':['4', 'rShift'],
      '%':['5', 'rShift'], '&':['6', 'lShift'], "'":['7', 'lShift'], '(':['8', 'lShift'], ')':['9', 'lShift'],
      '?':['slash', 'lShift'], '-':'hyphen', '@':'atmark', ';':'semicolon', ':':'colon',
      ',':'comma', '.':'period', '/':'slash', ' ':'space'
    };

    if (keyMap[key]) {
      return keyMap[key];
    } else {
      return key;
    }
  }

  // タイピングレベル判定
  function getLevel(score) {
    let level;
    if (score == '-') {
      level = '-';
    } else {
      switch (true) {
        case 0 <= score && score <= 21:
          level = 'E-';
          break;
        case 21 < score && score <= 38:
          level = 'E';
          break;
        case 38 < score && score <= 55:
          level = 'E+';
          break;
        case 55 < score && score <= 72:
          level = 'D-';
          break;
        case 72 < score && score <= 89:
          level = 'D';
          break;
        case 89 < score && score <= 106:
          level = 'D+';
          break;
        case 106 < score && score <= 123:
          level = 'C-';
          break;
        case 123 < score && score <= 140:
          level = 'C';
          break;
        case 140 < score && score <= 157:
          level = 'C+';
          break;
        case 157 < score && score <= 174:
          level = 'B-';
          break;
        case 174 < score && score <= 191:
          level = 'B';
          break;
        case 191 < score && score <= 208:
          level = 'B+';
          break;
        case 208 < score && score <= 225:
          level = 'A-';
          break;
        case 225 < score && score <= 242:
          level = 'A';
          break;
        case 242 < score && score <= 259:
          level = 'A+';
          break;
        case 259 < score && score <= 276:
          level = 'S';
          break;
        case 276 < score && score <= 299:
          level = 'Good!';
          break;
        case 299 < score && score <= 324:
          level = 'Fast';
          break;
        case 324 < score && score <= 349:
          level = 'Thunder';
          break;
        case 349 < score && score <= 374:
          level = 'Ninja';
          break;
        case 374 < score && score <= 399:
          level = 'Comet';
          break;
        case 399 < score && score <= 449:
          level = 'Professor';
          break;
        case 449 < score && score <= 499:
          level = 'LaserBeam';
          break;
        case 499 < score && score <= 549:
          level = 'EddieVH';
          break;
        case 549 < score && score <= 599:
          level = 'Meijin';
          break;
        case 599 < score && score <= 649:
          level = 'Rocket';
          break;
        case 649 < score && score <= 699:
          level = 'Tatsujin';
          break;
        case 699 < score && score <= 749:
          level = 'Jedi';
          break;
        case 749 < score && score <= 799:
          level = 'Godhand';
          break;
        case 799 < score:
          level = 'Joker';
          break;
      }
    }
    return level;
  }

  // 苦手キー上位5個を取得
  function getWeaks(keys) {
    let keyData1 = {};
    keys.forEach((key) => {
      key = key.toLowerCase();
      if (keyData1[key] != undefined) {
        keyData1[key] += 1;
      } else {
        keyData1[key] = 1;
      }
    });
    let keyData2 = Object.keys(keyData1).map(k => ({key:k, miss:keyData1[k]}));
    keyData2.sort((a, b) => b.miss - a.miss);

    let res = '';
    let max = (keyData2.length < 5) ? keyData2.length : 5;
    for (let i = 0; i < max; i++) {
      if (i != max - 1) {
        res += keyData2[i].key + ' ';
      } else {
        res += keyData2[i].key;
      }
    }
    return res;
  }

  // 入力時間の変換
  function convTime(time) {
    let m, ms, s, res;
    if (time >= 60000) {
      m = Math.floor(time / 60000);
      ms = time - m * 60000;
      s = (ms / 1000).toFixed(2);
      res = m + '分' + s.slice(0, -3) + '秒' + s.slice(-2);
    } else {
      s = (time / 1000).toFixed(2);
      res = s.slice(0, -3) + '秒' + s.slice(-2);
    }
    return res;
  }

  // 文字列データの変換
  function convStr(str) {
    let res;
    if (str == 'NaN') {
      res = '0';
    } else {
      if (str.slice(-2) == '00') {
        res = str.slice(0, -3);
      } else {
        res = str;
      }
    }
    return res;
  }

  // スイッチ処理
  function toggle(idx, flag) {
    if (flag) {
      onBtns[idx].click();
    } else {
      offBtns[idx].click();
    }
  }

  // リプレイ処理
  function replay() {
    moPlay = false;
    result.style.display = 'none';
    view2.style.display = 'block';
    startMsg.style.display = 'block';

    sWait = true;
    space.classList.add('active');
  }

  // クローズ処理
  function close() {
    isOpen = false;
    startFlag = false;
    playing = false;
    nFlag = false;
    missFlag = false;
    moPlay = false;
    gameData = [];

    const actives = keyboard.querySelectorAll('.active');
    if (actives.length > 0) {
      for (let i = 0; i < actives.length; i++) {
        actives[i].classList.remove('active');
      }
    }

    view2.style.display = 'none';
    result.style.display = 'none';
    example.innerHTML = '';
    sentence.innerHTML = '';
    progress.style.transform = 'none';
    overlay.style.display = 'none';
    game.style.display = 'none';
  }

  // ボタンクリック時
  button1.addEventListener('click', close);
  button2.addEventListener('click', open);
  button3.addEventListener('click', start);
  button4.addEventListener('click', replay);
  button5.addEventListener('click', close);
  for (let i = 0; i < onBtns.length; i++) {
    onBtns[i].addEventListener('click', () => {
      onBtns[i].classList.remove('show');
      offBtns[i].classList.add('show');
      flags[i] = false;
    });
  }
  for (let i = 0; i < offBtns.length; i++) {
    offBtns[i].addEventListener('click', () => {
      offBtns[i].classList.remove('show');
      onBtns[i].classList.add('show');
      flags[i] = true;
    });
  }

  // キー押下時
  window.addEventListener('keydown', (event) => {
    let key = event.key;
    if (isOpen && !startFlag) {
      if (key == ' ') event.preventDefault();
      if (key == 'j') toggle(0, flags[0]);
      if (key == 'e') toggle(1, flags[1]);
      if (key == 'g') toggle(2, flags[2]);
      if (key == 'w') toggle(3, flags[3]);
      if (key == 's') toggle(4, flags[4]);
    }
    if (startFlag) { // ゲーム開始
      if (key == ' ') event.preventDefault();
      if (sWait) { // スペースキー入力待ちの場合
        if (key == ' ') {
          sWait = false;
          space.classList.remove('active');
          ready();
        }
      }
      if (playing) { // プレイ中
        if (key == 'Escape') { // Escを押した場合
          isStopped = true;
          finish();
        } else {
          if (key == wordEN[idx1]) {
            sentence.innerHTML = colorTyped();
            if (missFlag) {
              recordHTML += '<span class="miss">' + key + '</span>';
              weakKeys.push(key);
              missFlag = false;
            } else {
              recordHTML += key;
            }
            textMove();
            correct++;
            idx1++;
          } else {
            if (key != 'Shift') {
              missFlag = true;
              missed();
            }
          }
          if (idx1 == wordEN.length) {
            record.push(recordHTML);
            recordHTML = '';
            idx1 = 0;
            wordSet();
          } else {
            if (!missFlag) selActive();
          }
        }
      }
    }
  });

  // リサイズ時
  window.addEventListener('resize', () => {
    if (isOpen) {
      overlay.style.width = document.body.clientWidth + 'px';
      overlay.style.height = document.body.clientHeight + 'px';
      game.style.top = window.pageYOffset + window.innerHeight / 2 - game.clientHeight / 2 + 'px';
      game.style.left = window.innerWidth / 2 - game.clientWidth / 2 + 'px';
    }
  });
})(window, document);
</script>
<style>
#typing-start {
  font-family: Meiryo, Arial, sans-serif;
  text-align: center;
  padding: 20px 6px 5px;
  background-color: #ffecf1;
  border: 1px solid #fecfdc;
  border-radius: 3px;
}
#typing-start p {
  font-size: 15px;
  margin: 0 0 15px;
}
#typing-start p + p {
  margin: 0;
}
#typing-start .note {
  font-size: 14px;
}
#typing-start .msg {
  color: tomato;
}
#open-button {
  display: block;
  width: 308px;
  height: 48px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(0deg, #fc8dc0, #fec2e0);
  border: 0;
  border-radius: 3em;
  margin: 20px auto 30px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  overflow: hidden;
  cursor: pointer;
  appearance: none;
}
#game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: .8;
  z-index: 9999;
}
#game-screen {
  display: none;
  position: absolute;
  width: 748px;
  background: #fff;
  padding: 0 10px 10px;
  z-index: 10000;
}
#game-screen, #game-screen * {
  font-family: Meiryo, Arial, sans-serif;
  box-sizing: border-box;
}
#game-screen ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#game-header {
  position: relative;
  height: 40px;
  border-bottom: 1px solid #cacaca;
  margin: 0 0 5px;
}
#close-button1 {
  position: absolute;
  top: 6px;
  right: 0;
  width: 63px;
  height: 27px;
  font-size: 11px;
  font-weight: bold;
  color: #777;
  background: linear-gradient(0deg, #eee, #fff);
  padding: 1px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  appearance: none;
}
#close-button1:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="%23777"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 2px;
  vertical-align: -0.2em;
}
#close-button1:hover {
  background: linear-gradient(180deg, #eee, #fff);
}
#game-header .description {
  height: 40px;
  font-size: 18px;
  color: #7b7a7a;
  line-height: 40px;
  margin: 0 0 0 5px;
}
#game-banner {
  width: 728px;
  height: 90px;
  margin: 0 auto 5px;
}
#game-banner a {
  display: block;
  width: 100%;
  height: 100%;
}
#game-body {
  display: table;
  width: 728px;
  height: 470px;
  color: #636363;
}
#game-view1 {
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#game-title {
  font-size: 24px;
}
#game-explain {
  font-size: 15px;
  padding: 0 24px;
  margin: 12px 0 74px;
}
#start-button {
  width: 160px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background: #057fff;
  border: 0;
  border-radius: 3px;
  margin: 0 auto;
  cursor: pointer;
  appearance: none;
}
#game-func {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 28px;
  line-height: 26px;
  background-color: #f3f3f3;
  padding: 0 12px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  white-space: nowrap;
}
#game-func > span {
  display: inline-block;
  font-size: 11px;
}
#game-func .switch-btn {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  overflow: hidden;
}
#game-func .switch-btn:last-child {
  margin-right: 0;
}
#game-func .switch-btn .btn {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 36px;
  height: 16px;
  line-height: 15px;
  letter-spacing: 0.5px;
  font-size: 11px;
  color: #fff;
  text-align: center;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
}
#game-func .switch-btn .on-btn {
  background-color: #2a89ff;
}
#game-func .switch-btn .off-btn {
  background-color: #ff4032;
}
.show {
  display: block !important;
}
#game-view2 {
  display: none;
}
#text-container {
  position: relative;
  max-width: 610px;
  height: 172px;
  border: 1px solid #d8d8d8;
  margin: 0 auto 10px;
  overflow: hidden;
}
#miss-type-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.2);
  opacity: 0;
}
#miss-type-screen.missed {
  animation: miss .2s;
}
#start-msg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 14px;
  text-align: center;
  line-height: 170%;
  padding-top: 46px;
}
#start-msg p {
  padding: 0;
  margin: 0 0 4px;
}
#start-msg em {
  font-size: 24px;
  font-style: normal;
  color: #ff9c00;
}
#countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #ff9c00;
  font-size: 80px;
  transform: translateX(-50%) translateY(-50%);
}
#example {
  position: absolute;
  left: 15px;
  top: 36px;
  width: 580px;
  height: 36px;
  font-size: 30px;
  line-height: 36px;
  overflow: hidden;
  font-variant-ligatures: no-common-ligatures;
}
#example > div {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  white-space: nowrap;
}
#sentence {
  position: absolute;
  left: 15px;
  top: 102px;
  width: 580px;
  height: 30px;
  font-size: 26px;
  line-height: 26px;
  overflow: hidden;
  font-variant-ligatures: no-common-ligatures;
}
#sentence > div {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  white-space: nowrap;
}
#sentence > div u {
  display: inline-block;
  color: #d0d0d0;
  transform: scale(0.6, 1);
  transform-origin: top left;
  letter-spacing: -0.4em;
  text-decoration: none;
}
#sentence .typed {
  color: #ffd0a6;
}
#sentence .typed u {
  color: #ffd0a6;
}
#progress-bar {
  position: absolute;
  bottom: 1px;
  left: 5px;
  width: calc(100% - 10px);
  height: 4px;
  background-color: #bcbcbc;
  transform-origin: left top;
}
#current-wpm {
  display: none;
  position: absolute;
  top: 5px;
  right: 10px;
}
#speed-bar {
  display: none;
  position: absolute;
  top: 2px;
  left: 5px;
  width: calc(100% - 10px);
  height: 3px;
  background: linear-gradient(90deg, #87cefa, #ff6347);
  transform-origin: left top;
}
.cover {
  top: 0;
  right: 0;
  height: 3px;
  background: #fff;
  transform-origin: right top;
}
#virtual-keyboard {
  position: relative;
  width: 610px;
  margin: 0 auto;
}
#virtual-keyboard div {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  font-weight: bold;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  overflow: hidden;
}
#virtual-keyboard div.key_1 {
  top: 0;
  left: 41px;
}
#virtual-keyboard div.key_2 {
  top: 0;
  left: 82px;
}
#virtual-keyboard div.key_3 {
  top: 0;
  left: 123px;
}
#virtual-keyboard div.key_4 {
  top: 0;
  left: 164px;
}
#virtual-keyboard div.key_5 {
  top: 0;
  left: 205px;
}
#virtual-keyboard div.key_6 {
  top: 0;
  left: 246px;
}
#virtual-keyboard div.key_7 {
  top: 0;
  left: 287px;
}
#virtual-keyboard div.key_8 {
  top: 0;
  left: 328px;
}
#virtual-keyboard div.key_9 {
  top: 0;
  left: 369px;
}
#virtual-keyboard div.key_0 {
  top: 0;
  left: 410px;
}
#virtual-keyboard div.key_hyphen {
  top: 0;
  left: 451px;
}
#virtual-keyboard div.deco_key2 {
  top: 0;
  left: 492px;
}
#virtual-keyboard div.deco_key3 {
  top: 0;
  left: 533px;
}
#virtual-keyboard div.deco_key4 {
  top: 0;
  left: 574px;
}
#virtual-keyboard div.deco_key5 {
  top: 41px;
  width: 56px;
}
#virtual-keyboard div.key_q {
  top: 41px;
  left: 61px;
}
#virtual-keyboard div.key_w {
  top: 41px;
  left: 102px;
}
#virtual-keyboard div.key_e {
  top: 41px;
  left: 143px;
}
#virtual-keyboard div.key_r {
  top: 41px;
  left: 184px;
}
#virtual-keyboard div.key_t {
  top: 41px;
  left: 225px;
}
#virtual-keyboard div.key_y {
  top: 41px;
  left: 266px;
}
#virtual-keyboard div.key_u {
  top: 41px;
  left: 307px;
}
#virtual-keyboard div.key_i {
  top: 41px;
  left: 348px;
}
#virtual-keyboard div.key_o {
  top: 41px;
  left: 389px;
}
#virtual-keyboard div.key_p {
  top: 41px;
  left: 430px;
}
#virtual-keyboard div.key_atmark {
  top: 41px;
  left: 471px;
}
#virtual-keyboard div.deco_key6 {
  top: 41px;
  left: 512px;
}
#virtual-keyboard div.key_Enter {
  top: 41px;
  left: 553px;
  width: 57px;
  height: 77px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 21px 100%, 21px 36px, 0 36px);
}
#virtual-keyboard div.key_Enter:after {
  position: absolute;
  display: block;
  content: "";
  top: 34px;
  left: 0;
  width: 20px;
  height: 41px;
  border-top: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}
#virtual-keyboard div.deco_key7 {
  top: 82px;
  width: 76px;
}
#virtual-keyboard div.key_a {
  top: 82px;
  left: 81px;
}
#virtual-keyboard div.key_s {
  top: 82px;
  left: 122px;
}
#virtual-keyboard div.key_d {
  top: 82px;
  left: 163px;
}
#virtual-keyboard div.key_f {
  top: 82px;
  left: 204px;
}
#virtual-keyboard div.key_g {
  top: 82px;
  left: 245px;
}
#virtual-keyboard div.key_h {
  top: 82px;
  left: 286px;
}
#virtual-keyboard div.key_j {
  top: 82px;
  left: 327px;
}
#virtual-keyboard div.key_k {
  top: 82px;
  left: 368px;
}
#virtual-keyboard div.key_l {
  top: 82px;
  left: 409px;
}
#virtual-keyboard div.key_semicolon {
  top: 82px;
  left: 450px;
}
#virtual-keyboard div.key_colon {
  top: 82px;
  left: 491px;
}
#virtual-keyboard div.deco_key8 {
  top: 82px;
  left: 532px;
}
#virtual-keyboard div.key_lShift {
  top: 123px;
  left: 0;
  width: 96px;
}
#virtual-keyboard div.key_z {
  top: 123px;
  left: 101px;
}
#virtual-keyboard div.key_x {
  top: 123px;
  left: 142px;
}
#virtual-keyboard div.key_c {
  top: 123px;
  left: 183px;
}
#virtual-keyboard div.key_v {
  top: 123px;
  left: 224px;
}
#virtual-keyboard div.key_b {
  top: 123px;
  left: 265px;
}
#virtual-keyboard div.key_n {
  top: 123px;
  left: 306px;
}
#virtual-keyboard div.key_m {
  top: 123px;
  left: 347px;
}
#virtual-keyboard div.key_comma {
  top: 123px;
  left: 388px;
}
#virtual-keyboard div.key_period {
  top: 123px;
  left: 429px;
}
#virtual-keyboard div.key_slash {
  top: 123px;
  left: 470px;
}
#virtual-keyboard div.deco_key9 {
  top: 123px;
  left: 511px;
}
#virtual-keyboard div.key_rShift {
  top: 123px;
  left: 552px;
  width: 58px;
}
#virtual-keyboard div.deco_key10 {
  top: 164px;
  left: 0;
  width: 56px;
}
#virtual-keyboard div.deco_key11 {
  top: 164px;
  left: 61px;
}
#virtual-keyboard div.deco_key12 {
  top: 164px;
  left: 102px;
}
#virtual-keyboard div.deco_key13 {
  top: 164px;
  left: 143px;
}
#virtual-keyboard div.key_space {
  top: 164px;
  left: 184px;
  width: 181px;
}
#virtual-keyboard div.deco_key14 {
  top: 164px;
  left: 370px;
}
#virtual-keyboard div.deco_key15 {
  top: 164px;
  left: 411px;
}
#virtual-keyboard div.deco_key16 {
  top: 164px;
  left: 452px;
  width: 56px;
}
#virtual-keyboard div.deco_key17 {
  top: 164px;
  left: 513px;
}
#virtual-keyboard div.deco_key18 {
  top: 164px;
  left: 554px;
  width: 56px;
}
#virtual-keyboard div.active {
  background-color: #ff9c00 !important;
  border-color: #ff9c00 !important;
  color: #fff !important;
}
#game-result {
  display: none;
  width: 728px;
}
#current-result {
  position: relative;
  float: left;
  width: 590px;
  height: 337px;
  border: 1px solid #d0d0d0;
  margin: 0 0 12px;
}
#game-result .result-title {
  height: 37px;
  font-size: 15px;
  font-weight: bold;
  line-height: 37px;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 10px;
}
#current-result .result-title {
  color: #027fff;
  border-bottom: 1px solid #d0d0d0;
}
#example-list {
  position: absolute;
  top: 49px;
  left: 12px;
  width: 376px;
  height: 274px;
  padding: 10px;
  overflow: auto;
  border: 1px solid #d0d0d0;
}
#example-list ul {
  width: 354px;
}
#example-list ul li {
  font-size: 16px;
  margin-bottom: 12px;
  overflow-wrap: break-word;
}
#example-list .miss {
  color: #f00;
}
#game-result .result-data {
  position: absolute;
  width: 188px;
  height: 298px;
  top: 37px;
  right: 0;
  padding: 12px 11px 0 11px;
  background: #f7f7f7;
}
#game-result .result-data ul li {
  position: relative;
  border-bottom: 1px solid #d0d0d0;
}
#game-result .result-data ul li .title {
  position: absolute;
  font-size: 11px;
  height: 32px;
  line-height: 32px;
  top: 0;
  left: 0;
}
#game-result .result-data ul li .data {
  color: #027fff;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  width: 166px;
  text-align: right;
  font-weight: bold;
  padding-right: 6px;
}
#game-result .result-data ul li:last-child .data {
  text-transform: uppercase;
}
#prev-result {
  position: relative;
  width: 138px;
  height: 337px;
  float: right;
  border-top: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
#prev-result .result-title {
  border-bottom: 1px solid #d0d0d0;
}
#prev-result .result-data {
  width: 137px;
}
#prev-result .result-data ul li .data {
  width: 115px;
}
#result-comment {
  position: relative;
  width: 728px;
  height: 53px;
  text-align: center;
  border: 1px solid #d0d0d0;
  margin: 12px 0 0;
  clear: both;
}
#result-comment .container {
  position: absolute;
  width: 726px;
  font-size: 14px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 18px;
}
#btn-area {
  position: relative;
  margin: 18px 0 0;
}
#game-result .btn {
  position: absolute;
  display: block;
  width: 129px;
  height: 39px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 39px;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  border: 0;
  appearance: none;
}
#replay-button {
  top: 0;
  right: 289px;
  background-color: #027fff;
}
#close-button2 {
  top: 0;
  right: 0;
  color: #7b7a7a !important;
  background-color: #f4f5f5;
}
#miss-only-button {
  top: 0;
  left: 164px;
  background-color: #23c21f;
}
@keyframes miss {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

仕様

コードの仕様について簡単に説明します。

コードは上から順に本体のHTML, JavaScript, CSSで構成されており、<script> ~ </script>で囲まれた部分がJavaScriptです。JavaScriptコードを編集することで、入力文章を好きなものに変えたり設定を変更したりできます。

先に挙げておくと、JavaScript内でいじってOKな部分は以下の通りです。これら以外は（わかっている人を除き）基本的にいじらないでください。

パラメータ	説明
wordJPs	表示文章
wordENs	英語文章
maxNum	出題数の上限
random	出題をランダムにするかどうか
resCmt	結果画面のコメント表示有無

上記パラメータはソースコード内でもコメントを付けているので、探す際の参考にしてください。

編集時の注意

wordJPsとwordENsの文章は元コードのように配列内の位置をぴったり合わせてください。

let wordJPs = ["虎穴に入らずんば虎子を得ず", "千里の道も一歩から", ... , "ローマは一日にして成らず"]; // 表示文章
let wordENs = ["Nothing ventured, nothing gained.", "A journey of a thousand miles must start with the first step.", ... , "Rome wasn't built in a day."]; // 英語文章

wordJPsが[A, B, C]なのにwordENsが[C, A, B]のようになっている場合、表示がずれておかしな状態になってしまいます。

また、内部処理が正しくできるよう、英文にシングルクォーテーション（'）が含まれている場合は全体をダブルクォーテーション（"）で囲んでください。逆に、ダブルクォーテーションが含まれている場合は全体をシングルクォーテーションで囲んでください。例えば、以下のような感じになります。

let wordENs = ["Rock 'n' Roll", '"See," he said.'];

ローカル環境での遊び方

ローカル環境で遊ぶための手順は以下の通りです。

ソースコードをコピーします。
メモ帳を開き、コピーしたコードを貼り付けて.htmlファイルとして保存します。（名前はtyping-game.htmlなどお好きに）
保存した.htmlファイルをダブルクリックするとブラウザが開き、ゲームをプレイできます。

プログラム解説

基本的な構成はローマ字版と同じなのでそちらに譲るとして、本記事では英語版特有の処理について解説します。

かな→ローマへの変換や複数入力パターンへの対応が不要であるため、ローマ字版よりは全体的にシンプルなコードになっていますが、英文タイピングを正しく実現するために少し工夫が必要な部分もあります。

英文データ変換

まず、英文タイピングでメインとなる英文データの処理について。ローマ字版と違いかな→ローマ変換はありませんが、表示文章にスペース記号とHTML要素<u>␣</u>を含む必要があるため、元の英語文章と対応させた形で変換を行います。

この変換処理を担っているのが以下のコード部分で、英語文章を読み込んだ時にスペースは<u>␣</u>で、他はそのままの形で1文字単位で配列resultに追加していき、最終的に文章全体のデータが格納されたresultを返します。

// データ変換
function convData(data) {
  const convMap = {' ':'␣'};

  let remStr = String(data), slStr;
  let result = [];

  function splice() {
    let oneChar = remStr.slice(0, 1);
    remStr = remStr.slice(1);
    return oneChar;
  }

  while (remStr) {
    slStr = splice();
    if (slStr == ' ') {
      result.push(convMap[slStr]);
    } else {
      result.push(slStr);
    }
  }

  return result;
}

これにより、実際にタイピングする文章と表示文章をうまい具合に対応させることができます。

キーガイド

英文タイピングでは大文字や記号の入力でシフト操作が必要になるため、キーガイドもシフト操作を考慮した設計に変更します。

ローマ字版では@→atmarkなどキーガイド用のクラス名への変換が必要な一部の記号のみ変換処理を行っていましたが、それをシフト操作にも応用します。具体的には以下のような形で変換を行います。

// 対応キーの変換
function keyConvert(key) {
  const keyMap = {
    'A':['a', 'rShift'], 'B':['b', 'rShift'], 'C':['c', 'rShift'], 'D':['d', 'rShift'], 'E':['e', 'rShift'],
    'F':['f', 'rShift'], 'G':['g', 'rShift'], 'H':['h', 'lShift'], 'I':['i', 'lShift'], 'J':['j', 'lShift'],
    'K':['k', 'lShift'], 'L':['l', 'lShift'], 'M':['m', 'lShift'], 'N':['n', 'lShift'], 'O':['o', 'lShift'],
    'P':['p', 'lShift'], 'Q':['q', 'rShift'], 'R':['r', 'rShift'], 'S':['s', 'rShift'], 'T':['t', 'rShift'],
    'U':['u', 'lShift'], 'V':['v', 'rShift'], 'W':['w', 'rShift'], 'X':['x', 'rShift'], 'Y':['y', 'rShift'],
    'Z':['z', 'rShift'], '!':['1', 'rShift'], '"':['2', 'rShift'], '#':['3', 'rShift'], '$':['4', 'rShift'],
    '%':['5', 'rShift'], '&':['6', 'lShift'], "'":['7', 'lShift'], '(':['8', 'lShift'], ')':['9', 'lShift'],
    '?':['slash', 'lShift'], '-':'hyphen', '@':'atmark', ';':'semicolon', ':':'colon',
    ',':'comma', '.':'period', '/':'slash', ' ':'space'
  };

  if (keyMap[key]) {
    return keyMap[key];
  } else {
    return key;
  }
}

上のコードではAを['a', 'rShift']と変換することにより、Aを打つときにaと右シフトをキーガイドに表示させることができます。他のアルファベットや記号についても同様です。

キー入力判定

英語版のキー入力判定はローマ字版と違って複雑な場合分け処理がいらないので、以下のようにかなりシンプルな形で表現できます。（わかりやすいようにコメントを付けています）

if (key == wordEN[idx1]) { // 入力キーが対象の文字と一致しているかどうか
  sentence.innerHTML = colorTyped(); // 打った部分を色付け
  if (missFlag) { // 入力一致前にミスっている場合
    recordHTML += '' + key + '';
    weakKeys.push(key); // ミスったキー（現在のキー）を苦手キーに追加
    missFlag = false; // ミス判定フラグをOFFにリセット
  } else {
    recordHTML += key;
  }
  textMove();
  correct++; // 正解文字数を1増やす
  idx1++; // 次の文字へ
} else { // ミスってる場合
  if (key != 'Shift') { // シフトはスルーする
    missFlag = true; // ミス判定フラグON
    missed();
  }
}
if (idx1 == wordEN.length) { // 文章を打ち切った場合
  record.push(recordHTML);
  recordHTML = '';
  idx1 = 0;
  wordSet(); // 新しい文章をセット
} else {
  if (!missFlag) selActive();
}