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
950
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
480
ハイレベルな環境こそが最高である 科学的なお話
kubo_programmer
0
140
SQL Injection
kubo_programmer
0
93
IPアドレスとは何か?
kubo_programmer
0
2.7k
クライアント/サーバーシステム
kubo_programmer
0
10k
DHCPサーバ
kubo_programmer
0
2.3k
How to make Readable Slide
kubo_programmer
0
88
AtomicDesignの説明と所感
kubo_programmer
0
1.7k
TCP/UDPの違い
kubo_programmer
4
4k
Other Decks in Programming
See All in Programming
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
hotwire_or_react
harunatsujita
8
4.1k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
970
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
510
CSC509 Lecture 09
javiergs
PRO
0
110
Honoの来た道とこれから
yusukebe
19
3k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.5k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Producing Creativity
orderedlist
PRO
341
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Scaling GitHub
holman
458
140k
Six Lessons from altMBA
skipperchong
26
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Music & Morning Musume
bryan
46
6.1k
Statistics for Hackers
jakevdp
796
220k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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を使えば他にも シューティングゲーム や、 アクションゲーム 、 パズルゲーム なども作成できます。