html JavaScript プログラミング

JavaScriptでタイピングゲームを作ってみた

2020年2月16日

こんばんは!

JavaScriptでタイピングゲームを作ってみたので、コードを共有したいと思います

今回のプログラムはこちらで動かすことができます

ソースコード

ソースコードになります

工夫した点としては

・audioタグを使用し、タイピングミスをした時にはエラー音が鳴る
・どの文字を打つべきか分かるように、正解している部分を赤色にする
・いきなりゲームが始まらないように、カウントダウンをしている

です

ボタンを中央に配置するためにcssファイルも作成しました

 

追記:改行について

「アルファベットの文字列を改行して表示することはできないか」という質問をいただきました。

brタグを挿入すれば、アルファベットの文字列を改行して表示することができますが、タイピングの際に不具合が生じます。

それを解決する単純な方法としては以下のようなものになります。

 

 

もとのプログラムからの変更点としては

brタグをwordlistの文字列に挿入して、改行されたものを表示します。

そしてreplace()メソッドを使って、brタグを除いた文章を作成し、その文章に対して入力された文字の正誤判定を行っています。

だたし、このプログラムだと最初のものと違って、入力された文字の色を変更することができません。

入力された文字の色を変更するために、さらに少し改良したものが以下のコードになります。

 

 

brタグをreplaceしていないwordlistでは、"<br>"が4文字として加算されてしまうため、入力文字の色をうまく変えられないのだと思います。

ですので、"<br>"の最初の”<"の文字が文字列の中で何文字目にあるかをindexOf()メソッドで取得し、"<"が来る直前にchar_numを+4することで対策しています。

ただ、このコードはbrタグが2つ以上の場合に対応していないので注意して下さい。

効果音

今回のプログラムで使用した効果音は「効果音ラボ」からダウンロードしました

URL:https://soundeffect-lab.info/

-html, JavaScript, プログラミング

Copyright© 物を作る者 , 2021 All Rights Reserved.