ぷよぷよプログラミングという学習教材が話題になっているらしく、ニュースで見て気になったので試しにやってみました。
詳細は下記のリンクからご覧ください。
学校などでプログラミングを教える為の教材であり、基礎、初級、中級、上級に分かれてそれぞれ学習を行えるようになっていました。
今回はぷよぷよがどのように動いているか知りたかったので、ソースだけ引っ張ってきて勝手に改造して遊んでいました。(実際にはmonacaという統合開発環境を利用するようです)
ちなみに私が作ったぷよぷよはこんな感じです↓
gitにあげてソース管理しているので、ソースが知りたい方はこちらを参考にしてください。
気になった点
元のソースコードではぷよぷよが左回転でしか操作できない点が気になりました。
本家のぷよぷよも何度かやったことはありますが、私は右回転をよく利用していたので左回転のみでは違和感がありました。また、対戦機能などがあるわけではないのでこだわる必要はなかったですが、ガチ勢は右回転と左回転を使い分けていそうなので、両方の回転が利用できるよう修正しました。
ロジック部分をがっつり読むことになりそこそこ時間がかかりました。
修正中に思ったことが、スマホ版の時にどのように操作してもらうのがユーザーに受け入れられるか？という点です。
- 上フリック:左回転
- 下フリック:右回転
- 右フリック:右移動
- 左フリック:左移動
- 長押し:ぷよぷよの落下速度を上げる
というボタン操作にしてみましたが、直感的には下フリックでぷよぷよの落下速度を上げたほうがわかりやすいのかなとも思いました。
しかし、それをすると右回転と左回転のボタンの対称性が失われてしまい
- 上フリック:左回転
- 下フリック:ぷよぷよの落下速度を上げる
- 長押し:右回転
というこれまたわかりずらい操作になってしまうなぁと色々考えていました。
PCであれば利用するキーを適当に増やせばよいのですが、スマホではできる操作が限られている為
そのあたりも考慮しなければならない点が難しいと感じました。
アプリ開発者の方は日頃からその辺りのことも考慮して開発されているんですよね。凄い。。
修正点色々
ボタンの割り振りや追加以外にも、テストしてみて以下の点が気になったので修正しました。
- スマホで下フリックしすぎるとアンドロイドではページ更新されるので無効化
- ぷよぷよがたまっている時などにスマホで長押しすると、ぷよぷよの画像詳細プロパティがポップアップされるので非表示化
- ゲーム開始時に操作の説明がなかったので、簡単な操作ダイアログを表示するよう実装
- 右回転を取り入れた結果、壁や下のぷよぷよにめり込むことがあったので対応
サイトを公開させた手順
それなりに手間をかけて修正したので、せっかくならサイト上で公開したいと考えました。
しかし、本サイトはWordPressを利用しており、作成したソース（HTML、CSS、JS）をどうやってみられるようにするのがスマートか考えました。
結果『Netlify』という静的サイトをホスティングすることができるWebサービスを発見しました。
こちらのサービスであればgit hubからソースを読み込み、ページを表示させることができます。
WP側ではURL使って表示させればよいだけなので非常に助かりました。
初期のドメインではnetlify.app…. というドメインになってしまっていたので、サブドメインも取得して設定しなおしました。この辺りの設定が簡単にできるのも魅力的でした。
まとめ
休日を1日犠牲にしましたが、何かを完成させるのは喜びが大きいですね。
実際に作ってみなければわからないことも学べますし、今まで知らなかった新しいサービスが見つけられたりするのも楽しいです。
Jsのロジックをがっつり読むのも久しぶりだったので、多少は感覚が戻った気がします。
JsはTypescriptなど需要が高まっているやつもボチボチ触ってみたいです。あとReactとかも。
