三重県の子ども向けプログラミングワークショップ「Littole Code Mie」にて実施した講義内容。 テーマは「キーボードでのプログラミングに挑戦してみよう。」。 Scratch経験者かつある程度キーボード入力が可能な人を条件に、 小学校高学年の子どもたちと一緒に行いました。 Little Coder Mie http://ws.moyashi-koubou.com/

1. キーボードでのプログラミング に挑戦してみよう。
2014.11.03
たなか＠Little Coder Mie

2. プログラミングとは？
•コンピューターに指示をすること。
•やりたいことの手順を正確に書くこと。
参考・出典：清水 亮（2014）『教養としてのプログラミング講座』 中央公論新社．

3. enchant.jsとは？
•「エンチャント ジェイエス」
•簡単にゲームを作れるプログラム
•世界中のだれでも利用できる
http://enchantjs.com/ja/

4. プログラミングの道具
•テキストエディタ：Sublime Text
•ブラウザ：Chrome
•ゲームエンジン：enchant.js

5. とにかくプログラムを 動かしてみよう！

6. examples ＞ expert ＞ getbanana ＞
index.html ファイルをブラウザに
ドラッグアンドドロップ

7. プログラムの中身を 見てみよう！

8. examples ＞ expert ＞ getbanana
フォルダをテキストエディタに
ドラッグアンドドロップ
左にあるmain.jsをクリック

9. ゲームを改造しよう！

10. レベル１ クマを変えよう
bear.image = game.assets[‘chara1.gif’];
bear.frame = 0;
chara1.gif

11. 改造したら確認しよう
•プログラムを改造したら保存する。
•保存したらブラウザを更新する。
自分の思ったとおりに
プログラムが動いたらOK!!

12. 注意：変な画面が出てきたら？
キャンセルをクリック
試用版を利用中

13. レベル２ バナナもいいけど
icon0.gif

14. レベル3 クマを太らせる
SpriteオブジェクトのscaleXプロパティ

15. レベル3.1 クマを回転
Spriteオブジェクトの
rotationプロパティを使ってみよう。
値は角度 0～360
指定すると・・・

16. X座標 Y座標
０
320
０
320

17. レベル４ ゲームタイトルを表示
Labelオブジェクトを使ってみよう
title = new Label();

18. オブジェクトを画面に追加するには？
game.rootScene.addChild(オブジェクト名);

19. 文字の色を変えるには？
title.color = “red”;
•赤 ： ”red”
•黄 ： ”yellow”
•青 ： ”blue”
•水色： ”aqua”
•緑 ： ”green”
•紫 ： ”purple”
•灰色： “gray”
•白 ： ”white”

20. 文字の大きさを変えるには？
title.font = “30px serif”;
文字の種類
文字の大きさ

21. レベル５ 得点を表示する
簡単に得点を表示できるScoreLabel
オブジェクトを使ってみよう。
まずは、必要なものを準備する。
examples ＞ expert ＞ shooting ＞ の
・apad.png
・font0.png
・icon0.png
・pad.png
をgetbananaの中にコピーする

22. レベル５ 得点を表示する
index.htmlにui.enchant.jsを利用します
と書いてあげる。
上に書いてあるのをコピーし たあと、必要な部分だけ書き 変えると楽。

23. レベル５ 得点を表示する
ScoreLabelオブジェクトを作成する。
scoreプロパティに得点を設定する。
得点は、game.score
得点は増えていくので、
値をその都度設定する必要がある。
X座標
Y座標

24. レベル５ 得点を表示する
バナナを取るとgame.scoreの値が１ずつ
増えていくので、ここで毎回値を設定してあげるとOK！
フレーム更新毎に読み出す処理
得点を設定

25. レベル６ 制限時間を表示する
TimeLabelオブジェクト
X座標
Y座標
時間が 減って いく
timeプロパティに
秒数を設定する(20秒)。

26. レベル７ 敵をつくろう
バナナを落とす部分を参考にして、
同じように敵(バクダン)も落ちてくる
ようにしてみよう。
敵にあたったら、
すぐゲームオーバーになるのがいいね。

27. より道 背景を変えよう
ペイントを起動して、bg.pngファイル をドラッグ&ドロップする。
絵を書いたら上書き保存する。

28. まとめ
•簡単なプログラムから挑戦して理解する
•少しずつレベルアップして自分の思った とおりのプログラムが作れるようになる
•まずはじめは、すでにあるプログラムを 参考にして改造してみるとよい。