サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

JavaScriptを使って短期記憶ゲームを作ってみる。

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


ソースコードはgithubにあります
その他、作成したアプリやゲームの一覧はこちらにあります 。

スポンサーリンク

概要

ゲームが開始されると数字が1秒間表示されます。数字が消えたら1から順にクリックしてください。1問クリアするごとに数字が増えていきます7個以上クリアできれば短期記憶は良いといえます。ClickStartボタンを押すとゲームが開始されます。

ゲーム画面生成

DOMを使用して要素の作成と追加をしています。数字を表示するtdタグに0から順にidを振り、配列にもidの番号を追加していきます。

問題作成

td要素のid番号が入った配列をシャッフルして、配列の先頭から表示したい数だけ抜き取ることで問題としています。

数字を表示・数字を隠す

シャッフルされた配列の先頭から数字を表示したい分だけ抜き出し、index番号に+1した数字をtd要素のtextContentプロパティにセットし、表示しています。

数字の色を白から背景色と同じ赤色にして数字が消えたように見せています。

答え合わせ

クリックされたtd要素のtextContentプロパティとクリックした数をカウントしているclickCount変数の値を比較して、同じなら正解としています。

最後までお読みいただきありがとうございました。
ソースコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります 。

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