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
90
AtomicDesignの説明と所感
kubo_programmer
0
1.7k
TCP/UDPの違い
kubo_programmer
4
4.1k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
540
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
Remix on Hono on Cloudflare Workers
yusukebe
1
290
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
210
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
subpath importsで始めるモック生活
10tera
0
300
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fireside Chat
paigeccino
34
3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
A better future with KSS
kneath
238
17k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Optimizing for Happiness
mojombo
376
70k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
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を使えば他にも シューティングゲーム や、 アクションゲーム 、 パズルゲーム なども作成できます。