HTMLとCSSとJavaScriptを使ってタイピングゲームを作ってみる。 - プログラミングを学習中の私が、アウトプットするためのサイト

このページではソースコードの一部分を簡単な解説をしています。

作成したゲームはコチラから
ソースコードはgithubにあります

概要
タイプされたキーが合っているか判定をし、合っていたら文字を消す
文字を右から左に流す

概要

エンターキーを押すとゲームが開始され（このページでゲームを開始させるには一度ゲーム画面をクリックしてからエンターキーを押してください）、英単語が右から流れてきます。一問打ち終わるとボーナスとしてすこし英単語が後ろへ下がります。英単語を全問タイピングしきるか、英単語が画面の左端につくとゲームが終了します。

タイプされたキーが合っているか判定をし、合っていたら文字を消す

addEventListenerのkeydownイベントで押されたキーを取得して英単語の文字列と合っているか判定します。

let num = 0; // 何文字目をタイプしているか管理する変数
let question; // 英単語
const word = document.querySelector(".word"); // 英単語をHTMLに表示させる変数　

document.addEventListener("keydown", (e) => {
  // タイプミス時の処理
  if (e.key !== question[num]) {
    return;
  }
  // タイプ文字が合っていた時の処理
  num++;
  word.textContent = "".repeat(num) + question.substring(num);
});

let num = 0; // 何文字目をタイプしているか管理する変数

let question; // 英単語

const word = document.querySelector(".word"); // 英単語をHTMLに表示させる変数　

document.addEventListener("keydown", (e) => {

// タイプミス時の処理

if (e.key !== question[num]) {

return;

}

// タイプ文字が合っていた時の処理

num++;

word.textContent = "".repeat(num) + question.substring(num);

});

変数numを使い何文字目をタイプしているか管理しています。タイプされた文字が合っていたらrepeatメソッドを使いnum変数の値分の空白を入れてsubstringメソッドで残りの英文字を表示させています。

文字を右から左に流す

英単語が横に流れるアニメーションにはjavascriptのWebAnimationApiを使用しました。

// 文字を動かすアニメーション
const move = word.animate(
  [{ transform: "translateX(100%)" }, { transform: "translateX(0%)" }],
  { duration: 15000, Fill: "forwards" }
);

// 文字を動かすアニメーション

const move = word.animate(

[{ transform: "translateX(100%)" }, { transform: "translateX(0%)" }],

{ duration: 15000, Fill: "forwards" }

);

WebAnimationApiのanimateメソッドを使うと、cssで出来るアニメーションをjavascriptから制御できるようになります。構文はelement.animate(keyframes, option)となっています。keyframesへはCSSのtransformプロパティとそのプロパティ値設定し遷移の順番に並べていきます。optionへはアニメーションの再生時間や繰り返し回数などを設定できます。

作成したゲームはコチラから
ソースコードはgithubにあります
最後までお読みいただきありがとうございました。