Swift 習熟度チェック「Counting Game App Challenge」
はじめに
Mission1 から順にチャレンジしてみよう！
ルール
- チャレンジ時間は、15 分間
- Mission1 から順に進めていこう！
- ヒントを見ていい時間
- 5 分まで 自力で進めよう！
- 5 分以降 ヒント・教科書・ネット検索 OK！
- 10 分以降 1 つだけ質問できるよ！
準備: 素材をダウンロードしよう
Source code(Zip)ボタンを押してダウンロードしてね！
素材 · penguin4731/lit_counting_game_app_challenge
Asset の中に Mission3 で使うペンギンの写真が入っているよ！
Mission 1 カウントアプリをつくろう
1-1. 見た目を編集しよう
カウントの文字を表示して、＋ボタンを設置しよう！
💡 ヒント
見た目を編集するファイルはどれだったかな？
文字を表示するにはLabel、ボタンは、Buttonがあれば良かったよね！
1-2. カウントアプリが動かそう
＋ボタンが押されたら、1 増えるようにしよう！
💡 ヒント
- 編集するファイルを開こう！
ViewController.swiftを編集すれば数を制御できるよね！ - 数字を保存する変数を定義しよう！
変数は、var 変数名:型名もしくは**var 変数名:型名 = 初期値** で設定できるよ！ - Label と Button を動作させよう！
見た目を制御するには@IBOutlet、ボタンは何だったかな？ - 関連付けをしよう！
Int から String への変換方法
👉String(Int で保存されている数字)
Mission2 カウントアプリの機能を増やそう
2-1. マイナスボタンを追加しよう
-ボタンが押されたら、1 減るようにしよう！
💡 ヒント -ボタンを Storyboard に追加しよう！
＋ボタンを追加した時のように、ボタンを制御するコードを書こう！
2-2. 掛ける・割るボタンを追加しよう
x2 ボタンが押されたら数字を x2、÷2 ボタンが押されたら数字を ÷2 の動作をできるようにしよう！
💡 ヒント
掛ける・割るは、英語でなんと言うんだろう？Google で検索してみよう！ +や-は、演算子と呼ばれるよ。掛けるや割るの演算子はなんだろう?
Mission3 アプリをかわいくしよう
2-1. 1 匹のペンギンの画像を表示させよう
Assets.xcassets に保存されている「1」という画像を画面上に表示させよう！
💡 ヒント
画像を表示するには、Image Viewを使おう！
2-2. if 文を使って count の数字によって画像を変化させよう
count が 1~10 までの場合、それに合う画像を表示させよう！
💡 ヒント
if 文の使い方
if 条件式 {
条件に一致する場合
} else if 条件式 {
条件に一致する場合
} else {
どの条件にも当てはまらない場合
}
Mission3 Counting Game に作り替えよう
3-1. 見た目を整えよう
スクリーンショットの感じで、画面上に配置しよう！
3-2. 画像をランダムで表示させよう
2 つの変数にランダムな数を設定して、それにあったペンギンの画像を表示させよう！
起動時にランダムな数のペンギンが表示されたら OK！
3-3. Next ボタンをつくろう
Next ボタンは、
- Count の数が正しいかを確認！
- 正しい場合、次へ
- 正しくない場合、アラートを表示！
- ランダムで出るペンギンを再生成
- count の数を 0 に設定
の 3 つの機能をつけよう！
Mission Complete 🎉
これで本当に終わり！お疲れさま！！
習熟度チェックは、自分のできることとできないことを把握できたら OK！
解説を聞いて理解したら何度も復習してみてね！
余力のある人は、下の機能もつけてみてね！
- デザインをもっと凝ってみる
- 成功した時や失敗した時に音がなる機能
- 回答できるまでのストップウォッチ機能
- タイトル画面や結果表示画面
- 更なるゲーム性も！！
Discussion