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
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
520
ハイレベルな環境こそが最高である 科学的なお話
kubo_programmer
0
150
SQL Injection
kubo_programmer
0
98
IPアドレスとは何か?
kubo_programmer
0
3k
クライアント/サーバーシステム
kubo_programmer
0
12k
DHCPサーバ
kubo_programmer
0
2.6k
How to make Readable Slide
kubo_programmer
0
100
AtomicDesignの説明と所感
kubo_programmer
0
1.8k
TCP/UDPの違い
kubo_programmer
4
4.6k
Other Decks in Programming
See All in Programming
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
140
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
AI時代のプログラミング教育 / programming education in ai era
kishida
22
20k
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.4k
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
ミリしらMCP勉強会
watany
2
220
eBPF Updates (March 2025)
kentatada
0
130
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
1k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Speed Design
sergeychernyshev
28
860
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Bash Introduction
62gerente
611
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Embracing the Ebb and Flow
colly
85
4.6k
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を使えば他にも シューティングゲーム や、 アクションゲーム 、 パズルゲーム なども作成できます。