プロフィール

カイロプラクター てん

Author:カイロプラクター てん


【趣味】
・自転車に乗って
 ヘロヘロになる事。
・カイロプラクティックで
 人を元気にする事。

カレンダー
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
作ったiOS App

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」

今回は、見た目をよくしまぁ〜す。

使用するアイコンはこれ
gu.pngtyo.pngpa.png
again.png

このアイコンファイルを、Xcodeのここ「Supporting Files」にドラッグ&ドロップ
まずは、「gu.png」をドロップ!
1301050.png

1301051.png
おっ!
ウィンドウが出た!
迷わず「Finish」をクリック
「gu.png」が追加された。
1301052.png

同じ要領で、「tyo.png」「pa.png」「again.png」を追加

次は、追加したグラフィックをButtonに適用。
「ぐー」Buttonをクリックして、右側のViewの「Attributes...」を選んで
Background「gu.png」を選択
Type「Custom」を選択
1301053.png

同じViewの「Size...」を選んで
アイコンのサイズと同じ「Width:90」「Height:90」に変更。
1301054.png

こんな感じ
1301055.png
こぶしがいい感じ♪
文字がじゃまですけど・・・。

同じ要領で、「ちょき」「ぱー」を
「もういっかい」は、サイズだけ「Width:160」「Height:80」

よし!シミュレータ Run!
1301056.png
文字とアイコンが間違っていいない事を確認

しかし・・。
相手が文字だと・・・。
よし、ここにもグラフィックを追加だ!
「Objects」から「Image View」を選んで、相手の上あたりにドロップ
サイズを「Width:90 / Height:90」に変更
1301057.png
そして、連携!
1301058.png
Nameは「View_aite」でConnectをクリック
連携完了。

さて、ここに「ぐー」「ちょき」「ぱー」のアイコンを表示させるには



結構、めんどくさい。

まずは、変数を宣言
ViewController.hのここに
gu_img、tyo_img、pa_imgを宣言
1301059.png

次は、宣言した変数にアイコンのファイル名を入力。
ViewController.hの- (void)viewDidLoadの所に
1301060.png
これで、アイコンを自由に使えるぞ!
と、言っても地道な作業が・・・。

まずは、「ぐー」の所をプログラム追加していきます。
lbl_aiteが
「ぐー」の時は gu_img
「ちょき」の時は tyo_img
「ぱー」の時は pa_img
1301061.png

よし!シミュレータ Run!
1301062.png
あら!
相手が表示したままだ。

修正、修正
「もういっかい」Buttonを押した時に「相手」を消して
1301063.png

「ぐー」Buttonを押した時に「相手」を再表示と
1301064.png

「ちょき」「ぱー」も同じ要領で追加。
コピペで対応!

シミュレータ Run!
1301065.png

う〜ん、勝ち負けもグラフィック表示にしたくなった。
同じように ImageViewを追加して
Nameは「view_kekka」
1301066.png

使用するアイコンはこれ
サイズは、100×100
kati.png
aiko.png
make.png

「相手」と同じ要領で
変数宣言!
ViewController.h
1301067.png

ViewController.m
1301068.png

これで宣言が終わり!

まずは「ぐー」
「相手」の時と同じ要領で
1301069.png
1301070.png

うぅ〜ん!
こうなったら!
バックグラウンドも変更
「Image View」をドロップ
全体いっぱいに広げて
このままでは、表示がこのImageViewだけになってしまうので
ここの部分で移動して、表示順番を一番したにするんだけど、上に移動・・・。
なんか、ややこしいぃ〜。
1301071.png
このViewは連携なし
Imageに、これを「bg01.png」適用して
bg01.png
「じゃんけん・・・」のLabel文字を白色に変更して
「bg01.png」に合うように位置関係もを修正して
グラフィックと文字「ぐー」「ちょき」「ぱー」「もういっかい」を削除(空白)
これで、よし!

シミュレータ Run!
1301072.png

おぉ〜、いい感じだ!
しかし、プログラミングよりアイコンのデータ作りに時間がかかったなぁ〜

これで、じゃんけんゲーム作りおわりで〜す。


-* じゃんけんゲーム まとめ *-
1.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」
スポンサーサイト
THEME:プログラミング | GENRE:コンピュータ |

iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」

今回は、相手(コンピューター)の動きを追加

人工知能を使用して、対戦相手の動きを・・・・。
というのは、無しで
乱数(ランダム)で、「ぐー」「ちょき」「ぱー」を出すようにする。

動作はこんな感じ
まずは、「ぐー」Buttonからプログラムしいていきます。
「ぐー」Buttonを押すと、乱数を発生させてMacが何を出すかを決める。
「ぐー」とMacを比較して勝敗を決める。
後だしジャンケンなので、絶対に勝てないプログラムもできるね。

