この記事を書いた人:

鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part2)

iPhoneアプリ開発

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は前回に引き続き、「鳴き声足し算ゲームiPhoneアプリ」を作成していきたいと思います。

このアプリは、ある数字が表示されたあと、何と何を足したらその数字になるか考えるゲームです。また、数字を選択するときにかわいい音もならしてみたいと思います。この音をイヌやネコにすることでキッズ向けアプリケーションにもなります。
この章では、足し算の部分を作成していきたいと思います。

それでははじめていきましょう!

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)
10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)
嘘電話アプリを開発してみよう
パスワードiPhoneアプリ作成してみよう(Part1)
パスワードiPhoneアプリ作成してみよう(Part2)
パスワードiPhoneアプリ作成してみよう(Part3)
パスワードiPhoneアプリ作成してみよう(Part4)
ToDoリストiPhoneアプリを作成してみよう(Part1)
ToDoリストiPhoneアプリを作成してみよう(Part2)
ToDoリストiPhoneアプリを作成してみよう(Part3)
ToDoリストiPhoneアプリを作成してみよう(Part4)
鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part1)


イントロ部分の改変

イントロダクション部分を1回だけの表示にする

前回、cocoa Podsを使用して、イントロダクションを取り込みました。
通常イントロダクションは、はじめてアプリをインストールして起動した際に1回のみ表示され、その後は表示されないというのが一般的かと思います。
まずは、イントロダクション部分を1回表示したらその後はアプリを起動しても表示しないという機能を実装していきたいと思います。

NSUserDefaultsを使用して管理する

前回までの講座でアプリ内にデータを半永久的に保存する「NSUserdefaults」の使い方についても見てきたと思います。今回この中にデータを入れて、もしイントロダクションが表示されたら次回からはイントロダクションを表示しないという形で作成していきます。

まず、下記のようにNSUserdefaultを使用することを宣言します。
xcode_gamese1

NSUserDefaults *ud;

xcode_gamese0

    ud = [NSUserDefaults standardUserDefaults];

さらに、次のように記述します。
xcode_gamese2

BOOL flag = [ud boolForKey:@"intro"];
   
    if (flag != YES) {
        [self showIntro];
        [ud setBool:YES forKey:@"intro"];
    }

順を追って説明していきます。
まず、NSUserDefaultsの変数である、udからキー値introでbool値(YES or NO)を取り出しています。デフォルト状態ではYESではないので(何も値をintroというキー値で入れていないので)、

