【JavaScript講座】タイピングゲームを作成する No.3

※この記事は「2021年4月12日」に更新しました。

タイピングゲームを作成する No.3 です。

前回の記事を確認したい方は、以下をご参照下さい。

【JavaScript講座】タイピングゲームを作成する No.2

2019年10月7日

実際に JavaScript でタイピングゲームを作成していきます。

今回の内容までコードを書けば、ひたすら入力するだけのものであれば、ひとまず完成します。

少しずつ、改良していきます。

SE、Web制作、販売を経験した管理人が解説します。

タイピングゲームを作成する

それでは、タイピングゲームを作成していきます。

今回の記事のポイントは、以下の通りです。

複数の単語を用意する
単語の入力が終わったときに、次の単語を表示させる

それでは、見ていきましょう。

複数の単語を用意する

前回までのコードだと単語は一つしか用意していません。

今回は、複数の単語を用意して、ランダムで表示させるように改良します。

HTML とスタイルシート（CSS）は前回と同じものです。

まず、配列を使います。

const words = [
  'Thomas',
  'Edward',
  'Henry',
  'Gordon',
  'James',
  'Percy',
  'Toby',
];

words という、新しい変数に適当な配列を代入しましょう。

そして、今度は単語をランダムで表示させる処理です。

前回だと下記のような書き方でした。

const word = 'magic the gathering';

この word が javascript によって、配置されていました。

改良したものがこちらです。

let word = words[Math.floor(Math.random() * words.length)];

let に変更して次の処理の用意もしています。

そして、Mathオブジェクトの組み込み関数を利用した処理です。

Math.floor(Math.random() * words.length)

この部分に関しては、下記記事が参考になるかと思います。

【JavaScript講座】Mathオブジェクト

2019年9月1日

単語の入力が終わったときに、次の単語を表示させる

今度は、単語の入力が終わったときに、次の単語を表示させる処理を書いていきます。

これは、loc が 1 追加された段階で以下の判定文を書いてあげれば良いかと思います。

if (loc === word.length) {
  word = words[Math.floor(Math.random() * words.length)];
  loc = 0;
}

最後の文字を入力した段階で word が再代入されて、loc も初期化されます。

サンプルコード【JavaScript】

サンプルコードです（JavaScript）。

use strict 宣言だけ、先頭に追記してください。

あと、単語に大文字が入っているので、Shift キーを押した場合はミスにカウントせず、何もしない処理を追加しています。

const words = [
  'Thomas',
  'Edward',
  'Henry',
  'Gordon',
  'James',
  'Percy',
  'Toby',
];
let word = words[Math.floor(Math.random() * words.length)];
let loc = 0;
let wordCount = 0;
let typeMiss = 0;

const typingWord = document.getElementById('typingWord');
const wordCountLabel = document.getElementById('wordCount');
const typeMissLabel = document.getElementById('typeMiss');

typingWord.textContent = word;

function updateTypingWord() {
  let update = '';
  for (let i = 0; i < loc; i++){
    update += '-';
  }
  typingWord.textContent = update + word.substring(loc);
}

window.addEventListener('keydown', e => {
  console.log(e.key);
  if (e.key === word[loc]){
    loc++;
    if (loc === word.length) {
      word = words[Math.floor(Math.random() * words.length)];
      loc = 0;
    }
    updateTypingWord();
    wordCount++;
    wordCountLabel.textContent = wordCount;
  } else if (e.key === 'Shift') {
    ;
  } else {
    typeMiss++;
    typeMissLabel.textContent = typeMiss;
  }
});