今回は、わかりやすく「if」文を使用。
case使いたいなぁ〜。「ぐー」「ちょき」「ぱー」別々は、大変だなぁ〜 ←独り言

Macが、0、1、2をの乱数をだすようにして
0の時は、「ぐー」
1の時は、「ちょき」
2の時は、「ぱー」
を、lbl_aiteの所に表示させる。
1301037.png


うまく、いくかなぁ〜
シミュレータ Run!
1301038.png
「ぐー」を押したら
Macが「ぐー」を出したよ
とりあえず、エラー無く動いたみたいだ。

けど、結果は、「結果」のままで、
変だ!

次は、「結果」の部分に勝敗を表示
自分は「ぐー」なので
Macが「ぐー」の時は「あいこ」
Macが「ちょき」の時は「あなたの勝ち!」
Macが「ぱー」の時は「あなたの負け!」
と表示させる。
1301039.png
こんな感じ。

よし!
シミュレータ Run!
ぐーしかプログラミングしていないので
ぐ〜を、ぽちっと
1301040.png
あぁ〜!
「ぱー」だしやがった!
負けたよ。
連続で「ぐー」を押して、動きを確認

あっ!
なんか、動きが不自然だぞ!
こうしよう!
■あいこの時
 勝負は決まってないので、「ぐー」「ちょき」「ぱー」を表示したままに
■勝敗が決まった時
 勝負は終了なので「ぐー」Buttonが押せないようにして「もういっかい」
 Butoonで再勝負にする。
1301041.png

このままだと、勝敗が決まった後「ぐー」ボタンがず〜と、無効になったまま
なので、「もういっかい」のButtonを押すと「ぐー」Buttonが有効になるように追加
「もういっかい」Buttonを押すということは、再勝負になるので「相手」と「結果」の
表示部分を削除
1301042.png

これで、「ぐー」しか出せないジャンケンゲームだけど、勝負ができるようになった。
シミュレータ Run!
あれ!?
起動画面がちょと不自然。
1301043.png
「相手」「結果」「もういっかい」が表示されていて、見た目が不自然でかっこ悪い。
起動画面は、非表示にしよう。
起動時に - (void)viewDidLoad の部分が実行されるので
ここに
1301044.png

と、このままだと、「もういっかい」Buttonがず〜と非表示で
押せないままなので、勝負がついた時に「もういっかい」Buttonを表示
1301045.png

ついでに、もういっかいを押したら「もういっかい」ボタンを非表示にさせる。
1301046.png

ふぅ〜これで、完璧だぜ!
「ぐー」だけですけど・・・。

残りの「ちょき」と「ぱー」を同じ要領でプログラミングして
「ちょき」は、こんな感じ、同じ要領で「ぱー」もプログラミングして
1301047.png

「もういっかい」Buttonも追加して
1301048.png

これで、Macと対戦できるぜ!
シミュレータ Run!
1301049.png

やっぱり、みためがねぇ〜。
次回は、グラフィックを追加しま〜す。


-* じゃんけんゲーム まとめ *-
1.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」
THEME:プログラミング | GENRE:コンピュータ |

iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」

やっとプログラミングだぁ〜。

今回は、前回配置したLabelとButtonの連携。

前回終了時の画面から
1301035.png

右上にあるEditorの真ん中のボタンを押して
1301017.png
おぉ〜!
画面が増えたぜ!

そして、まずは「じゃんけん・・」のLabelをクリックして
マウスの右側のボタンでドラッグすると
右ボタンが無い場合は、controlボタンを押しながら

びよぉ〜ん、と、
そして、右側の欄にドロップ
1301018.png

おっ!なんかでたぞ!
1301019.png
Nameに「lbl_msg」と入れて、Connectをクリック。

自動で文字が記入された
1301020.png
これで、「じゃんけん・・」と「lbl_msg」が連携

残りのLabelも同じ要領で、
相手 → lbl_aite
結果 → lbl_kekka
1301021.png
これで、Labelの連携完了。

次は、Buttonだ!
Labelの要領で、まずは、「ぐー」Buttonを選んでマウスの右ボタンでドラッグ&ドロップ
1301022.png
Nameに「btn_gu」と入力してConnectをクリック
1301023.png
自動で文字が記入された。

残りのButtonも同じ要領で
ちょき → btn_tyoki
ぱー  → btn_pa
もういっかい → btn_again
1301024.png

Buttonはもう一つ
Butoonが押された時の動きを連携させる。
今までと同じ要領で
「ぐー」をクリックして右ボタンでドラッグ&ドロップ
Connectionを「Action」に変更して
Nameに「btn_gu_dwn」を入力して
Connectをクリック
1301025.png
1301026.png
自動で文字が記入された。

残りのButtonも同じ要領で
ちょき → btn_gu_dwn
ぱー  → btn_pa_dwn
もういっかい → btn_again_dwn
1301027.png

