勉強きっかけゲームを制作【クリックするだけのシンプルなものです】

こんにちは!イドです。シンプルなゲームを制作したのでツイートをしました。

プログラミングで簡単なゲームを作ってみた!

ボタンをクリックすると、人物の持っている数字が変わったり、出てくるセリフが変わったりします。伝記が好きだったので、歴史上の人物を題材にしてます。

PHP・jQuery・CSSアニメーションなど使用。

私は、学習塾の責任者として小学生から高校生までを7〜8年ほど指導していました。その経験から、登場人物のストーリーや名言を話してあげると、勉強に興味を持ってもらいやすいと感じています。

勉強のきっかけになれたらうれしいなあという気持ちで、簡単なゲームを作ってみました。

サービス「偉人伝」のURLと、コード(Github)

歴史上の人物を元に制作しました。シンプルなゲームですが、見ていただけたら幸いです。

当記事では、以下7点について書いています。

  • ゲーム概要:偉人の集中力を削って、学び倒すゲームです
  • ゲームを作った理由:勉強のきっかけにしてもらえたらな
  • 使用技術
  • ゲームの作成にどのように取り組んだか:PHPでベースを作り、jQuery・CSSで見やすさを意識
  • 工夫したところ・難しかったところ:PHPコードの役割分担とUI
  • やってみて感じたこと、得られたこと:やはり、使いやすいように考えながら作るのは重要だなと
  • 今後の課題として取り組んでいきたいこと:ユーザー体験について考えつつ、開発していきたい

ゲーム概要:偉人の集中力を削って、学び倒すゲームです

ゲーム概要について、3点紹介します。

  • スタート
  • ボタンを押すとランダムで集中力が減る
  • 偉人の集中力が尽きると、次の偉人が出現。プレーヤーの集中力が尽きると終了

では、それぞれ見ていきます。

スタート

ゲームスタート・偉人に挑む!集中力が底を尽きたら負け。

ボタンを押すと、ランダムで集中力が減ります。逃げると次の偉人

ボタンを押すと、ランダムで数字が減っていきます。

偉人の数字も、学ぶ者の数字も両方減る。そして、偉人を倒すか、逃げると次の偉人が出現します。

プレーヤーの集中力が尽きたら終了。

偉人の集中力が尽きれば、次の偉人が出現。

プレイヤーの集中力が尽きたら終了。倒した偉人の数が表示されます。

ゲームを作った理由:勉強のきっかけしてもらえたらな

歴史など人物を覚えないといけない勉強は、生徒にその人物のストーリーや名言を教えてあげると興味を持ってもらえることが多いです。

その人物がどんな人で、どんな言葉を残しているのか。

その人の気持ちを想像することで、理解が深まります。これは、人ではないモノでも擬人化して教えてあげると理解が深まるのと同じ。

ニュースで、有名人や芸能人の言動が世間の注目を集めるのも似たようなことです。

私自身も歴史上の人物を身近に感じたり、その人の物語から知識を得たりすることで、勉強するきっかけを得られました。

少しでも理解が深まるきっかけになったら良いなと思い、ゲーム作りに取り組みました。

使用技術

以下、6点

  • PHP(オブジェクト指向・クラス・インターフェイスなど)
  • jQuery
  • CSS設計BEM・アニメーションCSS
  • メディアクエリにて、レスポンシブ対応
  • バージョン管理(Sourcetree・Git)
  • VPS(LAMP環境・鍵認証・SSH・Let’s Encryptなど)

PHP(オブジェクト指向・クラス・インターフェイスなど)

アクセス修飾子・クラス定数・抽象クラス・静的メンバ・インターフェイスなどの、オブジェクト指向メイン

jQuery

ゲームの履歴が見やすいように、animate関数にて最新履歴を自動で表示

CSS設計BEM・アニメーションCSS

コードの読みやすさを考えつつ、CSS設計はBEMを意識して記述。また、アニメーションCSSで立体的に。

メディアクエリにて、レスポンシブ対応

ブレークポイント:〜767px、768px〜1024px、PC

バージョン管理(Sourcetree・Git)

Sourcetreeにて、Git使用。commitし、Githubにpush

VPS(LAMP環境・鍵認証・SSH・Let’s Encryptなど)

さくらVPSに、LAMP環境構築。鍵認証・SSHの設定・Let’s Encrypt導入など。また、SiteGuard Server Editionにてセキュリティ対策。

WordPressにてブログを作り、サブドメインでデプロイ。

ゲームの作成に、どのように取り組んだか:PHPでベースを作り、jQuery・CSSで見やすさを意識

PHPでそれぞれのクラス定数・抽象クラス・学ぶ者クラス・偉人クラス・インスタンスを作って、POST送信からの流れを記述。役割分担をさせました。

また、ゲームスタート・ゲーム中と、ゲーム終了への画面遷移が行われるようにファイルを分けます。ゲームのスタートと終了が分かりやすいように。

ゲームの履歴を読みやすいように、最新の履歴が一番下に表示されるようにjQueryにて作成。

CSSはリセットCSSを入れ全体を整え、BEMを意識して記述。また、アニメーションCSSも入れ、立体的な見た目を意識しました。

工夫したところ、難しかったところ:PHPコードの役割分担とCSSの見た目

