JavaScriptで さめがめ 作ってみたPart1
おはようございます😊まおです🌸
大変遅くなりましたが、さめがめのゲームロジックがなんとか完成しました😳👏
時間かかりました～😭✨
もはや最近もう放置してた...ｗ
SameGame
https://tonamao.github.io/SameGame/
SameGameって？ 通称「さめがめ」。昔からあるパズルゲームですね！
さめがめは、コンピュータゲームの一種である。 名前の由来は、ゲームタイトル「SAME GAME(セイムゲーム)」のローマ字読みによるもの。（さめがめ#歴史）
私個人としては、昔から知っていて、Yahoo!ゲームに「ブロキシー」って名前であったのでよくやってました！ ルールとしては、同じ色が隣り合う２つ以上のブロックを消していき、 なるべく多くのブロックを消すというものです🎮 消されたブロックのところは、下へ、左へ、詰められていきます。
工夫した仕様はこんな感じ
1Clickでチェック、2Clickで消す SameGameって消したブロックが一瞬で落ちてきて、左に詰められるので、 1Clickでブロックが消えちゃうと、 何が起こったかわかりにくいと思うんですよね。 押し間違えたとかもあると思うしね～。 なので、1Clickめは削除対象のブロックがチェックされるようにしました。 Safariでタップした時のグレーになるのを阻止！ Safariでタップすると、一瞬グレーっぽくなります。 今回1回ブロックを消すのに2Clickするのを考えると かなりタップ回数が増えるので、画面が点滅して見えます。 今回も検索スキㇽ()を発揮して 「click」「イベント」「スマホ」「画面光る」で検索して、 下記のサイトにたどり着き、参考にさせていただきました💁♀️笑 [CSS] iPhoneのSafariでタップした際に表示される暗めな影を消すCSS - YoheiM .NET 要は、CSSで以下追加するだけです。
-webkit-tap-highlight-color:rgba(0,0,0,0);
説明の都合で後ろから見ていきます。ｗ rgba(0,0,0,0) 言わずと知れた、color指定方法ですね！ 最初の３つ：0~255で指定。 黒色 となります。255,255,255なら 白色 になります。 最後の１つ：0～1.0で指定。 透明度 を表し、「0」なので透明となります。 tap-highlight-color これはもう名前の通り！タップした時のハイライトカラーを決めます。笑 -webkit- これは ベンダープレフィックス と呼ばれるもの。 ChromeとかSafariとかFirefoxとか各社のデザインに対応したCSSを書く場合につける接頭辞です。
各社用につけるってあたりで想像できると思いますが、 これに頼って作りこみすぎると、手に負えない修正量になっていきそうなので要注意ですね...😅 今回はいったんスマホ操作時の点滅が気になっただけなので、これで進めました。
余談
まず、「上下左右にある色が同じブロックを探す」処理につまずきました。ｗ
次に、「ブロックが重力の原理で下に落ちる」という処理でつまずきました。ｗｗ
最後に、「ブロックが１列全部消えたら、左に詰める」という処理であきらめ始めました。ｗｗｗ
まあ結局は、仕様を超具体的に落とし込めれば実装できるはずなんですけどね！
なかなか考えが追い付かずって感じでした～...
今後このSameGameを改良していこうかなと思います🙋♀️
そういうわけでの Part1 です！
まあ「作ってみた」でいうと、Part1しかありえないけどねｗ
