作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。
概要
サイモンゲームのような光と音が同時にするブロックを記憶していくゲームを作成してみました。GAMESTARTボタンを押すとゲームが開始され、コンピュータがランダムに選んだブロックが光と同時に音が鳴ります。プレイヤーはコンピュータが選んだブロックを選択し、正解だと次のターンに移ります。1ターンごとに記憶するブロックが一つずつ追加されていきます。コンピュータが選んだ順にブロックが選択できないとゲームオーバーとなります。
ブロックを光らす
ブロックはCSSを使用してデザインしました。box-shadowプロパティを使用して光がぼやけたように見えるようにしています。明るさはopacityプロパティを使用してライトのオンとオフを表現してみました。:active疑似クラスを使用してプレイヤーがブロックをクリックやタップするとopacityの透明度を無くし光ったように見せています。↓はクリックすると光る例です。
See the Pen Untitled by bubudoufu (@bubudoufu) on CodePen.
コンピュータ側の時はJavaScriptのsetTimeoutメソッドを使用してライトのオンオフの時間調整をしています。↓は例です。
See the Pen Untitled by bubudoufu (@bubudoufu) on CodePen.
音を鳴らす
音声はJavaScriptのAudioオブジェクトを利用して再生しています。↓はブロックをクリックすると音がする例です。
See the Pen Untitled by bubudoufu (@bubudoufu) on CodePen.
正解判定
コンピュータがランダムに選んだブロックを配列に追加していき、その配列を元に正解判定を行っています。
作成したプログラムのコード全体はgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。
最後までお読みいただきありがとうございました。