カードシャッフルゲームを作ろう【前編】

JavaScriptという言語は初心者向けということで有名です。

しかし、Webで検索した際に上位に出てくるようなサイトは入門編のものが多く、それ以降の勉強で路頭に迷っている方もいると思います。

私はブラウザゲームという気軽に遊べるようなものが好きなので、今回は私の作品を解説したいと思います。

目次

  • はじめに
  • 制作物の紹介
  • 仕様を確認する
  • レイアウトを決める
  • カードを回転させる機構を作る
  • おわりに(後編に続きます)

はじめに

HTML/CSS/JavaScriptを用いて、カードシャッフルゲームを作成します。

  • HTML/CSS/JavaScriptの基礎文法を理解している方
  • 数学I・Aの内容を履修済みの方

を対象としています。本ブログではそれらも丁寧に解説していく予定ですので、あまりそれらに自信がない方であっても一読してみることをオススメします。

制作物の紹介

ミニゲームなどでよく見られる、正解の絵柄のカードを目で追うというゲームです。以下のリンクからページに飛べます。

card shuffle

仕様の確認

多くの教材でこの項はないがしろにされがちですが、軽くフローチャートを作成することをオススメします。

全体の見通しがよくなったり、後々間違いに気づくようなことも少なくなると思います。

  1. スタートボタンを押す。
  2. 全てのカードの絵柄を見せる。
  3. カードをシャッフルする。
  4. プレイヤーがカードをクリックする。
  5. 正誤判定をする。

という流れを繰り返します。

また、難易度を選択出来るようにすると面白いと思うので実装していきます。

(ここで「変数の値を変えるだけなのであまり大変ではなさそうだな」と予想します。)

レイアウトを決める

今回はこのようなデザインにしました。

上側にゲーム画面、下側に難易度選択とスタートボタンを配置しています。

設計図をもとにHTML/CSSを記述します。

カードは絶対位置(=position)を用いて配置しますが、外枠の中心を基準とすることで、分かりやすく数値を決めることができると思います。

また要素の開始位置が右上になることに注意して、translateの値に適時カードの幅の半分の長さ分を足したり引ひたりします。HTML/CSSは都度都度サイトに反映させて修正することが可能なので、全て厳密にする必要はないと思っています。

カードを回転させる機構を作る

カードの構造は上図のようになっています。

複雑な動きをする予定なので、各パーツに分けて作成しています。

また親子関係は以下のようになっています。

┗ card
 ┗ line
 ┗ white
ただ単にrotateでカードを回転させるだけでは、上手く表⇔裏の対応付けが実装できないので、z-indexも組み合わせてカードの回転を実装していきます。

カードが回転すると、cardがY軸に対して回転します。

90度回転したとき、画面に表示する面を切り替えるため、裏面(white)のz-indexを上げます。

keyframeでちょうどいいタイミングになるように調整します。

また、裏面から表面へ回転する時は逆の操作をします。

カードをめくった後に一時停止させたいので、それぞれクラスの付け外しで実装します。

cardに対する.open / .close、whiteに対する.increase / .decreaseの4つのクラスについて考えます。

裏面のときカードをクリックすると、cardに.openだけ、whiteに.increaseだけを付与します。

逆にカードが表面の時にクリックすると、cardに.closeだけ、whiteに.decreaseだけを付与します。

おわりに(後編に続きます)


これにて前編は終了となります。お疲れさまでした。

今回はHTML/CSSがメインでしたが、次回からは今回の肝であるシャッフルの機構へ入っていきます。

私もまだまだ勉強中の者ですが、今回は私の勉強成果を共有したいと思い執筆させていただきました。

私の記事が皆様の勉強の助けになるのならば幸いです。

もしかしたら、私の書いたものよりも綺麗なアプローチや実装方法があるかもしれません。

ですので、ぜびご自身でも考えてみてください。

ここまで読んでくれてありがとうございました。