これで連携終了。

問題ないか、左上の「Run」ボタンを押してシミュレーターチェック!
エラーなし。
「Stop」ボタンを押して終了。

ここからが、本格的なプログラミングだぜ!

まずは、
ボタンを押したときの動作をプログラミング

右上の「Editor」の左側のボタンをクリックして、Viewを少なくして
左側の「ViewContoroller.m」をクリック
1301028.png
・btn_gu_dwn
・btn_tyoki_dwn
・btn_pa_dwn
・btn_again_dwn
関係の文字が増えている
ボタンを押すとここのプログラムが動くので
まずは、「ぐー」を押した時の動作をプログラミング
1301029.png
「ぐー」を押した時に、「ちょき」「ぱー」の表示を消す
1301030.png

いざ!シミュレーター!
「ぐー」Buttonを押すと!
1301031.png

「ちょき」「ぱー」のButtonが消えた!
成功!



はまった。
繰り返しできない・・。

それなら、
「もういっかい」を押すと全てのButtonが表示するようにすれば
連続でできるようになるので
btn_again_dwnの所に
1301032.png
これで、全表示!

これで、シミュレーター!
お!表示されるぞ!
これで、連続でできるぞ!
「ぐー」だけ、だけど・・・。

残りの「ちょき」「ぱー」を押された時の動作も追加して
1301033.png

ちょっと、見た目を良く
「ぐー」「ちょき」「ぱー」のButtonを押すと
「じゃんけん・・・」が「じゃんけん、ぽん!」になるように
「もういっかい」を押すと「じゃんけん・・・」に戻るようにしてと
1301034.png

いざ! シミュレーター!
1301036.png

今回は、これで終わり。
次回は、相手(コンピューター)の動きを追加しまぁ〜す。

-* じゃんけんゲーム まとめ *-
1.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」
THEME:プログラミング | GENRE:コンピュータ |

iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」

今回は、部品を配置しよう!

Xcodeを立ち上げて

前回作った、プロジェクトファイル「jyanken」を選んで「Open」をクリック
1301006.png

プロジェクトファイルが開いた!

MainStoryboard.storyboardをクリック!
1301007.png


おっと!
画面が切り替わったぜ!
iPhoneみたいな枠がでてきた!
ここに部品を配置していくんだね。
1301008.png

右下にある枠の四角いのを押して「Objects」に変更して
1301009.png

Labelをドラックして、枠にドロップ!
1301011.png

こんな感じで、残りを部品を配置
1301012.png

次に、Labelの表記を変更。
1301013.png

らしく、なっていきたぞ!

次に、ボタンを追加
Labelと同じ要領で、「Round Rect Button」をドラック&ドロップ
文字も、Labelと同じ要領で変更してと
1301014.png

これで、今回の目標部品の配置
完了!

この勢いで、シミュレーション!
「iPhone 6.0 Simulator」になっているのを確認して「Run」をクリック
1301015.png

じゃ〜ン!
1301016.png

こんな感じになりました。

次は、プログラムに入りまぁ〜す♪

-* じゃんけんゲーム まとめ *-
1.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」
THEME:プログラミング | GENRE:コンピュータ |

iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」

さて、やるぞぉ〜!

使用するシステムは、こんな感じ
■Mac mini Late 2012
 2.5GHz Intel Core i5 / 16GB
 OS X 10.8.2

■Xcode Ver.4.5.2 (無料)

■参考URL:もとまか日記

なになに!?
こんな、感じのができる!?

自分なりにCamiAppを使用してレイアウトを作ってみた。
130112_130112101333.jpg

ワク♪ワク♪しちゃうね♪
ただの、落書き かぁ〜?

まずは、プロジェクトファイルの準備。

Xcodeを立ち上げて
「Create a new Xcode project」をクリック
1301001.png

iOSのapplicationを選び「Single View Application」を選んで「Next」をクリック
1301002.png

Product Nameに好きな名前を入れて、「Next」をクリック
今回は、「jyanken」にしました。
1301003.png

次に、プロジェクトファルの保存フォルダーを聞いてくる。
このフォルダーでいいので、「Creat」をクリック
他のフォルダーにしたい場合は、そのフォルダーを指定する。
1301004.png

じゃ〜ん!
1301005.png
これで、プロジェクトファイルが完成したぞぉ〜!

次回は、部品の配置だぁ〜!

-* じゃんけんゲーム まとめ *-
1.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#1」
2.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#2」
3.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#3」
4.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#4」
5.iPhoneアプリをまねして作ってみよう!「じゃんけんゲーム#5」
THEME:プログラミング | GENRE:コンピュータ |
 
検索フォーム
QRコード
QRコード
ブロとも申請フォーム
FC2カウンター
ビリリティピルズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。