シンプルなタイピングゲームを作りました⌨

始めまして晴彦と申します。

友人に誘われ「クソアプリ Advent Calendar 2021」へ参加させていただきました。
(初参加の身でありながら遅刻してしまい申し訳ありません＞＜)

0.はじめに

そもそも大衆公開するようなアプリケーションを個人で作ったことがないのでそれなりに遊べる作品として完成させることを目標、webページ作成も簡単な編集をしたことがある程度でしたのでよい機会だと思い0から作り始めてみました。 またjQueryは便利だと漠然と聞いたことがありましたが恩恵受ける機会がなかったのでこちらも触ってみました。

1.内容決定

せっかく作るので何度か触ってもらえるものをば、と思い自分が何度も遊んだものと言えば～と考えて美佳タイプというタイピングソフトを思い出しました。タイピングゲームであれば「文字列のデータ管理」「キー入力」「時間経過での画面更新」等いろんな要素に触れられそうだと思い決定しました。

作ったタイピングゲームがこちら
[HaruType]
https://mtbamboo.github.io/HaruType/

参考にしました美佳タイプはこちらから
https://www.asahi-net.or.jp/~bg8j-immr/

2.こだわったとこ

(1)入力状態の更新  ゲーム中、入力すべき文字をわかるように色変え＋アンダーライン、ミスしたときは赤色に、入力前後の状態はグレーアウトさせようと思い、一文字ずつスタイルを変更する必要があると思い対応を考えました。 一文字ずつタグに分ける必要があると考え、開始時にゲーム用の文字列を作成、以下のようにタグを追加しました。

一文字ずつタグを加えて表示領域へ追加する

　// ここまでに文字列wholeArrayの作成を行っている

  for(var i=0; i < wholeArray.length; i++)
  {
    $("#target").append("<font color='silver'>"+wholeArray.charAt(i)+"</font>");
  }

あとは単純で状況に応じて色やアンダーラインを更新する関数でスタイルをいじります。
特定の順番の要素を指定する方法として同じ要素の中からインデックス指定しエレメントを選択できるeq()を使用しました。

フォント更新

// 引数は何番目の文字か、色、アンダーラインの有無
function updateColor(index,color,ub)
{
  var letter = $("font").eq(index);
  letter.css("color", color);

  if(ub)
  {
    letter.css("textDecoration","underline");
  }else{
    letter.css("textDecoration","none");
  }
}

(2)結果ツイート
やはりいい結果出したら自慢したいじゃないですか。安直ですが結果をツイートできるようにしました。

結果ツイート

function tweetBtn()
{
  var url = "https://mtbamboo.github.io/HaruType/index.html";
  var text = "HaruTypeで1分に"+targetIndex+"文字入力を達成しました!";
  if(targetIndex >= 150)
  {
    text += "すごい🥳";
  }

  window.open().location.href = ("https://twitter.com/share?url=" + url + "&text=" + text + "&count=none&lang=ja");
}

タイトルで「目指せ1分150文字入力」とお題を掲げましたので150文字達成したら文字を変えるというささやかすぎるおまけを入れています。
なぜ150文字なのかは自分の大学での課題だったからです。タッチタイピングになれると簡単に達成できるので程よい目標だと思います。

3.苦戦したとこ

(1)タイトル画面のレイアウト  周りに☆をならべその中にタイトルや説明文を記入したのですが、周りの☆がずれないよう合わせるのに相当手こずりました。 ☆の中にスペースを入れると同じスペースを入れているものはきれいに並んでくれるのですが。文字に置き換えると途端にズレだし、 スペース以外の調整方法がないかと調べたのですが、結局一つのDIV要素で解決できそうな方法を見つけられませんでした。

一つでだめなら二つ重ねたらいいじゃない！という安易な発想で背景に枠状に並べた☆のDIV要素と文字を並べたDIVを用意し重ねる側のpositionプロパティをabsoluteに指定することで重ねて実現しました。
よい方法が浮かばないでも時間が限られている場合は強引に解決する必要があるのでこういった妥協案もすぐ浮かべるようにならなければなと思いました。(期限に間に合っていませんが😅)

(2)ツイートの絵文字

結果をツイートする際、絵文字を加えようと思い「jsファイルに書いてGithubを通すので文字化け対策としてUnicodeで表示してもらおう」と思いUnicodeをHTMLEntityで加えてみる、しかしツイート画面になると消えてしまう、解決する方法が見つからず苦戦しました。

答えは単純で絵文字を直貼りするとそのまま含んでくれました。
試しもしないでうまくいかないだろうと見積もって苦戦したので完全に時間の無駄になってしまいました。
この辺は経験がものをいうと思うところなので出くわした時に覚えていかなければなと思います。

4.終えてみて

一つの作品を完成させるのは大変だけど楽しいと改めて感じました。簡単なタイピングゲームでしたので慣れている方であれば一日でできるような内容かもしれませんが、思いついたことを試行錯誤しながら一つ一つ形にするのは楽しかったです。 慣れた環境だと味わえない初心だと思うので気分転換に知らない言語触るのも面白いのかなと思います。

来年はちゃんと期限通り出せるよう気を付けます＞＜。