ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

プログラミング学習環境「Monaca Education」で話題のぷよぷよプログラミングにランキング機能をつけよう!【後編】

f:id:mbaasdevrel:20200818150620p:plain

プログラミング学習環境である「Monaca Education」でぷよぷよをプログラミングできる「ぷよぷよプログラミング」が話題になっています。プログラミングを学ぶ上での基本である写経を徹底するスタイルで、かなりストイックなチャレンジとなっています。

そんなぷよぷよプログラミングで作り上げた作品に、NCMBを使って得点記録(ランキング)機能を追加してみたいと思います。なお、この記事にあたってMonaca(アシアル社)とSEGA社の許可をいただいています。

Monaca Educationは教育関係者でない方でも登録してもいいとのことです。ぜひ皆さんもぷよぷよプログラミングにチャレンジしてみてはいかがでしょうか。

前回の記事ではランキングの保存機能と、順位の取得を行いました。今回は順位だけでなく上位の結果を取得してみます。

ベースについて

ベースになるプログラムは「ぷよぷよプログラミング」サポートページ | Monaca Educationを実装し終えたプロジェクトになります。

また、前回の順位保存機能は実装されていることとします。

jQueryの追加

最近ではあまり使われなくなっていますが、画面操作を行う際に便利なのでを追加します。このライブラリはMonaca IDEのJS/CSSコンポーネントの追加と削除で登録できます。

なお、追加する際には components/Jquery/dist/jquery.min.js だけを選択してください。

f:id:mbaasdevrel:20200818150116p:plain

ランキング表示用ボタンの追加

ランキングを表示するためのボタンはゲームオーバーになった時点で表示します。例えば下のような画像です。

f:id:mbaasdevrel:20200902150610p:plain

このボタンは www/img フォルダの中に ranking.png としてアップロードします。

HTMLの修正

ランキングを表示するモーダルウィンドウのHTMLを追加します。 www/index.html を開いて、</body> の上辺りに次のHTMLを追加します。

<section id="modalArea" class="modalArea">
    <div id="modalBg" class="modalBg"></div>
    <div class="modalWrapper">
        <div class="modalContents">
            <h1>ランキングトップ10!</h1>
            <p>
                <ul id="ranking">
                </ul>
            </p>
        </div>
        <div id="closeModal" class="closeModal">
        ×
        </div>
    </div>
</section>

さらにランキングボタンを追加します。これは <body style="margin:0;"> の下に追加してください。

<div id="showRanking">
  <img src="img/ranking.png" />
</div>

CSSの追加

次に www/css/style.css を開いて、次のスタイルシートを追加します。これはランキングをモーダルウィンドウで表示するための記述になります。

#showRanking {
  display: none;
  position: absolute;
  z-index: 1;
  padding: 1em;
  text-align: center;
  bottom: 30px;
}

#showRanking img {
  width: 70%;
}

.modalArea {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
}
.modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 70%;
    max-width: 500px;
    padding: 10px 30px;
    background-color: #fff;
}
.closeModal {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
}
#ranking {
    list-style-type: decimal;
}

ランキングボタンを表示する

ではゲームオーバーになったタイミングでランキングボタンを表示します。これは前回データを保存したタイミングと同じでいいでしょう。 www/src/game.js を開いて、下記の記述を探して更新してください。

修正前

case 'gameOver':
    // ばたんきゅーの準備をする
    PuyoImage.prepareBatankyu(frame);
    mode = 'batankyu';

修正後

case 'gameOver':
    // ばたんきゅーの準備をする
    PuyoImage.prepareBatankyu(frame);
    mode = 'batankyu';
    $('#showRanking').show(); // ← 追加

これでランキングボタンが表示されるはずです。

f:id:mbaasdevrel:20200902150653p:plain

ランキングボタンを押した時の処理を作る

次にこのボタンを押した際のイベントを作ります。これは www/src/game.js の一番上の方にある window.addEventListener("load") イベントの中に作ります。

以下が元の表示です。 // ここに記述していきます の下に書いていきます。

window.addEventListener("load", () => {
    // まずステージを整える
    initialize();
    // ゲームを開始する
    loop();

    // ここに記述していきます
});

ランキングボタンを押した際のイベントを追加

ランキングボタンをクリックした際のイベントは次のように記述できます。

$('#showRanking').on('click', async () => {
  // ここに処理を記述する
});

次にランキングデータをNCMBから取得します。データ保存時と同じく、Rankingクラスからデータを取得します。この際、score順にデータを並べ替えて、最初の10件を取得しています。

const Ranking = ncmb.DataStore('Ranking');
const rankings = await Ranking
  .order('score', true)
  .limit(10)
  .fetchAll();

後は結果をHTMLの中に描画します。最後にモーダルを表示します。fadeInはふわっと浮かび上がるように表示される処理で、を使っています。

// HTMLに描画
$('#ranking').html(rankings.map(r => {
    return `<li>${r.get('score')}点 ${r.get('playerName')}さん</li>`;
}).join("\n"));
// モーダルを表示
$('#modalArea').fadeIn();

f:id:mbaasdevrel:20200818150950p:plain

モーダルを閉じる処理を追加

表示したモーダルを閉じる処理を追加します。fadeOutはfadeInの逆で、滑らかに消える指定になります。

$('#closeModal, #modalBg').on('click', () => {
    $('#modalArea').fadeOut();
});

window.addEventListener("load")の内容

最終的に window.addEventListener("load") の内容は次のようになります。

// 起動されたときに呼ばれる関数を登録する
window.addEventListener("load", () => {
    // まずステージを整える
    initialize();

    // ゲームを開始する
    loop();

    $('#showRanking').on('click', async () => {
        const Ranking = ncmb.DataStore('Ranking');
        const rankings = await Ranking
          .order('score', true)
          .limit(10)
          .fetchAll();
        $('#ranking').html(rankings.map(r => {
            return `<li>${r.get('score')}点 ${r.get('playerName')}さん</li>`;
        }).join("\n"));
        $('#modalArea').fadeIn();
    });
    $('#closeModal, #modalBg').on('click', () => {
        $('#modalArea').fadeOut();
    });
});

試してみる

では実際に試してみましょう。ゲームオーバーになると、ランキングボタンが表示されるようになります。

f:id:mbaasdevrel:20200902150724p:plain

そしてこのボタンをクリック(タップ)し、順位を並べたモーダルウィンドウが表示されれば完了です。

f:id:mbaasdevrel:20200818150950p:plain

まとめ

今回の実装でゲームへ簡単にランキング機能が組み込めるのが分かってもらえたかと思います。ゲームは一人で遊ぶのもいいですが、他のユーザと競い合うのも面白いものです。皆さんが作るゲームにもぜひニフクラ mobile backendでランキング機能を追加してください。

ニフクラ mobile backendについて深く学びたい方は、以下の入門参考書「Monacaとニフクラ mobile backendで学ぶ はじめてのプログラミング」もぜひご活用ください!

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。