Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
HTMLとCSSとJavaScriptを使ってタイピングゲームを作ってみる。 - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

HTMLとCSSとJavaScriptを使ってタイピングゲームを作ってみる。

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

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

スポンサーリンク

概要

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

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

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

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

文字を右から左に流す

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

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


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

モバイルバージョンを終了