Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
【子ども向けハンズオン】
ゲームで学ぼう、プログラミング!
2016/7/24 Java女子部
名ふだ作成タイム
テーブルにあるペンとシールで
名ふだを作りましょう!
※時間は5分です。
じこしょうかいタイム
作った名ふだを見せながら
グループ内で
じこしょうかいしましょう!
1. はじめに
2. ハンズオン
1. チャットをしてみよう!
2. へんすうを学ぼう!
3. ざひょうを学ぼう!
4. くりかえしを学ぼう!
5. じょうけんを学ぼう!
3. まとめ
もくじ
はじめに
プログラミングって
なんだろう?
プログラミングとは
プログラムを作ること。
プログラムを作るには、
きかい(コンピュータ)に
わかる言葉で命令する。
プログラミングとは
日本語
プログラミング言語
明日の天気は?
String urlstr =
"http://weather.livedoor.
com/forecast/webservice/rest/v1";
String paramet...
世界から『プログラム』が消えたなら
スマホが使えない
→電話やメール、アプリが
使えないのでれんらくをと
るのが大変
ゲームができない
→ごらくがすくなくなる
他にもたくさんプログラムが
あるからきょうみがある子は
どこに使われているかしらべ
...
今日のゴール
■ プログラムが何か知ろう
■ 作る楽しさ・面白さをたいけんしよう
    カミワザワンダ
1. はじめに
2. ハンズオン
1. チャットをしてみよう!
2. へんすうを学ぼう!
3. ざひょうを学ぼう!
4. くりかえしを学ぼう!
5. じょうけんを学ぼう!
3. まとめ
もくじ
チャットをしてみよう
チャットとは、
インターネット上でたくさんの人と
文字を入力して会話すること。
チャットをしてみよう
ブラウザ(Chrome:クローム)
をひらいてください
チャットをしてみよう
http://bit.ly/2anPLUB
を入れてEnterをクリック
チャットをしてみよう
チャットをしてみよう
この画面を
「トップ画面」という
のでおぼえておい
てね!
チャットをしてみよう
今日のスライドは
ここをクリックする
と見れるよ!
チャットをしてみよう
クリック
チャットをしてみよう
チャットをしてみよう
①なまえを入れよう
②メッセージを
入れよう
③「そうしん」
ボタンをクリック
チャットをしてみよう
ここにそうしんした
メッセージがひょうじ
されるよ!
チャットをしてみよう
ほかの子がそうしんした
メッセージも見れるよ!
チャットをしてみよう
■ ハンズオン中の好きなときに
 しつもんやかんそうをチャットで
 そうしんしてみてね!
