マインスイーパー制作記

今回はマインスイーパーの開発について書いていきます(‘ω’)ノ

定番ゲームが必要

まずマインスイーパーを作ることにした理由としては「定番ゲームはアクセス数が期待できる」ってことと「長時間遊んでもらえる」という2つのことからです。

他のブラウザで遊べるミニゲームサイトをいろいろ見てみるとまず間違いなく定番ゲームがあります。ソリティアやマッチ３、さめがめ、ナンプレなどは確実にあります。

このサイトを始めた当初はそういうゲームを作らないつもりでしたがある程度のアクセス数と滞在時間が期待できるなら定番ゲームも作るべきだということに考えが変わりました。

もちろん定番ゲームを作ったら突然アクセスが増えるなんてわけはないですが、期待値が少しでも上がるならやらない手は無いわけです。

とりあえず作り始める

毎回ゲームを作るときは何となくで作り始めます。何となく「こんな感じでできるんじゃないか？」っていうのを淡々とやっていきます。

で、とりあえず二次元配列を作りそこにpixi.jsのGraphicsで色違いの四角を2つ作り交互にならべてマスを作って盤を作りました。

そこにランダムで爆弾を配置します。

で、各マスの周りに爆弾が何個あるか数えさせてその数を盤に表示させます。

するとこんな感じにできました。

次はマインスイーパー作ってみるのだ
爆弾の配置して数字のカウントまでできた pic.twitter.com/6YFiqItCwO

— いんわん＠心が自分探しの旅に出ています (@inwan78) April 12, 2020

上にタイルをかぶせる＆開ける処理

次は上に蓋するタイルを置きます。

でそのタイルをタッチするとタイルが消えるわけですが、その場所に爆弾または数字ともに入っていなければさらに周りのタイルも開ける処理が必要になります。

これは再帰関数？ってやつでできます。自分の中で自分を呼び出す関数です。

自分の場所が何もなければ上下左右一つずらして同じことをするわけです。ただ、これをそのまま書くとダブって見るところが多く処理が重すぎて止まります(;^ω^)

見たところは飛ばすようにしてあげるとOKでした。

おーっそれっぽい！ pic.twitter.com/ZiVSPoN7rC

— いんわん＠心が自分探しの旅に出ています (@inwan78) April 12, 2020

ここからが面倒だった

ここまでは想像通りだったのでわりろすんなり進んだんですがここからが面倒くさくて(-_-;)

特にスマホへの対応はマジで面倒で辛かったです。。

基本的にマインスイーパーはマウス操作向けなのでスマホには向いてなかったですね。タッチでは右クリックが使えないし、上級だとマスが小さすぎてやりずらいし。。

スマホ用にボタンをいくつか用意することで解決したんですが、pixi.jsは複数タッチの際はタッチ位置の取得の仕方が違ってくるので複数タッチはトラブルの素で非常にイライラしました(-_-;)結局今回は複数タッチを使えるようにするのは面倒だったので複数タッチ時は処理しないようにしました。

そのほかにも試遊してみるとちょこちょこおかしいところが見つかって対処するのに結構な時間がかかりました。

作ってみての感想

正直PC専用だったら1日でできてたんですよね。

スマホに向いているかや、スマホならどうやってやるかってのをまず先にちゃんと考えてから取り組むべきでした(;^ω^)

とはいえ、まぁそれなりにできたのでOKです。

あと、やっぱりマインスイーパーはいいゲームですね。自分で作ったものでもずっと遊んでいられます(´∀｀)