updated at: 2022/11/12 ▶︎ レシポンシブ 追加
Save the Panda! https://guolam.sakura.ne.jp/savepanda/coverpage
-
じゃんけんの延長線で、パンダを森から救出ゲームです。
-
選択肢は２つしかありません。 １、「進む」
２、「食べる」 -
進むはHP+1 / HP-1で
-
食べるは HP +2 /HP +1 /HP -2 /HP -5
という設定です。
パンダの基礎HPは５です。 -
完全なる運ゲーですので、ゲームの後には登山初級者に必要な道具リストを添付してます（１ボタンで印刷可能）
- こだわり：
１ページ目
１、ちゃんとルール説明する
２、ボタンの下にパンダ3匹が仲良く歩いていく姿がJSで作りました。とにかく可愛いです！
３、ボタンをhoverすると大きくなるので、クリック感を作ってます。
４、パンダの回るアイコンが雰囲気を出しています。
- ２ページ目（ゲームページ）
１、「進む」、「食べる」をクリックすると、加点と減点によって、効果音が違います。音で伝わるようにしています。
２、終了画面を別ページで作る予定ですが、音楽自動再生できないので、ページを最初から隠すことによって、
新しいページとみなさないため、終了画面が効果音が自動再生できました。そこが結構ポイントです。
３、パンダの画像を選択は完全に個人の好みです！可愛いだけではなく、面白いパンダ画像とGIFを厳選しました！
４、残り３ポイントの時に、赤にして、ピンチ感を出しています！
５、動画はこのまま入れて、自動再生にしました！音無ですが、効果音で演出にこだわりました！
- 3ページ目(教育画面)
1、ゲームの着地点を考えるときに、運ゲーなので、もしパンダの運命のように運に任せたくなければ、山や森へいく前に、 準備しましょうね！という教育を入れてみました！ジョークに見えますが、実はすごく大切なことです。
２、チェックリストの後に、印刷ボタンを入れました。理由は、登山の時に、
電池が不安定なので、なるべく紙にして持っていってね、という思いを込めて作りました。
１ボタンでできると、印刷してくれる方も多くなるかな
３、前の山ページに繋ぐ。
4、前に戻る画面は同じブラウザで行い、山診断は別ブラウザへ移行するように設定しました。
- 画像を入れることがすごく大変でした。最初に4日ほど考えてたですが、そこわかってから一気に進みました。
- 点数のカウント方法がわからなくて、そこわかった瞬間、色々展開できるようになりました！
- ゲームの着地点が見つからず、悩んでました。 - 完成までそんなに時間をかけてなかったが、ブラッシュアップするのに、小さいことで結構時間をかかりました。