※ちゅうい
■ ハンズオン中はチャット画面は閉じない
でね!
■ スマホからも使えるのでお父さんお母さ
んもぜひ使ってくださいね!
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 10
1
2
3
4
5
6
7
8
9
10
よこよこ
たて
ざひょうを学ぼう!
1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
9
10
よこ
たて
ざひょうを学ぼう!
1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
9
10
よこ
たて
ざひょうを学ぼう!
1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
9
10
よこ
たて
「よこ5、たて5の場所に
くまがいる」と表せられたね!
ざひょうを学ぼう!
1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
9
10
「よこ5、たて5の場所に
くまがいる」と表せられたね!
→これが「ざひょう」
よこ
たて
ざひょうを学ぼう!
トップ画面
「ざひょうを
数で見てみう!」
をクリック
ざひょうを学ぼう!
「START」クリックで
ゲームがはじまるよ!
ざひょうを学ぼう!
くまはクリックしている
あいだいどうするよ
ざひょうを学ぼう!
くまさんをうごかして、
りんごをあつめよう!
くまはクリックしている
あいだいどうするよ
ざひょうを学ぼう!
クリア
できたかな?
ざひょうを学ぼう!
あそびながら、
くまのいち(ざひょう)も
かくにんしよう。
ざひょうを学ぼう!
トップ画面
「だっしゅつ
しよう!」
をクリック
ざひょうを学ぼう!
「START」クリックで
ゲームがはじまるよ!
ざひょうを学ぼう!
ゴール
ざひょうを学ぼう!
ゴール
やじるしキーを使って
動かせるよ!
ざひょうを学ぼう!
ゴール
通れない。。。
ざひょうを学ぼう!
キャラクターが一番はじめにいる
ざひょうを変更してみよう!
動かせる範囲
よこ:1〜20
たて:1〜20
ざひょうを学ぼう!
たとえば
よこ:6 たて:10
の場所はここ
ざひょうを学ぼう!
たとえば
よこ:11 たて:5
の場所はここ
ざひょうを学ぼう!
たとえば
よこ:11 たて:5
の場所はここ
ゴールに行くにはどの場所
にいればいいかな?
ざひょうを学ぼう!
ゴールにたどりつ
けたかな?
おやつ きゅうけい
1. はじめに
2. ハンズオン
1. チャットをしてみよう!
2. へんすうを学ぼう!
3. ざひょうを学ぼう!
4. くりかえしを学ぼう!
5. じょうけんを学ぼう!
3. まとめ
もくじ
くりかえしとは、 かいだん
のぼる
くりかえしを学ぼう!
くりかえしとは、
すべる
くりかえしを学ぼう!
くりかえしとは、
はまった!もういっかい!
くりかえしを学ぼう!
くりかえしとは、 かいだん
のぼる
くりかえしを学ぼう!
くりかえしとは、
すべる
くりかえしを学ぼう!
くりかえしとは、
はまった!もういっかい!
くりかえしを学ぼう!
くりかえしとは、
すべる
はまった!もういっかい!
かいだん
のぼる
くりかえしを学ぼう!
くりかえしとは、
すべる
はまった!もういっかい!
かいだん
のぼる
これがくりかえし★
くりかえしを学ぼう!
くりかえしを学ぼう!
トップ画面
「くりかえしを使って
図を作ってみよう!」
をクリック
クリック!
くりかえしを学ぼう!
「3」を入れて
みよう!
くりかえしを学ぼう!
「へんこう」を
クリック!
くりかえしを学ぼう!
線が3回
まがったかな?
くりかえしを学ぼう!
「まがれ!」という命令を3回くりかえした
まがれ!
まがれ!
まがれ!
くりかえしを学ぼう!
くりかえしで
こいつを
ふやすことも
できるぜ!
どーん
ひとりぼっち
なの
くりかえしを学ぼう!
虫の絵を
書く
くりかえしを学ぼう!
Timer: 6
あと1匹!
ゲームに
表示させる
くりかえしを学ぼう!
Timer: 6
あと1匹!
もういっぴき 表示したいな!
くりかえしを学ぼう!
もういっぴき 表示したいな!
Timer: 6
あと1匹!
ゲームに
表示させる
虫の絵を
書く
くりかえしを学ぼう!
くりかえすことで、
たくさん
虫さんを作れるよ!
くりかえしを学ぼう!
くりかえしを学ぼう!
トップ画面
「ふやした虫を
けそう!」
をクリック
ここに入れた数だけ
虫さんがくりかえし
によって作られるよ!
くりかえしを学ぼう!
あそび方
虫をクリックして
10秒以内に
全部消せたらクリア
くりかえしを学ぼう!
ゲームをやってみよう!
くりかえしを学ぼう!
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入門【...
付録. 時間があったら
やってみよう!
1. はいれつを学ぼう!
1. マップを作ろう!
2. 書いてみよう!
1. ソースコードを書いてみよう!
もくじ
はいれつを学ぼう!
へんすうには1つのあたいしか
代入できない。
はいれつを学ぼう!
1つのへんすうにふくすうの
あたいしたい
→「はいれつ」を使う
たべもの= カレーライス、ハンバーグ、
オムライス、ピザ
はいれつを学ぼう!
マップをつくりたいばあい
「マップ」とい
うはいれつの
なまえをつけ
る
はいれつを学ぼう!
マップをつくりたいばあい
マップ
[たていち][よこい
ち]=
がぞうの
なまえ
マップ[1][1]= 草
マップ[3][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....
★かいせつ★
bear.on('enterframe', function() {
bear.x = bear.x + 10;
if (bear.x > core.width) {
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);
ゲーム画面に
くまをついか
ソースコードを書いてみよう!
Upcoming SlideShare
Loading in …5
×

【子ども向けハンズオン】 ゲームで学ぼう、プログラミング!

2016.07.24

  • Be the first to comment

  • Be the first to like this

【子ども向けハンズオン】 ゲームで学ぼう、プログラミング!

  1. 1. 【子ども向けハンズオン】 ゲームで学ぼう、プログラミング! 2016/7/24 Java女子部
  2. 2. 名ふだ作成タイム テーブルにあるペンとシールで 名ふだを作りましょう! ※時間は5分です。
  3. 3. じこしょうかいタイム 作った名ふだを見せながら グループ内で じこしょうかいしましょう!
  4. 4. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ もくじ
  5. 5. はじめに プログラミングって なんだろう?
  6. 6. プログラミングとは プログラムを作ること。 プログラムを作るには、 きかい(コンピュータ)に わかる言葉で命令する。
  7. 7. プログラミングとは 日本語 プログラミング言語 明日の天気は? String urlstr = "http://weather.livedoor. com/forecast/webservice/rest/v1"; String parameter = "city=70&day=tomorrow"; ・・・
  8. 8. 世界から『プログラム』が消えたなら スマホが使えない →電話やメール、アプリが 使えないのでれんらくをと るのが大変 ゲームができない →ごらくがすくなくなる 他にもたくさんプログラムが あるからきょうみがある子は どこに使われているかしらべ てみよう!
  9. 9. 今日のゴール ■ プログラムが何か知ろう ■ 作る楽しさ・面白さをたいけんしよう     カミワザワンダ
  10. 10. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ もくじ
  11. 11. チャットをしてみよう チャットとは、 インターネット上でたくさんの人と 文字を入力して会話すること。
  12. 12. チャットをしてみよう ブラウザ(Chrome:クローム) をひらいてください
  13. 13. チャットをしてみよう http://bit.ly/2anPLUB を入れてEnterをクリック
  14. 14. チャットをしてみよう
  15. 15. チャットをしてみよう この画面を 「トップ画面」という のでおぼえておい てね!
  16. 16. チャットをしてみよう 今日のスライドは ここをクリックする と見れるよ!
  17. 17. チャットをしてみよう クリック
  18. 18. チャットをしてみよう
  19. 19. チャットをしてみよう ①なまえを入れよう ②メッセージを 入れよう ③「そうしん」 ボタンをクリック
  20. 20. チャットをしてみよう ここにそうしんした メッセージがひょうじ されるよ!
  21. 21. チャットをしてみよう ほかの子がそうしんした メッセージも見れるよ!
  22. 22. チャットをしてみよう ■ ハンズオン中の好きなときに  しつもんやかんそうをチャットで  そうしんしてみてね! ※ちゅうい ■ ハンズオン中はチャット画面は閉じない でね! ■ スマホからも使えるのでお父さんお母さ んもぜひ使ってくださいね!
  23. 23. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ もくじ
  24. 24. へんすうを学ぼう! トップ画面 「モンスターを たおそう!」 をクリック
  25. 25. へんすうを学ぼう! 「START」クリックで ゲームがはじまるよ!
  26. 26. へんすうを学ぼう! キーボードの「←」と 「→」をおしてモンスターに近 づこう!
  27. 27. へんすうを学ぼう! モンスターを たおそう! 近づいたらキーボードの 「スペース」を おしてモンスターを こうげきしよう!
  28. 28. へんすうを学ぼう! 「もう一度遊ぶ」クリックで また遊べるよ! 「もう一度遊ぶ」クリックで また遊べるよ!
  29. 29. へんすうを学ぼう! モンスター たおせたかな?
  30. 30. へんすうを学ぼう! 「エディタをひらく」 をクリック
  31. 31. へんすうを学ぼう! ①「モンスターの 体力=」に 「5」を入力 ②「へんこう」 ボタンをクリック
  32. 32. へんすうを学ぼう! もういちどゲームをやってみよう! こんどはモンスターたおせたかな?
  33. 33. へんすうを学ぼう! へんすうとは、 「モンスターの体力」みたいにふやしたり、へ らしたりできるものをほぞんするばしょに名 まえをつけること。 へんすうの なまえ
  34. 34. へんすうを学ぼう! へんすうとは、 あたいをへんすうに一時的にほぞんするこ とを「代入」という。 へんすう あたい
  35. 35. へんすうを学ぼう! ほかの「へんすう」をいろいろな 数にかえてあそんでみよう!
  36. 36. 時間がある子は 「モンスターをよけよう!」 でもあそんでみよう! へんすうを学ぼう!
  37. 37. へんすうを学ぼう! トップ画面 「モンスターを よけよう!」 をクリック
  38. 38. 上下キー(↑↓)でくまを動かしてモンスターをよけてゴール までたどりつこう! へんすうを学ぼう! モンスターの動きが早 くてクリアできないば あいはあたいを小さく してみよう!
  39. 39. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ もくじ
  40. 40. 「ざひょう」って何だろう?   →画面の中の「いち」をあらわすの。 ざひょうを学ぼう!
  41. 41. ざひょうを学ぼう!
  42. 42. ざひょうを学ぼう! くまのいる場所 をどうやって表す?
  43. 43. ざひょうを学ぼう! 画面に「たて」「よこ」のマス目 があると考えるよ。 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 よこよこ たて
  44. 44. ざひょうを学ぼう! 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 よこ たて
  45. 45. ざひょうを学ぼう! 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 よこ たて
  46. 46. ざひょうを学ぼう! 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 よこ たて 「よこ5、たて5の場所に くまがいる」と表せられたね!
  47. 47. ざひょうを学ぼう! 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 「よこ5、たて5の場所に くまがいる」と表せられたね! →これが「ざひょう」 よこ たて
  48. 48. ざひょうを学ぼう! トップ画面 「ざひょうを 数で見てみう!」 をクリック
  49. 49. ざひょうを学ぼう! 「START」クリックで ゲームがはじまるよ!
  50. 50. ざひょうを学ぼう! くまはクリックしている あいだいどうするよ
  51. 51. ざひょうを学ぼう! くまさんをうごかして、 りんごをあつめよう! くまはクリックしている あいだいどうするよ
  52. 52. ざひょうを学ぼう! クリア できたかな?
  53. 53. ざひょうを学ぼう! あそびながら、 くまのいち(ざひょう)も かくにんしよう。
  54. 54. ざひょうを学ぼう! トップ画面 「だっしゅつ しよう!」 をクリック
  55. 55. ざひょうを学ぼう! 「START」クリックで ゲームがはじまるよ!
  56. 56. ざひょうを学ぼう! ゴール
  57. 57. ざひょうを学ぼう! ゴール やじるしキーを使って 動かせるよ!
  58. 58. ざひょうを学ぼう! ゴール 通れない。。。
  59. 59. ざひょうを学ぼう! キャラクターが一番はじめにいる ざひょうを変更してみよう! 動かせる範囲 よこ:1〜20 たて:1〜20
  60. 60. ざひょうを学ぼう! たとえば よこ:6 たて:10 の場所はここ
  61. 61. ざひょうを学ぼう! たとえば よこ:11 たて:5 の場所はここ
  62. 62. ざひょうを学ぼう! たとえば よこ:11 たて:5 の場所はここ ゴールに行くにはどの場所 にいればいいかな?
  63. 63. ざひょうを学ぼう! ゴールにたどりつ けたかな?
  64. 64. おやつ きゅうけい
  65. 65. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ もくじ
  66. 66. くりかえしとは、 かいだん のぼる くりかえしを学ぼう!
  67. 67. くりかえしとは、 すべる くりかえしを学ぼう!
  68. 68. くりかえしとは、 はまった!もういっかい! くりかえしを学ぼう!
  69. 69. くりかえしとは、 かいだん のぼる くりかえしを学ぼう!
  70. 70. くりかえしとは、 すべる くりかえしを学ぼう!
  71. 71. くりかえしとは、 はまった!もういっかい! くりかえしを学ぼう!
  72. 72. くりかえしとは、 すべる はまった!もういっかい! かいだん のぼる くりかえしを学ぼう!
  73. 73. くりかえしとは、 すべる はまった!もういっかい! かいだん のぼる これがくりかえし★ くりかえしを学ぼう!
  74. 74. くりかえしを学ぼう! トップ画面 「くりかえしを使って 図を作ってみよう!」 をクリック
  75. 75. クリック! くりかえしを学ぼう!
  76. 76. 「3」を入れて みよう! くりかえしを学ぼう!
  77. 77. 「へんこう」を クリック! くりかえしを学ぼう!
  78. 78. 線が3回 まがったかな? くりかえしを学ぼう!
  79. 79. 「まがれ!」という命令を3回くりかえした まがれ! まがれ! まがれ! くりかえしを学ぼう!
  80. 80. くりかえしで こいつを ふやすことも できるぜ! どーん ひとりぼっち なの くりかえしを学ぼう!
  81. 81. 虫の絵を 書く くりかえしを学ぼう!
  82. 82. Timer: 6 あと1匹! ゲームに 表示させる くりかえしを学ぼう!
  83. 83. Timer: 6 あと1匹! もういっぴき 表示したいな! くりかえしを学ぼう!
  84. 84. もういっぴき 表示したいな! Timer: 6 あと1匹! ゲームに 表示させる 虫の絵を 書く くりかえしを学ぼう!
  85. 85. くりかえすことで、 たくさん 虫さんを作れるよ! くりかえしを学ぼう!
  86. 86. くりかえしを学ぼう! トップ画面 「ふやした虫を けそう!」 をクリック
  87. 87. ここに入れた数だけ 虫さんがくりかえし によって作られるよ! くりかえしを学ぼう!
  88. 88. あそび方 虫をクリックして 10秒以内に 全部消せたらクリア くりかえしを学ぼう!
  89. 89. ゲームをやってみよう! くりかえしを学ぼう!
  90. 90. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ ★もくじ★
  91. 91. じょうけんを学ぼう! じょうけんとは、 イベントが発生したら、 アクション(行動)をする ということ ○○したら ○○する
  92. 92. じょうけんってなんだろう? ■ にちじょう生活だと じょうけんを学ぼう! 雨がふったら かさをさす
  93. 93. じょうけんってなんだろう? ■ ゲームだと じょうけんを学ぼう! 敵にぶつかったら ゲームオーバー
  94. 94. じょうけんを学ぼう! トップ画面 「ゴールに たどりつこう!」 をクリック
  95. 95. じょうけんを学ぼう! まずは「右」のままで やってみよう!
  96. 96. じょうけんを学ぼう! 「START」を クリックで ゲームスタート!!
  97. 97. じょうけんを学ぼう! かいだんまで たどり着けたかな?
  98. 98. 今回のゲームでは、 かべにあたったら 右にまがる 右 じょうけんを学ぼう!
  99. 99. じょうけんを 「左」に変えて、 やってみよう! じょうけんを学ぼう!
  100. 100. じょうけんを学ぼう! 「START」を クリックで ゲームスタート!!
  101. 101. じょうけんを学ぼう! 今度は かいだんまで たどり着けたかな?
  102. 102. 今回のゲームでは、 かべにあたったら 左にまがる 左 じょうけんを学ぼう!
  103. 103. じょうけんを学ぼう! トップ画面 「ぶたさんを じゆうにうごかそう!」 をクリック
  104. 104. じょうけんを学ぼう! ぶたに 当たったら ゲームオーバー になる
  105. 105. じょうけんを学ぼう!
  106. 106. じょうけんを学ぼう!
  107. 107. じょうけんを学ぼう! はやさ
  108. 108. じょうけんを学ぼう! 大きさ
  109. 109. じょうけんを学ぼう! ゲームをやってみよう!
  110. 110. 1. はじめに 2. ハンズオン 1. チャットをしてみよう! 2. へんすうを学ぼう! 3. ざひょうを学ぼう! 4. くりかえしを学ぼう! 5. じょうけんを学ぼう! 3. まとめ ★もくじ★
  111. 111. まとめ (きょうべんきょうしたこと) ■ プログラミングとはなにか ■ プログラミングの考え方 ■ へんすう ■ 「モンスターの体力」みたいにふやしたり、 へらしたりできるものをほぞんするばしょ。
  112. 112. まとめ (きょうべんきょうしたこと) ■ ざひょう ■ キャラクターのいる「いち」をあらわすかず のこと。 ■ くりかえし ■ おなじうごきをくりかえすこと。 ■ じょうけん ■ イベントがはっせいしたときに  することをしていすること。
  113. 113. まとめ プログラムは、きょうべんきょうした ・へんすう ・ざひょう ・くりかえし ・じょうけん をくみあわせてつくられているよ。
  114. 114. まとめ プログラムは、きょうべんきょうした ・へんすう ・ざひょう ・くりかえし ・じょうけん をくみあわせてつくられているよ。 きょうべんきょうしたことを つかってプログラミング してみよう
  115. 115. まとめ トップ画面 「くまさんを 動かそう!」 をクリック
  116. 116. まとめ 「エディタをひらく」を クリック!
  117. 117. まとめ はいけいを 変えてみよう
  118. 118. まとめ はいけいを 変えてみよう
  119. 119. まとめ 花を 増やそう!
  120. 120. まとめ
  121. 121. まとめ くまさんの せっていを かえてみよう
  122. 122. まとめ くまさんのいち
  123. 123. まとめ 白いくまさん 茶色い くまさん リボンの ついたくまさん
  124. 124. まとめ 「動かない」 →くまさんが、いどうしないせってい。 「じどうで動く」 →くまさんが、まっすぐはしるせってい。 「キーボードで動く」 →やじるしキーをおすと、くまがいどうするせっ てい。
  125. 125. まとめ さいごに、スペースキーを おしたときのくまのうごきを せっていしよう
  126. 126. まとめ やじるしキーおしたり、 スペースきーおしたりして、 せっていどおりに、くまが うごくかたしかめてみよう!
  127. 127. ■ enchant.jsでゲームを作ってみたい場合 ■ enchant.jsを使った子ども向けプログラミングワークショッ プ講義内容 ■ HTML5とJavaScriptでスマートフォンゲーム作成! ゼロか らはじめるenchant.js入門【公式ガイド】 ■ はじめて学ぶ enchant.jsゲーム開発 ■ enchant.jsで本格的にゲームを作ってみたい場合 ■ 戦略シミュレーションゲームの作り方 おすすめサイト・本
  128. 128. 付録. 時間があったら やってみよう!
  129. 129. 1. はいれつを学ぼう! 1. マップを作ろう! 2. 書いてみよう! 1. ソースコードを書いてみよう! もくじ
  130. 130. はいれつを学ぼう! へんすうには1つのあたいしか 代入できない。
  131. 131. はいれつを学ぼう! 1つのへんすうにふくすうの あたいしたい →「はいれつ」を使う たべもの= カレーライス、ハンバーグ、 オムライス、ピザ
  132. 132. はいれつを学ぼう! マップをつくりたいばあい 「マップ」とい うはいれつの なまえをつけ る
  133. 133. はいれつを学ぼう! マップをつくりたいばあい マップ [たていち][よこい ち]= がぞうの なまえ マップ[1][1]= 草 マップ[3][2]= 石かべ マップ[18][2]= 木 マップ[18][12]= かんばん
  134. 134. へんすうを学ぼう! トップ画面 「マップを 作ろう!」 をクリック
  135. 135. はいれつを学ぼう! マップをクリックして はいちしたいがぞうをえらぼう。 クリック
  136. 136. はいれつを学ぼう! がぞうをえらんだら、 はいちしたい場所をクリックしよう クリック
  137. 137. はいれつを学ぼう! マップを作りおわったら 「はいれつをかくにん」をクリックしよう。 クリック
  138. 138. はいれつを学ぼう! よこのマス目は「,」で区切られているよ。
  139. 139. はいれつを学ぼう! マス目のいちとはいちしたがぞうの番号を 確認してみよう。
  140. 140. はいれつを学ぼう! マップを作りおわったら 「マス目のひょうじ」のチェックをはずそう。 クリック
  141. 141. はいれつを学ぼう! マップがきれいに表示されるので なまえをつけてほぞんしよう。 ②クリック ①マップの なまえを いれよう
  142. 142. はいれつを学ぼう! 「ほぞん」ボタンをクリックすると、 作ったマップのがぞうを ダウンロードできます。 良かったらTwitterで#javajoを付けて つぶやいてください!
  143. 143. へんすうを学ぼう! トップ画面 「ソースコードを 書いてみよう!」 をクリック
  144. 144. ★使い方★ クリックすると エディタが開くよ! ソースコードを書いてみよう!
  145. 145. ★使い方★ ソースコードを 書いてみてね★ ソースコードを書いてみよう!
  146. 146. ★使い方★ 書いたら、「じっこう」ボタンをクリック! じっこう! ソースコードを書いてみよう!
  147. 147. ★使い方★ ゲームスタートは、 「START」をクリック! ここを クリック! ソースコードを書いてみよう!
  148. 148. ★使い方★ ゲームがはじまったらせいこう★ ゲームが始まらなかったらしっぱい(´・ω・`) ソースコードを書いてみよう!
  149. 149. ★かいせつ★ var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; 32×32ピクセルの 大きさのくまさん を使います ソースコードを書いてみよう!
  150. 150. ★かいせつ★ var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; 画像の名前 ソースコードを書いてみよう!
  151. 151. ★かいせつ★ var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; よこ = 0; たて = 0; ざひょう ソースコードを書いてみよう!
  152. 152. ★かいせつ★ bear.on('enterframe', function() { bear.x = bear.x + 10; if (bear.x > core.width) { bear.x = 0; } }); くまさんを 動かす命令 ソースコードを書いてみよう!
  153. 153. ★かいせつ★ 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 に移動、 と続いていく ソースコードを書いてみよう!
  154. 154. ★かいせつ★ bear.on('enterframe', function() { bear.x = bear.x + 10; if (bear.x > core.width) { bear.x = 0; } }); じょうけん ゲーム画面からくまが はみ出したら bear.x = 0の ざひょうにいく ソースコードを書いてみよう!
  155. 155. ★かいせつ★ bear.frame = [0, 1, 0, 2]; scene.addChild(bear);くまさんの 動き方 0番目 動かしたい順番で記入 1番目 2番目 3番目 4番目 ソースコードを書いてみよう!
  156. 156. ★かいせつ★ bear.frame = [0, 1, 0, 2]; scene.addChild(bear); ゲーム画面に くまをついか ソースコードを書いてみよう!

    Be the first to comment

    Login to see the comments

2016.07.24

Views

Total views

565

On Slideshare

0

From embeds

0

Number of embeds

30

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×