Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Moonblock入門
Search
kubo-hide-kun
August 09, 2019
Programming
3
1.1k
Moonblock入門
北九州高専で行われた公開資料で使用した資料です.
kubo-hide-kun
August 09, 2019
Tweet
Share
More Decks by kubo-hide-kun
See All by kubo-hide-kun
CA BASE NEXT でスクロールに 連動したUIを構築した話
kubo_programmer
1
550
ハイレベルな環境こそが最高である 科学的なお話
kubo_programmer
0
160
SQL Injection
kubo_programmer
0
100
IPアドレスとは何か?
kubo_programmer
0
3.2k
クライアント/サーバーシステム
kubo_programmer
0
14k
DHCPサーバ
kubo_programmer
0
2.9k
How to make Readable Slide
kubo_programmer
0
120
AtomicDesignの説明と所感
kubo_programmer
0
1.9k
TCP/UDPの違い
kubo_programmer
4
5.1k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.4k
Model Pollution
hschwentner
1
180
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
クラシルを支える技術と組織
rakutek
0
190
Le côté obscur des IA génératives
pascallemerrer
0
120
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
580
CSC509 Lecture 05
javiergs
PRO
0
290
明日から始めるリファクタリング
ryounasso
0
110
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
CSC305 Lecture 02
javiergs
PRO
1
260
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
GitHub's CSS Performance
jonrohan
1032
460k
Writing Fast Ruby
sferik
629
62k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Typedesign – Prime Four
hannesfritz
42
2.8k
Thoughts on Productivity
jonyablonski
70
4.9k
Raft: Consensus for Rubyists
vanstee
139
7.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Agile that works and the tools we love
rasmusluckow
331
21k
Transcript
高専で学ぶ初めての プログラミング MoonBlock で ゲーム を ゼロ から 作ろう
! By 北九州高専 コンピュータ研究部
今日の目次 CHAPTER 1 プログラミングってそもそもなんだろう ? CHAPTER 2 MoonBlockでゲームを作ろう !
CHAPTER 1 プログラミングって そもそもなんだろう ? ?
命令① ▪▪▪▪ 命令② ▪▪▪▪ 命令③ ▪▪▪▪ 命令④ ▪▪▪▪ これやって~ OK~
プログラム(命令) コンピューター プログラミング & プログラム って な~に ? プログラミング : プログラムを書いていくこと プログラム : コンピューターに依頼する 「こんなことをしろ!」 という命令
プログラム の イメージ図 ① 順次実行 A B C 繰り返し A
C B 条件 満たす 満たさない A B C 条件分岐
プログラム の イメージ図 ② 関数(サブルーチン) A B C SUB D
E SUB SUB D A B B A C C E
プログラム の 例 家を出る 街を歩く ネコに会ったか? その猫は ミケネコか? → →
→ → ↑ ↑ 写真撮影!! 満たす 満たす 満たさない 満たさない 例: ミケネコ の 写真 を 撮影 する プログラム
CHAPTER 2 MoonBlockで ゲームを作ろう!
ここで質問!! プログラミング をする際 に どんな事 をする 必要 ありそう?
こんな感じで ムズかしいコードを 書くと思いました?
これは 半分、 正解 半分、 間違い
テキストプログラミング (文字でプログラミング) ビジュアルプログラミング (文字以外でプログラミング) いろんな種類のプログラミングの方法がある
テキストプログラミング (文字でプログラミング) ビジュアルプログラミング (文字以外でプログラミング) 今回のはこちら
MoonBlock って ? 誰でも ビジュアルプログラミング で ゲーム を作れる というサービスです。 ビジュアルプログラミング
なので ムズかしい プログラミング の 言語 を覚える必要がなく、 直感的 にゲームを作れます。
MoonBlock を開こう 任意のブラウザ(Webページを見るやつ) を開いて, http://www.moonblock.jp/ にアクセスしよう! (IEだと動作が安定しないので,他のブラウザを推奨) ここにリンクを挿入
画面の構成
各ボタンの説明(1/2) キット: プログラミングに 必要なブロック が 用途ごとに分かれて入っている。 実行画面: プログラムの 実行結果
が表示される。 ゲームの画面。「スクリーン」を押すと拡大。 Run: 作ったプログラムを実行。結果は実行画面に。 リセット: 作ったプログラムを全削除します。 復元は不可能です。 ここはやりながら覚えるので軽く流し見でOKです。
各ボタンの説明(2/2) ゴミ箱: 配置したブロックをドラッグし削除します。 (こちらも復元は不可能です) セーブ: 作成したプログラムを次回以降も使えるように セーブすることが可能です。 ここもやりながら覚えるので軽く流し見でOKです。
結局,どんなのを作るの? プレイヤーがマウスで くま を操作し、 爆弾 や スライム を 避けながら バナナ
を回収する ゲームを作成します。
STEP1: くまを表示させよう(1/3) キット内の [パペット] ボックスを クリックする。 クッリクすることでブロックが出るので その中の [パペット]ブロック をドラッグ。
これで上記の写真のように パペットブロックが残ればOK!
STEP1: くまを表示させよう(2/3) キット内の [ビヘイビア] ボックスを クリックする。 次は [出現]ブロック をクリック。 その
[出現]ブロック をドラッグし、 先ほどのパペットブロックに挿入。
STEP1: くまを表示させよう(3/3) 画面下部の [RUN] を クリックし実行する。 実行画面をクリックし、 画面中央に くまさん が現れれば成功。
STEP2: くまをマウスに追わせよう(1/2) [ビヘイビア]ボックスから [動き]ブロックを取り出す パペットに[出現]同様の方法で [動き]を挿入。
[動き]ブロックの 「ジグザグに移動」 というところをクリックし、 「タップしたところに向かって移動」 に変更 これで[RUN]を押し、実行すれば クマがマウスについてきます。 STEP2: くまをマウスに追わせよう(2/2)
STEP3: バナナを出現させよう(1/2) くま同様の方法で パペットを出す。 パペットの画像をクリックして、 数字の画像を選択する。 [ビヘイビア]から取り出した スピードブロックを挿入する。 スピードという部分をクリックし、 フレームに変更し、値を16にする。
STEP3: バナナを出現させよう(2/2) [出現]ブロック を挿入。 出現方法を 「ひとつだけでる」 から 「たくさんでる」 に変更。 これで実行すれば
バナナが10個 表示される
STEP4: バナナを消してみよう [ビヘイビア]ボックス から [当たり判定] を取り出し挿入。 当たる相手を[くま],スコアを10に設定。 [ゲーム]ボックス から [スコアボード]
を取り出し、 画面に配置 これで実行すれば くまとバナナが衝突すると バナナが消えて、 ゲーム画面の右上の スコアに 10pt が加算される。
STEP5: クリア条件を作ろう [リアクション]ボックスから [〇〇した時]ブロックを取り出し、 バナナに挿入。 〇〇の内容を 「パペットがタップされた時」 を 「全滅した時」 に変更する。
これで実行すれば バナナを全て回収すると ゲームクリアするようになる。 挿入したリアクションブロック内に [ゲーム]ボックスから取り出した、 [ゲームクリア]を挿入。
STEP6: 障害物を作ろう(1/2) くま同様の方法で パペットを出す。 パペットの画像をクリックして、 数字の画像を選択する。 [ビヘイビア]から取り出した スピードブロックを挿入する。 スピードという部分をクリックし、 フレームに変更し、値を24にする。
STEP6: 障害物を作ろう(2/2) [出現]ブロック を挿入。 出現方法は [たくさんでる] で個数はおまかせ。 くまと衝突した時に ゲームオーバー するようにする。
[ゲームオーバー]ブロック は [ゲーム]ボックス 内に存在する。
STEP7: 動く障害物を作ろう パペットを新しく作成し、 画像 をクリックして、 スライムの画像 を選択する。 このパペット内のブラック内容は 先ほどの障害物 と同じ
ここに[ビヘイビア]ボックス内の [動き]ブロックを挿入して完成
STEP8: 背景画像を変更しよう [ゲーム]ボックス から [背景]ブロック を取り出し、 画面に配置 好きな背景画像を選びましょう
今回の作成するゲームはこれで以上です。 MoonBlockを使えば他にも シューティングゲーム や、 アクションゲーム 、 パズルゲーム なども作成できます。