まげをタッチすると上下に動くというものを授業でやったので、それを基にして作りました。
くだものが落ちた後に元に戻すというのが難しくて、大変苦労しました。
左上に初期画面のたぬきが出たままなのは、当時どういう訳かこれを消そうとするとバグになってしまって解決できなかったので、そのままにしたものです。
一研究・コラムはこちら
（解説）タッチしてちょんまげ
//月別: 2017年8月
//（一研究）タッチしてちょんまげ
//
完成したソースコード
// Main console.log("Hello EnchantJS!!"); var assets = [ "images/e_tanuki.png", "images/title.png",// CodeFriendsタイトル "sounds/hit.mp3", "sounds/jump.mp3", "images/bk_body.png", "images/bk_mage.png", "images/cf307/apple.png", "images/cf307/applekorokoro.png", "images/cf307/banana.png", "images/cf307/bananakuru.png", "images/cf307/sakuranbo.png", "images/cf307/sakuranbokuru.png", "images/cf307/tatti.png", "images/cf307/honoo.png", "images/cf307/tono1.png", "sounds/boost.mp3" ]; function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここから //========== scene.backgroundColor = “green"; //たぬき var tanuki = new ExSprite(32, 32); tanuki.image = core.assets["images/e_tanuki.png"]; scene.addChild(tanuki); tanuki.x = 0; tanuki.y = 0; //ほのお var honoo = new ExSprite(45,60); honoo.image = core.assets[“images/cf307/honoo.png"]; scene.addChild(honoo); honoo.x = 145; honoo.y = 190; var tono = new ExSprite(190,140); tono.image = core.assets["images/bk_body.png"]; scene.addChild(tono); tono.x = 71; tono.y = 190; var mage = new ExSprite(45,60); mage.image = core.assets["images/bk_mage.png"]; scene.addChild(mage); mage.x = 145; mage.y = 130; var applekorokoro = new ExSprite(32,32); applekorokoro.image = core.assets[“images/cf307/applekorokoro.png"]; scene.addChild(applekorokoro); applekorokoro.x = 152; applekorokoro.y = 103; var bananakuru = new ExSprite(32,32); bananakuru.image = core.assets["images/cf307/bananakuru.png"]; scene.addChild(bananakuru); bananakuru.x = 152; bananakuru.y = 71; var sakuranbokuru = new ExSprite(32,32); sakuranbokuru.image = core.assets["images/cf307/sakuranbokuru.png"]; scene.addChild(sakuranbokuru); sakuranbokuru.x = 152; sakuranbokuru.y = 39; var tatti = new ExSprite(32, 32); tatti.image = core.assets["images/cf307/tatti.png"]; scene.addChild(tatti); tatti.x = 175; tatti.y = 150; //まげをタッチすると回転しながら動くように mage.addEventListener(Event.TOUCH_START, function(){ mage.tl.moveBy(0,-100,30); honoo.tl.moveBy(0,-100,30); tono.image = core.assets["images/cf307/tono1.png"]; var sound = core.assets["sounds/boost.mp3"].clone(); sound.play(); applekorokoro.tl.moveBy(0,200,30); //applekorokoro.tl.then(function(){ applekorokoro.image = core.assets[“images/cf307/applekorokoro.png"]; applekorokoro.frame = []; applekorokoro.frame = [0, 1, 2, 3,]; bananakuru.tl.moveBy(100,232,30); bananakuru.image = core.assets["images/cf307/bananakuru.png"]; bananakuru.frame = []; bananakuru.frame = [0, 1, 2, 3,]; sakuranbokuru.tl.moveBy(-100,264,30); sakuranbokuru.image = core.assets["images/cf307/sakuranbokuru.png"]; sakuranbokuru.frame = []; sakuranbokuru.frame = [0, 1, 2, 3,]; //元の位置に戻って、回転を止めるようにしたい mage.tl.delay(16); mage.tl.moveTo(145, 130, 0); honoo.tl.delay(16); honoo.tl.moveTo(145, 190, 0); tono.tl.delay(46); tono.tl.then(function(){ tono.image = core.assets[“images/bk_body.png"]; }); applekorokoro.tl.delay(16); applekorokoro.tl.moveTo(152, 103, 0); applekorokoro.tl.then(function(){ applekorokoro.image = core.assets["images/cf307/apple.png"]; }); bananakuru.tl.delay(16); bananakuru.tl.moveTo(152, 71, 0); bananakuru.tl.then(function(){ bananakuru.image = core.assets[“images/cf307/banana.png"]; }); sakuranbokuru.tl.delay(16); sakuranbokuru.tl.moveTo(152, 39, 0); sakuranbokuru.tl.then(function(){ sakuranbokuru.image = core.assets[ “images/cf307 sakuranbo.png"]; }); });
◉ 工夫したところ
・タッチしたら殿の画像を変えて驚くような顔にした。
・果物を回転するようにした。
・一回やったら終わりではなく、落ちてしばらくしたら元の位置に戻るようにして、何度でも繰り返せるようにした。
◉ 難しかったところ
・果物の転がる軌道を３方向にしたので、距離が異なるところを調整したところ。
・果物の位置を戻した後に、画像も制止画像に戻すのが難しかった。 （then(function)を使った）
CodeFriendsの授業の特徴
//CodeFriendsの授業には特徴があります。
＜その１＞ 親子でも受講できる。
これってありそうでなかなかないような気がします。
いつかどこかでみたプログラミングスクールでは、むしろ逆に「親の力を借りない！子供だけでやらせる！」というのをモットーにして、親は教室に入らせないようにしていましたが、それはそれでありだと思いますが、個人的にはこの親子で受講できるというのは、すごくいいところだと思っています。
というのは、単純に親子で楽しめるから。
難しく言うと、親子で学ぶ効果云々ということになると思いますが、そこまで突っ込まないで考えても、親自身も「お？なんだかプログラミングって面白そうだね」と感じられれば、子ども自身にも伝わるし、親がもし私のように初めてプログラミングというものに触れて始めれば、同じ料金で二人も教えてもらってすごいお得！！だし、親がもたもたと面白そうにプログラミングに悪戦苦闘していると、子どもも「自分もやる！」となるでしょう。
子どもって親（大人）が「楽しそうに」やっていることを、必ず真似したがるからです。
もちろん、子どもだけでもOKで、どちらにしても子供が好きなことをやっている、それを暖かく見守り応援している親の雰囲気がCodeFriendsにはあって、いいなあと思うのです。
＜その２＞ 紙のテキストがない。
普通、講座とか受講というと、たいていプリントか本の教材があって、それにしたがって進んでいくイメージがありますが、ここではなんとそれがない！
だからとてもカジュアルでフレンドリーな雰囲気です。
授業は独自に作られたMokuMokuEditorというツールを使って、先生のPCの画面をスクリーンに写して、実際に先生が説明しながら一緒にそのエディタにソースコードを打っていく形で進められます。
もしかすると本やテキストがあればもっとサクサクと進めるのかも知れませんが、「はい、次は何ページを開いて〜」とやると学校の授業のようになって、途端につまらなくなるような気がします。
じゃあわからなくなったらどうすればよいかと言えば、YouTubeの配信で何度でも観ることができます（現代的！）。
それに、また同じことが何度もその後の授業でも出てくるので（プログラミングって積み重ねで技を増やしていくものだから）、繰り返し教えてくださるので、そこで思い出すことができます。
私はノートを取っていますが、それはYouTubeを観てその箇所を探すのが面倒くさいからです^^;
どの辺だったっけ〜と探すのがまどろっこしいという、ノートだったら一瞬で探せるので、すぐ何度も忘れてしまうのですぐ見返したいという、ただそれだけの理由です。（ノートだけでわからないときは観てます）
でも、そのノート取ったというささいなことがきっかけで、私も息子と一緒にプログラミングをやるようになりました。
最初の授業の日、案内に「ノートがあるといいです」みたいなことが書いてあったので、ノートをもっていき、隣で息子がパソコンを打っているので、息子の代わりにノートを取ってやることにしました。
キーボードは打たないけれど、ノートに同じようにソースコードを書いていったので、あ〜なるほどね〜面白そうだな〜と思いました。
家に帰ってから、自分にもできるかもと思ってやってみると、実際できたので、感激しました。
ノートを見てもできないときは、一度やっている息子に教えてもらったりして、それで息子にもいい復習になったようです。
でも何より楽しいのが一番！楽しくなければ続かない。
先生のお話も、お友達の発言も、みんなの味のある絵・手作り感満載のゲーム、どれもとても楽しいです。
これからも楽しさを共有していきたいと思っています。
教室探しから入会まで
//私がプログラミング教室を探したのは、息子が中学生になるにあたって、部活の代わりとまではいかないけれど、なにかできるものがないかと探したことがきっかけです。
息子は、運動が苦手です。事情があって、幼児期に私たち親があまり体を動かす遊びに付き合ってあげられなかったのも原因の一つではないかと、責任も感じています。そればかりではないのかも知れないけれど、とにかく、運動が苦手です。体格はいいのに少々もったいないですね・・でもその分、他に得意なことや、好きなこと、いいところはあります。人間誰しも、得意不得意があります。
オールマイティー、文武両道的な人ももちろんいるし、目指せるならそれを目指すのがいいのでしょうが、息子のレベルは壊滅的‥もうそこを無理をしてまで人並みにするより、その分他の人より得意なところを伸ばしたほうがいいと思いました^^;。
6年生になって、来年から進学する中学校に、ほぼ運動部しかないことを知らされました。唯一の文化系の部活は、女子しか在籍しておらず、そこに男子一人、息子が入ることも考えにくいことでした。これは困ったな‥と思いました。しかし、部活は強制ではなく任意加入で、地域等でほかのことをやるのであれば、そちらでもよいとのことでした。野球やサッカー、バレーなど、学校の部活ではなくて地域のクラブに加入してそちらをやるのもOKということです。
ならば、何かないかな、運動ではなくて、なにか他にできそうなこと‥そうだ、プログラミングだと思いつき、とはいっても、私は学校で必修化になるとか、そういうことも知らず、ただ何となくでした。とはいえ、息子はプログラミングなんてやったこともなく、やりたいかどうかもわかりません。
そこで、アマゾンで調べると、「小学生からはじめるわくわくプログラミング」という本がありました。スクラッチとかいうものらしい。本が異様に好きな息子のことだから、この本を渡したらこれも読むかな？と思って買ってわたしました。
すると、小学生向きでわかりやすかったのか、興味をもってパソコンで本をなぞって一人でスクラッチをやり始めました。一週間くらいで、本をやり終わってしまいました。オリジナルで、社会の歴史の問題を出すプログラムを作って見せてくれました。「徳川○代将軍は誰？」みたいな問題を出すものでした。
これはいいかも〜と思って、教室を探し始めたのですが、見つかりませんでした。名古屋の方まで行けばあるのかな？と思って探しましたが、子どもの、部活の代わりになりそうなところは見当たりませんでした。
そのままバタバタと日が過ぎていき・・とうとう3月も下旬になり、たまたまラジオでZipFMがプログラミングをやると言っていたよと主人が教えてくれました。あんなに探してなかったのにと、半信半疑で見てみると、確かにそのようでしたが、もう締め切り間近で、資料も何もないまま、息子も「やってみる・・」と言うので、いきなり受講を申し込みました。
そのあと資料が届いたのが、もう29日か30日で、すぐに申込書を返送しても締め切りに間に合わないという状況で、問い合わせると、遅れてもいいですよとのことでした。申し込みは済んでいたので、多分まだ空きがあって、そのあたりは臨機応変にやっていただけたのでしょう。
体験入学もしないまま、申し込んで、すぐに初回の授業で、よくわからないまま、初回の授業でびっくりしたことがあったりして、‥‥今に至ります。
縁というものは不思議なものです。これから、息子がプログラミングとどう関わっていくのか、それは未知数ですが、大変有難い出逢いであったと感謝しております。
覚え（辞書）
//だいたい習った順番になっています。
リンクをクリックすると、使用例のページに移動します。
enchant.js
| ひらがな | やりたいこと | コード |
|---|---|---|
は | 背景の色を変える | backgroundColor |
が | 画像を出す | new ExSprite |
が | 画像を動かす | moveBy moveTo |
た | タッチしたら動く（タッチスタート） | addEventListener(Event.TOUCH_START, function(){}); |
た | 待機 | delay |
じ | 時間が経ったら→待機 | delay |
ふ | フレーム | frame |
あ | アニメーション（フレームを使ったアニメーション）→フレーム | frame |
ら | ランダム | getRandom |
く | 繰り返し（ループによる） | tl.loop(); |
る | ループ→繰り返し（ループ） | tl.loop(); |
た | タイムラインクリア | tl.clear(); |
か | 回転 | rotateBy rotateTo |
け | 消す | remove(); |
お | 音を再生する | sound.play(); |
し | 衝突判定 | addCollision |
あ | 当たり判定→衝突判定 | addCollision |
た | タッチエンド | Event.TOUCH_END |
ふ | 複合演算子 | += -= |
と | 透明にする | fadeTo |
は | 半透明にする→透明にする | fadeTo |
ぐ | グループ | Group |
じ | 条件分岐 | if(){}; |
い | if（イフ）→条件分岐 | if(){}; |
す | スケール | scale |
お | 大きさを変える→スケール | scale |
あ | and（アンド） | and(); |
ど | 同時に実行→and | and(); |
あ | アニメーションが終わったら | Event.ANIMATION_END |
こ | コアストップ | core.stop(); |
げ | ゲーム終了→コアストップ | core.stop(); |
ら | ラベルを表示する | new Label(); |
て | テキストの表示→ラベルを表示する | new Label(); |
か | カウンターとインクリメント | counter counter++; |
す | スコア | |
こ | コンソール・ログ | console.log(); |
お | オリジンX,Y(位置の基準） | originX,originY |
ふ | ファンクション（関数） | function |
い | イージング | enchant.Easing. |
た | タグ | tag |
は | 幅 | width |
た | 高さ | height |
き | 距離を計測する | getDistance(); |
た | タッチムーブ | Event.TOUCH_MOVE |
ふ | forループ | for(){} |
ぐ | グループの中の個体の総数 | childNodes.length |
ぽ | ポーズ | tl.pause(); |
さ | 再生 | tl.resume(); |
ふ | フォロー | follow |
び | 秒でカウントする | setTimeBased(); |
し | 小数点で表示する | score.Fixed(); |
る | ループの停止 | tl.unloop(); |
じ | ジェスチャーの追加 | newGestureDetector(); |
た | タップ | Event.TAP |
ふ | フリング | Event.FLING |
ぼ | ボタンで操作 | Event.RIGHT_BUTTON_DOWN |
た | タッチ不可にする | .touchEnabled = false; |
せ | セーブ | setLocaStorage("","") |
じ | 条件分岐（複数） | else if(){} |
ぱ | パラメータ（衝突対象） | ○○ += e.collision.target.××; |
ぱ | パワーメーター | pMeter.scaleX = boss.hp / 10; |
る | ループキャンセル | tl.unloop(); |
ぱ | パワーメーター（長押しタイプ） | meter.scaleX = power / powerMax; |
Box2d
| ひらがな | やりたいこと | コード |
|---|---|---|
ぶ | 物理世界をつくる | PhysicsWorld(,); |
ふ | フィシックスワールド | PhysicsWorld(,); |
ふ | フィボックススプライト フィサークルスプライト | PhyBoxSprite PhyCircleSprite |
す | スタティックスプライト | enchant.box2d.DYNAMIC_SPRITE, |
だ | ダイナミックスプライト | enchant.box2d.DYNAMIC_SPRITE, |
か | 角度を変える | .angle = ; |
あ
（コラム）タッチしてちょんまげの思い出
//記憶では、プログラミングを習いはじめてから、１ヶ月〜２ヶ月の頃に作ったものです。
いつもたいてい授業の最後には、「では、宿題〜〜、オリジナルのドット絵を書いておいてくださいね〜」とか、「自分のキャラを作っておいてくださいね〜」とか、一応毎回先生が何らかの宿題を出されるのですが、かと言ってそれを次回提出する訳でも使うわけでもなかったのでやっていかなくてもどうってことないんですが（まあ学校じゃないんでその辺のゆるさが魅力）、真面目な私ども親子は言われたことをやっていました。
というか、そうしないと次の回にすっかり忘れてしまってついていけなくなるのではないかという心配がありました。
実際、息子は普段学校の宿題が忙しくて、時間があれば「いつでもできるわ」と後回しにもできるのですが、逆に忙しいから合間を縫ってそこそこやらないと全く手つかずになって遠のいてやれなくなってしまうだろうという思いが無意識に働いたのかもしれません。
それでこの時の宿題は、今ノートを見てみると、“（宿題）「これを改造してネタをつくってくる」”とありました。
最初に作ったゲームというか、動きなので、非常に思い出深いです。
ここまでの最初の一ヶ月で、「ちょんまげのお殿様の画像を出し、ちょんまげをタッチするとちょんまげが動く」（シュール・・）というものを習ったので、それを見ていていて息子と思いついたのがこれでした。ちょんまげの上がお皿みたいだったからです。
習った動き自体は簡単なものだったのですが、タッチしてちょんまげや果物が動いて終わり。
それがなんだかものすごく寂しくて。一回こっきりで終わってしまうのが、なんだか悲しい。
悲しいというか、人間、こういうスイッチがあれば飽きるまで何度も押してみたいという欲求が絶対にある。
それで、習ったばかりのdelayを使って、落ちてしばらくしたらまた元の位置に戻すというようにして、またタッチすれば落ちるというようにすれば無限に遊べると思い、それを実際やってみようとしたら・・・
死ぬほど難しかった（笑）。
今見るとなんてことないソースコードですが、回転を止めて元に戻すというのがなかなかできなかったのです。
今でも、これまで作った作品のなかで一番苦労したのはこれだったという実感があります。
というのは、当時はまだ見よう見まねでコードの意味も実際どう動くのかもよくわからずやっていたからです。
つまりは、まだ始めたばかりの超初心者ですから、簡単なことでも難しくてできないのが当たり前ですね。
それでも、息子とああでもないこうでもないとがちゃがちゃやりながら、tl.then(function(){}を使えば、前のtl.の動きが終わってからの画像の変更や動きの変更ができるという意味が試行錯誤しながら何となくわかってきて、何とか思い通りの動きを作ることができて、本当に勉強になりました。
最初は誰でも、よくわかっていなくて、見よう見まねだと思います。
それでも、まず自分でやってみることが何より大切だと実感しました。
そして、もう一つ忘れられないのが、その後の授業のときに、クラスのお友達がこれをやって「これ面白い」と笑ってすごくウケてくれていたことです。
「・・子供にウケた・・」
ユーモアのセンスもなく、一番遠い存在がお笑いだと思っている私にとって、作ったゲームで笑ってくれたというのがなんだか嬉しくて・・
この時の、苦労してできた(と同時にすごく楽しかった）、そしてそれで笑ってもらえたという体験が、今にずっとつながっているような気がします。
ゲーム一覧
//これまでの作品の記録です。
習った範囲で出来ることだけを使って作っているので、出来ることが徐々に増えていく様子がわかります。
・一部（もしかすると大部分）愉快な音がしますので、音量に注意してください。
・自由研究とあるのは、夏休みの一研究で取り上げたのでその資料を添付してあります。
☆画像、音素材については以下の方々からお借りしています
©️おざきしめじ ©効果音ラボ (C)PANICPUMPKIN
無料効果音で遊ぼう！ フリー音楽素材/魔王魂 DOTS・DESIGN
親から見たこれからのプログラミング
//最近、プログラミング教育ということが盛んに言われるようになったようです。なんでも、2020年から学校でも必修化！とか。
そういうこともあって、「学校でも始まりますよ！さあプログラミングスクールに！」という煽りにも近いような勧誘があるように思いますが、我が家の場合、全くそんなことも知らず・・・^^;
なにしろ学校や親の間であまり話題になったこともなく、むしろ習い始めてからそのことを知ったような有様でした。
・・ゲームのことはよく話題になります。学校で懇談会なんかがあると、「どうしたらやめされられますか」「どうしたらゲームばかりしないで勉強してくれるようになりますか」「どうしたらゲームの約束を守れるようになりますか」そんな話ばかりです。
学校や親は、総じて子どもに関してゲームが嫌いですね。（またこの話題は後ほど）
私どもは縁あって、親子でプログラミングという世界に触れるようになり、いろいろ考えさせられることが多くありましたが、プログラミングを子供たちにやらせようという流れの中で、それは非常にいいことだと思いますし、子供に限らないで大人もやってみると楽しいと思うのです。
というか、大人自身がやってみたら、その意義や面白さがわかって、子供たちに勧めるべきか感じられると思うのです。（適性もあると思います）
どの分野にも、プロとアマチュアの世界があって、（プロの世界もピンからキリまであって）、つまりは職業としてやる人、趣味としてやる人、あるいはその中間のような人、そういう人たちがいて裾野が広がっているわけです。
近年はゲームの世界でも、e-sportsと言って、プロで活躍されている方もいるそうですね。
（どの世界でも、プロは命削ってやってるわけですから、ゲームと言っても生半可な腕前ではないのでしょう。）
だからうまくいけば、これからは、プログラミングという世界も、野球とかサッカー、ピアノや習字やそろばんのように、習い事としてポピュラーなものになっていくと思います。
その中でプロになる人もいて、大人も子供も趣味でやる人も増えて、そうやって裾野が広がってこそ、優れた技術者もこれまで以上に多く生まれるようになるのではないかと予想しています。