工夫したところ、難しかったところなど4点紹介します。

  • PHP:抽象クラス・静的メンバなどの役割分担が難しかった
  • jQuery:ゲームの履歴を自動最新更新。ユーザーが見やすく
  • BEMを意識:要素・子要素・状態にて命名
  • CSS:メタリック・アニメーション・吹き出し。UIの工夫

では、それぞれ見ていきます。

PHP:抽象クラス・静的メンバなどの役割分担が難しかった

この役割分担を理解して、扱えるようになるのに苦労しました・・。

まず、抽象クラスです。プレイヤー(学ぶ者)クラスと偉人クラスの抽象クラスとしてHumanクラスを作っています。

このクラスをextendしてプレイヤー(学ぶ者)クラスと偉人クラスに継承しています。

さらに下記コードで、偉人クラスから継承し、本気を出した偉人クラス(アルキメデスと、ラッシュモアのみランダムで1.5倍集中力を奪うことができる)を作成

「本気を出した」ので、seriousStudy(通常の1.5倍集中力を奪うことができる)ができるようになっています。

function __construct()にて、初期値を設定し、親クラスで設定していないプロパティを設定。

また、parent::__construct()にて、親のコンストラクタを呼んでいます

(なお、if(!mt_rand(0,4))は、mt_randで最小0から最大4のうち1つの数字をランダムで生成し、「!」とすることでその5分の1の確率で生成された数が「0」であればfalse判定となり、中の処理を行います。

1〜4であればtrueなので、else以下の処理へ行きますね。

これで、5分の1の確率という確率の計算ができることになります。

つまり数字そのままのint型では無く、true,falseで判定のできるboolean型のように扱えることになります。)

また下記コードでは、ゲームの履歴を管理するクラス内に、静的メンバを生成(事前にInterfaceにて抽象メソッドを宣言し、implementにて実装)。

静的メンバを生成したクラスによって、インスタンス化せずにメンバ(今回はメソッド)を使うことができます。

履歴管理クラスは、人クラスや学ぶ者クラスなど至る所で密結合しています。

そのため、インターフェイスによってそのメソッドがあることを強制し、メソッドの書き忘れなどのエラーがあった場合に見つけやすくしています。

jQuery:ゲームの履歴を自動最新更新。ユーザーが見やすく

ゲームの履歴をjQueryにて見やすく。最新履歴を一番下に表示するようにしています。

まず、JavaScript関連はHTML生成後に読み込みたいので、footer配下に配置。それからjQueryを読み込んで、コードを記述。

そして、$(.js-auto-scroll)にてjQueryオブジェクトを取得して、$(.js-auto-scroll)[0]ではjQueryオブジェクトを配列で取得し、[0]にて配列の0番目の要素を取得します。

.scrollHeightによって、スクロール分を含めた全体の高さを取得。

その取得した高さをscrollTop: でscrollTopプロパティにセットすることで、animate()関数によりスクロール位置を一番下に移動させて表示しています。

BEMを意識:要素・子要素・状態にて命名

もととなる要素(Block)とBlock内にある子要素と、変化した状態を表す要素に分けてclassを作成しています。

たとえば上記コードでは、class=studentview“の子要素にclass=studentview__info“として、その中にclass=”studentview__info–concentration“を書いています。

CSS:メタリック・アニメーション・吹き出し。UIの工夫

ボタンをクリックするアニメーションとメタリックな印象にし、立体感を出しました。

まず、メタリックとborder-bottom。立体的なボタンを表現しています。

上記コードで、background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);として、連続的な直線の変化から構成されるグラデーションを作ります。

また、border-bottom: 4px solid #DAA520;で、ボタンが上がっている状態を表現し、text-shadow: 1px 1px 1px rgba(255,255,255,0.8);にて、文字が光っている雰囲気に。

次に、hover時。

linear-gradient()の色をズラすことで、hoverした時にメタリックの色が変わります

そして、クリックしactiveにすると、ボタン押下のアニメーション。

Y軸にズラし、border-bottomを消します。

あとは、吹き出しを表現しています。擬似要素を作り、::beforeで白三角を::afterで黒三角を作って重ねています。

上記は、::beforeのCSS。borderとborder-rightを重ねつつtransparentで透過し、三角の吹き出しに。

やってみて感じたこと、得られたこと:やはり、使いやすいように考えながら作るのは重要だなと

UIをリッチにしていきたかったんですが、CSSボタンjQueryでの履歴表示など細かな修正が大変でした。

また、PHPの各クラスの役割を理解していくのもむずかしかったです。エラーと戦いまくりでしたしね ^ ^;

ゲームを使う人にとっても、プログラムを保守する人にとっても使い勝手の良いものにしたいと考えながら勉強するのが重要だなと感じています

今後の課題として取り組んでいきたいこと:ユーザー体験について考えつつ、開発していきたい

ユーザーの体験を豊かなものにするには、ゲーム内の掲示板で書き込みして交流できるようにしたり、動画埋め込みがあったりするなどのユーザー体験を考えた方がいいかもしれないです。

また、自分なりにCSSでの見た目を意識したので、今後も勉強を続けつつ取り組んでいきたいと思っています。

オブジェクト指向についても学べたので、フレームワークでの開発においても生かし、保守性・可読性を意識して作っていきたい

最後に、ユーザーの記憶に残りやすいよう、キャラ立ちを意識して偉人のセリフを作りました。

その副作用で、ピタゴラスがキャラ立ち過ぎて浮きすぎな気もします 笑

以上となります。最後まで読んでいただきありがとうございます。