【子ども向けハンズオン】...
TRANSCRIPT
【子ども向けハンズオン】ゲームで学ぼう、プログラミング！
2016/7/24 Java女子部
名ふだ作成タイム
テーブルにあるペンとシールで
名ふだを作りましょう！
※時間は5分です。
じこしょうかいタイム
作った名ふだを見せながら
グループ内で
じこしょうかいしましょう！
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
もくじ
はじめに
プログラミングって
なんだろう？
プログラミングとは
プログラムを作ること。プログラムを作るには、きかい(コンピュータ)にわかる言葉で命令する。
プログラミングとは
日本語
プログラミング言語
明日の天気は？
String urlstr = "http://weather.livedoor.com/forecast/webservice/rest/v1"; String parameter = "city=70&day=tomorrow";・・・
世界から『プログラム』が消えたなら
スマホが使えない→電話やメール、アプリが使えないのでれんらくをとるのが大変ゲームができない→ごらくがすくなくなる
他にもたくさんプログラムがあるからきょうみがある子はどこに使われているかしらべ
てみよう！
今日のゴール
■ プログラムが何か知ろう■ 作る楽しさ・面白さをたいけんしよう
カミワザワンダ
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
もくじ
チャットをしてみよう
チャットとは、
インターネット上でたくさんの人と
文字を入力して会話すること。
チャットをしてみよう
ブラウザ(Chrome：クローム)をひらいてください
チャットをしてみよう
チャットをしてみよう
この画面を「トップ画面」というのでおぼえておい
てね！
チャットをしてみよう
今日のスライドはここをクリックすると見れるよ！
チャットをしてみよう
クリック
チャットをしてみよう
チャットをしてみよう
①なまえを入れよう
②メッセージを入れよう
③「そうしん」ボタンをクリック
チャットをしてみよう
ここにそうしんしたメッセージがひょうじ
されるよ！
チャットをしてみよう
ほかの子がそうしんしたメッセージも見れるよ！
チャットをしてみよう
■ ハンズオン中の好きなときに
しつもんやかんそうをチャットで
そうしんしてみてね！
※ちゅうい
■ ハンズオン中はチャット画面は閉じないでね！
■ スマホからも使えるのでお父さんお母さんもぜひ使ってくださいね！
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
もくじ
へんすうを学ぼう！トップ画面
「モンスターをたおそう！」をクリック
へんすうを学ぼう！
「START」クリックで
ゲームがはじまるよ！
へんすうを学ぼう！
キーボードの「←」と
「→」をおしてモンスターに近づこう！
へんすうを学ぼう！
モンスターを
たおそう！
近づいたらキーボードの「スペース」を
おしてモンスターを
こうげきしよう！
へんすうを学ぼう！
「もう一度遊ぶ」クリックで
また遊べるよ！
「もう一度遊ぶ」クリックで
また遊べるよ！
へんすうを学ぼう！
モンスター
たおせたかな？
へんすうを学ぼう！
「エディタをひらく」
をクリック
へんすうを学ぼう！
①「モンスターの体力＝」に
「5」を入力
②「へんこう」
ボタンをクリック
へんすうを学ぼう！
もういちどゲームをやってみよう！
こんどはモンスターたおせたかな？
へんすうを学ぼう！
へんすうとは、
「モンスターの体力」みたいにふやしたり、へらしたりできるものをほぞんするばしょに名まえをつけること。
へんすうの
なまえ
へんすうを学ぼう！
へんすうとは、
あたいをへんすうに一時的にほぞんすることを「代入」という。
へんすう あたい
へんすうを学ぼう！
ほかの「へんすう」をいろいろな
数にかえてあそんでみよう！
時間がある子は
「モンスターをよけよう！」
でもあそんでみよう！
へんすうを学ぼう！
へんすうを学ぼう！トップ画面
「モンスターをよけよう！」をクリック
上下キー(↑↓)でくまを動かしてモンスターをよけてゴールまでたどりつこう！
へんすうを学ぼう！
モンスターの動きが早くてクリアできないばあいはあたいを小さく
してみよう！
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
もくじ
「ざひょう」って何だろう？
→画面の中の「いち」をあらわすの。
ざひょうを学ぼう！
ざひょうを学ぼう！
ざひょうを学ぼう！
くまのいる場所をどうやって表す？
ざひょうを学ぼう！
画面に「たて」「よこ」のマス目があると考えるよ。
1 2 3 4 5 6 7 8 9 101
2
3
4
5
6
7
8
910
よこよこ
たて
ざひょうを学ぼう！1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
910
よこ
たて
ざひょうを学ぼう！1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
910
よこ
たて
ざひょうを学ぼう！1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
910
よこ
たて
「よこ５、たて5の場所にくまがいる」と表せられたね！
ざひょうを学ぼう！1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
910
「よこ５、たて5の場所にくまがいる」と表せられたね！→これが「ざひょう」
よこ
たて
ざひょうを学ぼう！トップ画面
「ざひょうを
数で見てみう！」をクリック
ざひょうを学ぼう！
「START」クリックで
ゲームがはじまるよ！
ざひょうを学ぼう！
くまはクリックしているあいだいどうするよ
ざひょうを学ぼう！
くまさんをうごかして、
りんごをあつめよう！
くまはクリックしているあいだいどうするよ
ざひょうを学ぼう！
クリア
できたかな？
ざひょうを学ぼう！
あそびながら、くまのいち（ざひょう）もかくにんしよう。
ざひょうを学ぼう！トップ画面
「だっしゅつ
しよう！」をクリック
ざひょうを学ぼう！
「START」クリックで
ゲームがはじまるよ！
ざひょうを学ぼう！
ゴール
ざひょうを学ぼう！
ゴール
やじるしキーを使って動かせるよ！
ざひょうを学ぼう！
ゴール
通れない。。。
ざひょうを学ぼう！
キャラクターが一番はじめにいる
ざひょうを変更してみよう！
動かせる範囲
よこ：1〜20たて：1〜20
ざひょうを学ぼう！
たとえばよこ：６ たて：１０の場所はここ
ざひょうを学ぼう！
たとえばよこ：11 たて：5の場所はここ
ざひょうを学ぼう！
たとえばよこ：11 たて：5の場所はここ
ゴールに行くにはどの場所にいればいいかな？
ざひょうを学ぼう！
ゴールにたどりつけたかな？
おやつ きゅうけい
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
もくじ
くりかえしとは、 かいだんのぼる
くりかえしを学ぼう！
くりかえしとは、
すべる
くりかえしを学ぼう！
くりかえしとは、
はまった！もういっかい！
くりかえしを学ぼう！
くりかえしとは、 かいだんのぼる
くりかえしを学ぼう！
くりかえしとは、
すべる
くりかえしを学ぼう！
くりかえしとは、
はまった！もういっかい！
くりかえしを学ぼう！
くりかえしとは、
すべる
はまった！もういっかい！
かいだんのぼる
くりかえしを学ぼう！
くりかえしとは、
すべる
はまった！もういっかい！
かいだんのぼる
これがくりかえし★
くりかえしを学ぼう！
くりかえしを学ぼう！トップ画面
「くりかえしを使って
図を作ってみよう！」をクリック
クリック！
くりかえしを学ぼう！
「３」を入れて
みよう！
くりかえしを学ぼう！
「へんこう」を
クリック！
くりかえしを学ぼう！
線が3回まがったかな？
くりかえしを学ぼう！
「まがれ！」という命令を3回くりかえした
まがれ！
まがれ！
まがれ！
くりかえしを学ぼう！
くりかえしで
こいつを
ふやすことも
できるぜ！
どーん
ひとりぼっちなの
くりかえしを学ぼう！
虫の絵を書く
くりかえしを学ぼう！
Timer: 6
あと1匹！
ゲームに表示させる
くりかえしを学ぼう！
Timer: 6
あと1匹！
もういっぴき 表示したいな！
くりかえしを学ぼう！
もういっぴき 表示したいな！
Timer: 6
あと1匹！
ゲームに表示させる
虫の絵を書く
くりかえしを学ぼう！
くりかえすことで、
たくさん
虫さんを作れるよ！
くりかえしを学ぼう！
くりかえしを学ぼう！トップ画面
「ふやした虫を
けそう！」をクリック
ここに入れた数だけ
虫さんがくりかえし
によって作られるよ！
くりかえしを学ぼう！
あそび方虫をクリックして１０秒以内に
全部消せたらクリア
くりかえしを学ぼう！
ゲームをやってみよう！
くりかえしを学ぼう！
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
★もくじ★
じょうけんを学ぼう！
じょうけんとは、
イベントが発生したら、
アクション(行動)をする
ということ
○○したら ○○する
じょうけんってなんだろう？
■ にちじょう生活だと
じょうけんを学ぼう！
雨がふったら かさをさす
じょうけんってなんだろう？
■ ゲームだと
じょうけんを学ぼう！
敵にぶつかったら ゲームオーバー
じょうけんを学ぼう！トップ画面
「ゴールに
たどりつこう！」をクリック
じょうけんを学ぼう！
まずは「右」のままでやってみよう！
じょうけんを学ぼう！
「START」をクリックで
ゲームスタート！！
じょうけんを学ぼう！
かいだんまで
たどり着けたかな？
今回のゲームでは、
かべにあたったら 右にまがる
右
じょうけんを学ぼう！
じょうけんを「左」に変えて、やってみよう！
じょうけんを学ぼう！
じょうけんを学ぼう！
「START」をクリックで
ゲームスタート！！
じょうけんを学ぼう！
今度は
かいだんまで
たどり着けたかな？
今回のゲームでは、
かべにあたったら 左にまがる
左
じょうけんを学ぼう！
じょうけんを学ぼう！トップ画面
「ぶたさんを
じゆうにうごかそう！」をクリック
じょうけんを学ぼう！
ぶたに当たったら
ゲームオーバーになる
じょうけんを学ぼう！
じょうけんを学ぼう！
じょうけんを学ぼう！
はやさ
じょうけんを学ぼう！
大きさ
じょうけんを学ぼう！
ゲームをやってみよう！
1. はじめに2. ハンズオン
1. チャットをしてみよう！2. へんすうを学ぼう！3. ざひょうを学ぼう！4. くりかえしを学ぼう！5. じょうけんを学ぼう！
3. まとめ
★もくじ★
まとめ(きょうべんきょうしたこと)
■ プログラミングとはなにか■ プログラミングの考え方
■ へんすう
■ 「モンスターの体力」みたいにふやしたり、へらしたりできるものをほぞんするばしょ。
まとめ(きょうべんきょうしたこと)
■ ざひょう
■ キャラクターのいる「いち」をあらわすかずのこと。
■ くりかえし
■ おなじうごきをくりかえすこと。
■ じょうけん
■ イベントがはっせいしたときに
することをしていすること。
まとめ
プログラムは、きょうべんきょうした
・へんすう
・ざひょう
・くりかえし
・じょうけん
をくみあわせてつくられているよ。
まとめ
プログラムは、きょうべんきょうした
・へんすう
・ざひょう
・くりかえし
・じょうけん
をくみあわせてつくられているよ。
きょうべんきょうしたことを
つかってプログラミング
してみよう
まとめトップ画面
「くまさんを
動かそう！」をクリック
まとめ
「エディタをひらく」を
クリック！
まとめ
はいけいを
変えてみよう
まとめ
はいけいを
変えてみよう
まとめ
花を
増やそう！
まとめ
まとめ
くまさんの
せっていを
かえてみよう
まとめ
くまさんのいち
まとめ
白いくまさん
茶色い
くまさん
リボンの
ついたくまさん
まとめ
「動かない」
→くまさんが、いどうしないせってい。
「じどうで動く」
→くまさんが、まっすぐはしるせってい。
「キーボードで動く」
→やじるしキーをおすと、くまがいどうするせってい。
まとめ
さいごに、スペースキーを
おしたときのくまのうごきを
せっていしよう
まとめ
やじるしキーおしたり、
スペースきーおしたりして、
せっていどおりに、くまが
うごくかたしかめてみよう！
■ enchant.jsでゲームを作ってみたい場合■ enchant.jsを使った子ども向けプログラミングワークショッ
プ講義内容■ HTML5とJavaScriptでスマートフォンゲーム作成! ゼロか
らはじめるenchant.js入門【公式ガイド】■ はじめて学ぶ enchant.jsゲーム開発
■ enchant.jsで本格的にゲームを作ってみたい場合■ 戦略シミュレーションゲームの作り方
おすすめサイト・本
付録. 時間があったらやってみよう！
1. はいれつを学ぼう！1. マップを作ろう！
2. 書いてみよう！1. ソースコードを書いてみよう！
もくじ
はいれつを学ぼう！
へんすうには１つのあたいしか代入できない。
はいれつを学ぼう！
１つのへんすうにふくすうのあたいしたい
→「はいれつ」を使う
たべもの＝ カレーライス、ハンバーグ、オムライス、ピザ
はいれつを学ぼう！
マップをつくりたいばあい
「マップ」というはいれつのなまえをつけ
る
はいれつを学ぼう！
マップをつくりたいばあい
マップ[たていち][よこいち]＝
がぞうのなまえ
マップ[1][1]＝ 草
マップ[３][2]＝ 石かべ
マップ[18][2]＝ 木
マップ[18][12]＝ かんばん
へんすうを学ぼう！トップ画面
「マップを
作ろう！」をクリック
はいれつを学ぼう！
マップをクリックしてはいちしたいがぞうをえらぼう。 クリック
はいれつを学ぼう！
がぞうをえらんだら、はいちしたい場所をクリックしよう
クリック
はいれつを学ぼう！
マップを作りおわったら「はいれつをかくにん」をクリックしよう。
クリック
はいれつを学ぼう！
よこのマス目は「,」で区切られているよ。
はいれつを学ぼう！
マス目のいちとはいちしたがぞうの番号を確認してみよう。
はいれつを学ぼう！
マップを作りおわったら「マス目のひょうじ」のチェックをはずそう。
クリック
はいれつを学ぼう！
マップがきれいに表示されるのでなまえをつけてほぞんしよう。
②クリック
①マップのなまえをいれよう
はいれつを学ぼう！
「ほぞん」ボタンをクリックすると、作ったマップのがぞうをダウンロードできます。
良かったらTwitterで#javajoを付けてつぶやいてください！
へんすうを学ぼう！トップ画面
「ソースコードを
書いてみよう！」をクリック
★使い方★
クリックするとエディタが開くよ！
ソースコードを書いてみよう！
★使い方★
ソースコードを書いてみてね★
ソースコードを書いてみよう！
★使い方★
書いたら、「じっこう」ボタンをクリック！
じっこう！
ソースコードを書いてみよう！
★使い方★
ゲームスタートは、
「START」をクリック！
ここをクリック！
ソースコードを書いてみよう！
★使い方★
ゲームがはじまったらせいこう★
ゲームが始まらなかったらしっぱい(´・ω・`)
ソースコードを書いてみよう！
★かいせつ★
var bear = new Sprite(32, 32);bear.image = core.assets['chara1.png'];bear.x = 0;bear.y = 0; 32×32ピクセルの
大きさのくまさんを使います
ソースコードを書いてみよう！
★かいせつ★
var bear = new Sprite(32, 32);bear.image = core.assets['chara1.png'];bear.x = 0;bear.y = 0; 画像の名前
ソースコードを書いてみよう！
★かいせつ★
var bear = new Sprite(32, 32);bear.image = core.assets['chara1.png'];bear.x = 0;bear.y = 0;
よこ = 0;たて = 0;
ざひょう
ソースコードを書いてみよう！
★かいせつ★
bear.on('enterframe', function() { bear.x = bear.x + 10; if (bear.x > core.width) { bear.x = 0; }});
くまさんを動かす命令
ソースコードを書いてみよう！
★かいせつ★
bear.on('enterframe', function() { bear.x = bear.x + 10; if (bear.x > core.width) { bear.x = 0; }});
さいしょの位置bear.x = 0
bear.x = 0からbear.x = 0 + 10 = 10
に移動
bear.x = 10からbear.x = 10 + 10 = 20
に移動、と続いていく
ソースコードを書いてみよう！
★かいせつ★
bear.on('enterframe', function() { bear.x = bear.x + 10; if (bear.x > core.width) { bear.x = 0; }});
じょうけん
ゲーム画面からくまがはみ出したら
bear.x = 0のざひょうにいく
ソースコードを書いてみよう！
★かいせつ★
bear.frame = [0, 1, 0, 2];
scene.addChild(bear);くまさんの動き方
0番目
動かしたい順番で記入
1番目 2番目 3番目 4番目
ソースコードを書いてみよう！
★かいせつ★
bear.frame = [0, 1, 0, 2];
scene.addChild(bear);ゲーム画面にくまをついか
ソースコードを書いてみよう！