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

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

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

前回の記事を確認したい方は下記からどうぞ。

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

2019.10.07

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

少しずつ改良していきましょう。



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

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

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

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

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

複数の単語を用意する

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

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

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.09.01

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

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

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

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

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

今回の記事のサンプルコード

今回の記事のサンプルコードです(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;
  }
});
タイピングゲーム

最後に

いかがでしょうか。

次はタイピングゲームをスタートするときのイベントを追加していこうと思っています。

コツコツやっていきます。