書籍「Monacaで学ぶはじめてのプログラミング ~モバイルアプリ入門編〜 」の付録でサンプルとして取り上げられている、宝当てゲームを紹介します。

サンプルプロジェクト

書籍のサポートページで無料公開中

宝当てゲームアプリの概要

3 つの宝箱の中に一つだけ当たりの箱があり、ユーザーが選んだ宝箱が当たりかはずれかを判定するゲームアプリを作ります。このアプリを題材として、画面を切り替える方法と、ユーザーの操作によって結果を振り分ける方法を学びます。

HTML側のソースコード


<body>
  <!-- 選択画面 -->
  <div id="select-page" style="display:block">
    <h1>宝当てゲーム</h1>
    <h3>好きな宝箱を選んでください。</h3>
    <img src="images/box_normal.png" class="box"
onclick="showAnswer(1)"><br>
    <img src="images/box_normal.png" class="box"
onclick="showAnswer(2)"><br>
    <img src="images/box_normal.png" class="box"
onclick="showAnswer(3)"><br>
  </div>
  <!-- 結果画面 -->
  <div id="result-page" style="display:none">
    <h1 id="result-msg"></h1>
    <img id="result-img" src="">
  </div>
</body>

解説

<body> タグ内には</div>要素が2 つ配置されています。”select-page” というID の</div>
要素が最初に表示される選択画面です。”result-page” というID の</div>要素は結果を表
示する画面です。この2 つの</div>要素には、style 属性が指定されています。style 属性を
指定すると、要素に対して直接CSS を適用することができます。style 属性の値として指定
されている「display」プロパティは、要素の表示/非表示を変更するCSS プロパティです。
初期状態では、結果画面を非表示にして選択画面だけをユーザーに見せるように設定して
います。

CSS側のソースコード


body {
    background-image: url("../images/back_normal.png");
    background-size: 100%; 
    background-repeat: no-repeat;
    text-align: center;
    color: white;
    padding: 10px;
}
.box {
    margin: 10px;
    width: 30%;
}
#result-msg {
    font-size: 24px;
}
#result-img {
    width: 70%;
}

解説

body要素

主に背景の指定を行っています。background-imageプロパティでは背景画像を指定しています。

クラス:box

宝箱の箱は3つあるため、IDではなくクラスでスタイルを当てています。余白や横幅を指定しています。

ID:result-msg

結果のメッセージを出す部分のフォントサイズを大きくしています。

ID:result-img

結果の画像を出す部分の横幅を指定しています。

JavaScript側のソースコード(ひな形)

ひな形版ではJavaScriptのコードは空になっています。
次に示す、完成版のコードを打ち込んでください。

JavaScript側のソースコード(完成版)


function showAnswer(choiceNo) {
    // 当たりの番号をランダムに設定
    var luckyNumber = Math.ceil(Math.random() * 3);
    // 当たりの場合とはずれの場合で結果を変える
    if(luckyNumber == choiceNo) {
        document.getElementById("result-msg").innerHTML = " おめでとうございます! ";
        document.getElementById("result-img").src = "images/box_treasure.png";
        document.body.style.backgroundImage = "url('images/back_red.png')";
    } else {
        document.getElementById("result-msg").innerHTML = " 残念!はずれです。";
        document.getElementById("result-img").src = "images/box_empty.png";
        document.body.style.backgroundImage = "url('images/back_blue.png')";
    }

    // 選択画面を非表示に、結果画面を表示状態に切り替える
    document.getElementById("select-page").style.display = "none";
    document.getElementById("result-page").style.display = "block";
}

解説

はじめに、13 行目で3 つの宝箱のうちいずれか1 つを当たりとして設定する処理を行っています。

当たりの箱は毎回ランダムに変わるようにするため、Math.random でランダム値を取得し、3 を掛けて小数点以下を切り上げることで「1」「2」「3」のいずれかの整数が得られるようにしています。

16 行目のif 文で、当たりの箱の番号と、ユーザーが選んだ宝箱の番号を比較しています。ユーザーが選択した箱の番号は、引数のchoiceNo に格納されています。比較した結果、あたりだった場合とはずれだった場合とで処理を振り分け、表示するメッセージ、宝箱の画像、背景画像にそれぞれ異なるものを設定しています。

最後に、27,28 行目で選択画面と結果画面の表示状態を切り替えて、選択画面を隠し結果画面がユーザーに見えるように変更しています。