いきさつ

先日、青森県のりんごを題材にしたぷよぷよが話題になりました。青りんごも追加されてパワーアップしているようです。

自分の周りでも、種類が多くてごちゃごちゃするものがあったような...?
と考えて、思い出したのが、魚の漢字です。

ぷよの画像のところにそのまま文字を置いたら面白いんじゃないか、と思ってやってみました

やったこと

Monaca を使った方法を紹介します。

上記のぷよぷよプログラミングのページを開き、まずは Monaca に登録（メールアドレスとかだけなので簡単です）
セガ様が公開しているプロジェクトをインポートするため、基礎コースを選択 (コースはなんでもいいのですが、私はプログラミングを学ぶことが目的ではなかったので最小のもの）　
リンクが貼ってあるガイド小冊子の PDF を開き、言われるがままに実装を追加（基礎コースであれば4行）
index.html 26行目付近で下記の修正を行う

index.html

         <div id="score" style="margin: 0 auto; overflow: hidden; text-align: right;"></div>
         <div style="display:none">
-            <img src="img/puyo_1.png" id="puyo_1">
-            <img src="img/puyo_2.png" id="puyo_2">
-            <img src="img/puyo_3.png" id="puyo_3">
-            <img src="img/puyo_4.png" id="puyo_4">
-            <img src="img/puyo_5.png" id="puyo_5">
+            <a id="puyo_1" style='width: 52px; height: 52px; font-size: 44px; padding: 0px 4px; margin-top: -7px;'>鯖</a>
+            <a id="puyo_2" style='width: 52px; height: 52px; font-size: 44px; padding: 0px 4px; margin-top: -7px;'>鯛</a>
+            <a id="puyo_3" style='width: 52px; height: 52px; font-size: 44px; padding: 0px 4px; margin-top: -7px;'>鮪</a>
+            <a id="puyo_4" style='width: 52px; height: 52px; font-size: 44px; padding: 0px 4px; margin-top: -7px;'>鮭</a>
+            <a id="puyo_5" style='width: 52px; height: 52px; font-size: 44px; padding: 0px 4px; margin-top: -7px;'>鰤</a>
             <img src="img/batankyu.png" id="batankyu">
             <img src="img/zenkeshi.png" id="zenkeshi">

30分ほどで完成！！
CSS の調整に少々時間を使ったので、上記を参照すればもっと簡単にできると思います。

なお、デフォルトでは「ぷよ」は4種類なので、上記例で鰤を出現させるためには config.js の　 Config.puyoColors を5にする必要があります

ここまでで、画像の代わりに文字を使う方法が確立されています。

よく考えると魚じゃなくてもいいので、魑魅魍魎ぷよぷよも作ってみました

ウミトロンでは一緒に働く仲間を募集しております。