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
960
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
150
SQL Injection
kubo_programmer
0
93
IPアドレスとは何か?
kubo_programmer
0
2.7k
クライアント/サーバーシステム
kubo_programmer
0
10k
DHCPサーバ
kubo_programmer
0
2.4k
How to make Readable Slide
kubo_programmer
0
91
AtomicDesignの説明と所感
kubo_programmer
0
1.7k
TCP/UDPの違い
kubo_programmer
4
4.1k
Other Decks in Programming
See All in Programming
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Remix on Hono on Cloudflare Workers
yusukebe
1
300
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
CSC509 Lecture 09
javiergs
PRO
0
140
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
220
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
cmp.Or に感動した
otakakot
3
200
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Bash Introduction
62gerente
608
210k
Navigating Team Friction
lara
183
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Faster Mobile Websites
deanohume
305
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Making Projects Easy
brettharned
115
5.9k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
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を使えば他にも シューティングゲーム や、 アクションゲーム 、 パズルゲーム なども作成できます。