if (flag != YES) {

もし、flagの中身がYESでなかったら

[self showIntro];

[ud setBool:YES forKey:@"intro"];

showIntroメソッドを呼ぶ、つまりイントロダクションを出します。
次に、introというキー値でYESを入れます。
すると、次回からintroというキー値でBool値を取り出した際、YESであるので、このif文の中にはプログラムは入ってきません。
このBool値は半永久的に保存されるのでイントロダクションはその後表示されなくなります。

問題を作成していく

それでは、問題の数字が入るようint型の変数を準備します。
xcode_gamese3

int question;

さらに、このquestionという変数の中に乱数で発生させた数字を入れます。
xcode_gamese4

question = (int)arc4random()%10;

次に、Storyboard上にラベルを配置します。
このラベルはquestionの数字を表示することになります。
xcode_gamese5
文字を変更します。
xcode_gamese6
さらに、数字を入力するテキストフィールドも画面の上にのせます。
xcode_gamese7
+というラベルものせて
xcode_gamese8
もう1つテキストフィールドを画面にのせます。
xcode_gamese9

Cocoa Podsを使用する

キーボードを準備する

ここで再度、cocoa podsを使用します。
今回は、キーボードを扱います。
通常のキーボードとは別に数字に特化したものを使用します。
Podfileに以下のように記述します。
xcode_gamese10

pod ‘MMNumberKeyboard’

次にターミナルを開いて、前回同様cd→ドラッグ&ドロップでプロジェクトのある階層まで行きます。
xcode_gamese11
最後に pod installと書いて、エンターを押します。するとプロジェクトへの取り込みが開始されます。
xcode_gamese12
とりこむ処理が開始されます。
xcode_gamese13
全て終わったらexitと打ってターミナルを終了させます。
xcode_gamese14

今回使用したものは下記のMMNumberKeyboard for iOSというものになります。

https://github.com/matmartinez/MMNumberKeyboard
xcode_gamese15

続いて、このMMNumberKeyboardをプログラムへ取り込みます。

xcode_gamese16

#import “MMNumberKeyboard.h"

説明を参考にデリゲートも書きます。
xcode_gamese17

さらに、MMNumberKeyboardの使い方に書いてあるように、以下のようにコードを記述していきます。
xcode_gamese18

    // Create and configure the keyboard.
    MMNumberKeyboard *keyboard = [[MMNumberKeyboard alloc] initWithFrame:CGRectZero];
    keyboard.allowsDecimalPoint = YES;
    keyboard.delegate = self;

続いて画面のパーツをプログラムに認識させていきます。

下記のようにテキストフィールドを選択して、commandを押しながらドラッグ&ドロップしていきます。ここではtextfield1という名前をつけました。
xcode_gamese19

もう一方のテキストフィールドも同じ方法で認識させていきます。
こちらはtextfield2と名づけました。
xcode_gamese20
xcode_gamese21

さらに、MMNumberKeyboardもデリゲートメソッドも記述します。
xcode_gamese22

- (BOOL)numberKeyboardShouldReturn:(MMNumberKeyboard *)numberKeyboard
{
    // Do something with the done key if neeed. Return YES to dismiss the keyboard.
    return YES;
}

さらに、テキストフィールドの体裁を整えていきます。
以下のようにtextfield1、textfield2ともに記述していきます。
ただ、ここは後ほど変更していきます。
xcode_gamese23
変更後のプログラムは以下になります。

textField1.inputView = keyboard;
    textField1.text = @"";
    textField1.placeholder = @"数字1";
    textField1.font = [UIFont systemFontOfSize:24.0f];
    textField1.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;

textField2.inputView = keyboard;
    textField2.text = [NSString stringWithFormat:@"%d",number];
    textField2.placeholder = @"数字2";
    textField2.font = [UIFont systemFontOfSize:24.0f];
    textField2.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;

次に、答え合わせボタンを画面上へ置きます。
xcode_gamese24

さらに、プログラムへ認識させます。
xcode_gamese25
answerという名前をつけました。
xcode_gamese26

現在textfield2でnumberという箇所にエラーが出ているかと思います。
このnumberは今から作成しますが、問題の数字が乱数によって生成され、ラベルに表示された後、テキストフィールド2にも乱数によって生成した数字を記入します。

ゲームのルールを、問題の数字にはテキストフィールド2にある数字と何を足したらなるのかということで正誤判定をしていきたいと思います。

正誤判定は答え合わせボタンをタップしたときに行います。

それでは、テキストフィールド2のなかに入れておくための箱を準備します。
xcode_gamese27

    int number;

そしてnumberへ乱数を発生させた数字を入れておきます。(ここも後ほど変更します)
xcode_gamese28
続いて、数字を文字列へ変換します。これをキャストといいます。
xcode_gamese29
さらに問題正誤判定が終わったあと、問題をリセットする場所を作成します。
ボタンを画面の上へ置き、リセットと名前をつけメソッドの名前をresetとしました。
xcode_gamese30
ここに、リセットボタンが押されたときの処理を記述していきます。
xcode_gamese31
ここで行っているのは、numberへ乱数を再びいれて新しくした後、textfield1の文字列を空にします。次に、textfield2のテキストをnumberとします。

また、問題の数字というラベルをプログラムへ認識させていきます。
resultLabelと名づけました。
xcode_gamese32
xcode_gamese33
続いて、問題の数字のラベルへ乱数を発生させた数字を反映させていきます。
questionに乱数を発生させた後、その数字を文字列にキャストしてラベルの文字として反映させます。
xcode_gamese35

resultLabel.text = [NSString stringWithFormat:@"%d",question];

さらに、リセットが押されたときも同様に問題の数字を新しくします。
xcode_gamese36

    resultLabel.text = [NSString stringWithFormat:@"%d",question];

乱数へ範囲を設ける

ここで乱数に関して範囲をもうけていきたいと思います。
viewDidLoad内を変更します。
xcode_gamese39

    int question2 = 5.0 + arc4random() % 6; //5から10までの乱数を取得
    question = question2;

次に、numberも同様に範囲を指定します。
xcode_gamese40

   int number2 = rand()%3 + 1; //1から3までの乱数を取得
    number = number2;

リセットボタンの箇所も同様に変更します。
xcode_gamese41

    int question2 = 5.0 + arc4random() % 6; //5から10までの乱数を取得
    question = question2;

xcode_gamese42

   int number2 = rand()%3 + 1; //1から3までの乱数を取得
    number = number2;

最後に正誤判定用に数字を入れておく箱を準備します。
xcode_gamese43

int result;

answerの部分へ以下のように記述します。
xcode_gamese45

  result = number + [textField1.text intValue];

    if (result == question) {
        resultLabel.text = @"正解!";
    }else{
        
        resultLabel.text = @"間違い!";
        
    }

まず、textfield2で用いるnumberとtextfield1で入力された文字列を数字へ変換したものを足し算してresultへ入れます。

そして、もしresultの中の数字と問題の数字、つまりquestionの値が同じであれば、
resultlabelのテキストを正解、そうでなければ間違いとします。

シミュレーターで確認してみよう

それでは左上の▶ボタンをクリックしてシミュレーターを立ち上げて確認してみましょう。
試しに、間違ってみます。
2 + 2 = 8となるかどうか試しています。
xcode_gamese47
答え合わせボタンをタップすると、間違い!と判定されました。
xcode_gamese48
次に、3 + 2 = 5となるか確認してみます。
xcode_gamese49

正解と表示されました。
xcode_gamese50

最後に

いかがでしたか?

このように、イントロダクション以外にもキーボードなどもPodfileへ記述することで簡単に取り込むことができ、開発者はロジックの部分に集中することができるようになります。

続いては、キーボードを押すと何か音がなるようにプログラムを追加して見ようと思います。また、背景画像をセットして、子供が喜びそうな知育系アプリにしてみたいと思います。次回もお楽しみに。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!