久しぶりの記事投稿になります。)、一段落がつきましたので、勉強をしつつまたこちらに記録を残していきたいと思います。〜・〜・〜・〜・〜・9月の発表では、アナログ時計をつくることにしました。授業ではデジタル時計をやったので、それを針と目盛りでどのように画像にするのかがポイントです。メモリを360度に配置するというのは意外に難しくて、canvasという機能を使おうとしたのですが、enchant.jsでそれをやろうとしてもそのままではできないことがわかり、・・というような経緯がありました。その辺りのことも含めて、今回は簡単に紙にメモをしておいて発表しました(前回の発表があらら・・状態だったので)のでそのメモも。画面タッチでスロットスタート。2秒で止まって判定します。「スロット」の授業をお休みしたので、そのときのプリントを先生がくださいました。・・ら、動画で見た書き方と全然違うじゃないですか(^○^)こちらは「時計を作る」のときにも使ったsetIntervalを使ってスロットを回転させて、何秒後かに一回だけ実行されるというsetTimeoutの中でsetIntarvalを止めるclearIntervalを使って、3秒後にスロットを止めて当たりかどうかを判定する、というやり方でした。回転中にクリックするとおかしくなるので、回転中はタッチできないようにしました。ハズレのときの音もつけていましたが、繰り返すとどうしてもエラーになってしまうので外しました。解説この時の授業はお休みしたので動画を見ながらなぞって作ったものです。息子がかわいらしい音をつけるところまで作ったので、そこから少し改良してボタンでスタート・ストップ、揃ったらクリア画面が出て、またボタンを押すと回せるようにしました。ゲームは何度も繰り返して遊びたいのです!これも当たったら終わりでも良かったのですが、また回せるように改良しようとしたら意外に難しくて苦労しました。この「何度も遊べるようにする」ところでいつも苦労しますね。スロットのソースコードコメント以外で//消してあるところは、試行錯誤の時にうまくいかなかったものです。消してしまうとまた同じ間違いを書いてしまうので、これは出来なかったよということがわかるように残してあります。忘れてしまうので・・。して作ったものも、どうやったのか1ヶ月もすると忘れてしまっているので、こうして記録しています。場合分けをするためにcounterを作って、ハズレが出ても当たりが出ても再度スロットを回せるようにしました。当たりが出ると背景が変わり文字がでるので、再度回し始めるときに文字を消して背景を戻すために工夫が必要でした。1:スロットが回っている間(ボタンを押してもスロットはスタートできない)2:当たりの判定が出たとき(再度ボタンを押すと背景が戻り、スロットが回る)として動作を制御しました。一つのボタンでやろうとするとこのように面倒なことになります。解説クリックすると、猿がりんご、バナナ、さくらんぼのどれかをランダムに落とします。落とした分だけ得点にカウントされますが、地面に落ちた分はマイナスされるので、かごに積んだ分が得点になります。時間は50秒で、スコアと、りんご、バナナ、さくらんぼの数の分の絵が表示されます。作り込みの授業のときに困ったところをいくつか先生に助言をいただいたおかげでそのときにすごく進めることができたみたいで喜んでいました。一人で作るより助けを借りて作ったほうがいいですね。最後に、結果画面のところに、「積んだ果物をそれぞれの個数分で画像で並べて出したい」と言い出して、(ノ∀`)アチャーまた難しそうなことを(ヤメテー)・・と思いましたが、偶然にも私の助言のおかげで(エッヘン)実現することができました。その結果画面について、難しかったので覚えで書いておきます。息子に説明してもらいました。何が難しいかというと、1りんご、バナナ、さくらんぼの数はそれぞれその都度異なる。2それぞれその都度異なる数のものを、等間隔に並べて表示する。(x座標の問題)3端まできたら、次の行に移して並べていく。}});rope.tl.loop();2りんご、バナナ、さくらんぼをセーブした個数分画像で並べる例えば、りんごを15個並べたいとき、10個目までは32ピクセルずつずらしてならべ、11個目からはまたx座標は0に戻さないといけないのです。息子は悩みはじめました。こんな数学の問題は学校ではでてきません。どんな数式でしょうか。要は0〜9まではそれぞれ対応して0〜9で、10〜19までまた戻って0〜9、20から29までまた戻って0〜9(この繰り返し)になればいいのです。「10で割ってその余りの数の・・」というところまで息子は考えたのですがわかりませんでした。そこで私が思い出したのは、ブロック崩しもどきのゲームを作ったときに、先生のサンプルから真似して見よう見まねで書いたものの中に、ブロックをきっちりすきまなく順番に並べて置いていくというものを作ったことをうっすら思い出しました。8);//(iを40で割った商の小数点を切り捨てた数)×8↑これだ!これがやりたかったの!これのことだったんだ!と感激していました。これって・・言われればそのとおりだけど、思いついた人はすごいと思う。%というのは、「割った余りの数値」です。Math.floorとは「小数点を切り捨て」です。1(×8)ずつ増えるので40個ずつで行が下に行くことになります。いうことで、母のかすかな記憶のおかげで偶然にも解決できました。見よう見まねで作ってみたものがこんなところで役に立つとは。おかげで私も、初めてこれの意味を理解することができました。ブロックは一種類でしたが今回はりんご、バナナ、さくらんぼを三種類を画像を変えて並べないといけないので、iの数を前の果物の数だけ加えてずらすという工夫が必要でした。以下コメント部分はゆうじの解説です。)、苦労したんだからそのあたりもうちょっと説明したらいいのになと可笑しかったのですが、それも一つの個性なので、まあいいかと思います。(みんな違ってみんないい)奇をてらわずシンプルで、息子の真面目さが出たようなゲームだと思いました。ゲームとして突き抜けたようなアイデアはないけれど、こういうふうに動かしたい、こういうものを出したいという構想を思い描いたとおりに実現させました(プログラミングの醍醐味だね)。いうところを見ると、もしかすると息子はゲームよりも、実用的なアプリとかシステムをつくるプログラミングのほうが向いているかも知れないなと思いました。ゲーム投稿サイト9leapに投稿してみました。解説AIに挑戦せよという授業の中で作ったものです。応用してシューティングゲームにして、ダメージによって敵の画像・攻撃・動きが変わるようにしました。マンドラゴラのつもりで描いた敵が、にんじんに見えてしまうのは、頭の葉っぱが短すぎたからでしょう。(授業での発表のとき、デモ用に当たり判定を外してゲームオーバーにならないようにしておきました。//プレイヤーの位置まで迫って、(おならして)帰って左右移動とあったので、そのとおりに作ったものです。娘にやってもらったら、「なにこれーやだー最低ー!」と引いていました。・・改めて、発表のときの動画を見返してみましたが、先生がうろたえてみえるので、それは驚いていらっしゃったからだそうですが(まさかあのようなものが出てくるとは思ってなかったでしょうね)、でもそのときはどうしてうろたえているのか私もわかりませんでしたので私は私で「あちゃー外したかな?」と思ってどぎまぎしています。それ以前に、人前で自分の作品を披露して反応を確かめたのも生まれて初めてです。見ながらいろいろ笑ってしまいました。「しめじ先生の大冒険」の中で、実は一番気に入っているのは、おたすけボタンをクリックしたときに、おざき先生から一斉に発射される矢が、みんなのところへ放射されるところです。これは、プレゼンのときに通常モードではなかなかクリアまでいけない場合に、ショートカットしてクリア画面を見ていただくためにつくりました。これは、先生のキャラがどの位置にいても、矢が放射状に一人ひとりをめがけて向かっているように角度を変えて飛んでいくところがきれいで我ながらうまくできたなーと思っています。最初は垂直の矢が、みんなに向かって垂直の角度で飛んでいくわけです。それではおかしい感じなので、角度をつけることにしました。その際に、本当なら、三角関数を使ってその都度計算するのが正確なのでしょうが、ここではそういう難しいことはせずに、擬似的に、距離と角度についての比だけで、つくってみました。うまくいって一発でできたので、自分でも驚いたので記録しておきたいと思います。しめじ先生が左端Aの位置にあるとします。すると、左下のゾンビに向かう矢の角度は、垂直方向に対して0°です。しめじ先生が右端Bの位置に移動したとすると、Aの位置の矢の角度に比べて、右回転方向にa°回転すればいいわけです。そこで、角度の計算ソフトを使うか、目分量でもいいので、角度の最大値(一番端に来た時の角度)であるa°を決めます。この場合40°くらいです。しめじ先生が「Aの位置(ゾンビから最も近い位置)からBの位置(ゾンビから最も離れた位置)に動いたとき、矢の角度が0°(最小値)からa°(最大値)に変化する」というように比例させればいいと考えました。上の例はゾンビが端ですが実際は13体それぞれ違った位置にあるので、それぞれについてこの考え方を適用すると、一つひとつのゾンビとしめじ先生について「x座標の距離」に比例させればいいということになります。配列は、授業ではやっていないと思いますが、たぬきが飛びながらコインをとる横スクロールのゲームのときに、先生がサンプルを掲示板に貼ってくださったものを参考にしています。配列と当たり判定この中で、矢を放つ部分は以下です。ゾンビは上の段と下の段の二列に別れているので、そのように書きました。上下に数値をずらして一つでまとめて書こうと思えば書けると思いますが、面倒だったので分けました。この中で以下のように矢の傾きを計算しています。//arrow.rotate(k);kが、矢の回転角度です。それぞれのゾンビの位置に対応させてこの角度に傾けたいということです。zombies[ya].x=0、最も負の方向に離れたときは=-225となり、矢の角度は-52°(最も負の方向に傾く)から、同じx座標のときは0°(垂直)になって、また正の方向に離れれば離れるほど52°に近づいて矢が傾きます。距離の変化(-225〜225の変化)に対応して、-52°〜52°の範囲で自動的に変化させることができます。解説ゲームはこちら念願かなって、授業にて作品を発表することができました。(一度やってみたかったので・・・もう思い残すことはありません(笑)しかし、ちょっと想像以上にサプライズに成功してしまって驚かせてしまったようですが、引かれてしらけてしまったらどうしようかとそれだけが心配でしたので、盛り上がっていただけてよかったです。(「ぼくのトイレットペーパー!!」と叫んでくれたのには嬉しかったですね。)喜んでいただいたので、技術的なことはもうどうでもよくなって(実際純粋にプレイする側としては問題は面白いかどうかであってどうやって作ったかとかはどうでもいいわけで)、盛り上がってプレイしていただいたのをただ嬉しく見つめていました。時間もオーバーしていましたし、感想のカードをくれたのは一人だけだったのですが(それでも十分嬉しいです)、面倒ぐさがりの息子が「お母さんにも感想!」と言って急いで感想を直接紙に書いてくれました。「記念的な作品を上手くゲームにしていてすごいと思います」。日本語がおかしいですが、上手くゲームにできて記念的な作品になりましたということが言いたかったのでしょう、息子にも何か伝わったんだと思って嬉しく思いました。ここで工夫したところや難しかったところを記録しておきます。難しかったところ・吹き出しのセリフのところ吹き出しやセリフの大きさがそれぞれ違うので、出る場所に合わせてさらに左右の画面からはみ出さないように出すのに調整が大変でした。・音と動きのタイミング動きに合わせて音を選ぶのとタイミングを合わせるのに苦労しました。難しくはないですが、一番時間がかかるのがこのドット絵です。満足がいかないと思えば際限がない。デザイナーさんってすごいなー。工夫したところ・連射できてしまうと端にいてピュンピュン撃てばいいだけになって簡単すぎるのでできないようにしました。・バグに捕まって穴に落ちるところは、スクロールをつかってみました。今井先生がつくってくださった、上下左右の設定が便利でした(・・・が最初何度やってもうまくいかず、まさか先生の設定が間違っていると思わず2日間悪戦苦闘したのでした。私の2日間の苦労を返して・・!(笑))・虫の動き・・最初はまっすぐに向かってくる動きにしたのですが、それだとなぜか異様に気持ち悪かったので、ジグザグに動くようにしました。・揃ったらクリアというところはストレージを使いました。・クリアの胴上げをイメージしたところは、box2dをつかってジャンプさせています。簡単にリアルな動きをつくることができました。授業での発表の後に何気なくipadのほうでも開いてみたところ、途中で止まってしまうことに気づきました。してモバイルでは正常に動かない?・・どうやらそのようでした。通常モードではバグに捕まったところで(!まさにバグのところでバグ)、おたすけモードでは全員揃って生徒たちに連行されるところで止まります。モバイルのほうではconsole.logを見ることもできないのでどうしてなのか全く見当もつきませんでした。最初はスクロールレンジをつかっているのが原因かな?と思いましたが、おたすけモードのほうでは使っていないのでそうではないと思われました。ここで両方に共通するのは、BGMの音を止めているということです。このBGMは、forを使って10回繰り返すように設定してあります。1回につき約140秒なので、さすがに10回繰り返すうちにはクリアするでしょうと。forを使っているのは、普通のスクリプトのループでは、ローカルや他の環境では動かなくなるからです。(画像が出ず真っ白になる)その中で、音を制御するために、ENTER_FRAMEを使ったのですが、それが原因じゃないかと思って、その部分を無効にしたら、やはり動きました。それではBGMを止めることができなくなります。それでこのENTER_FRAMEを使わずに音を止めようとしたのですが、そうすると今度はBGMのループがうまくいかなくなります。2回目から再生されなくなったり、2回目以降再生されても止められなくなったり。ENTER_FRAMEを使ったほうがうまくいくと思われました。そこまでの考えに行き着いて、もっとやりたかったんですが夜も更けてきて明日も早起きして主人のお弁当つくらないといけないし、お風呂に入ろう、そしたらいい考えが思いつくんじゃないか、と自分に言い聞かせてお風呂に入りました。したらなんと言うことでしょう、お風呂の中で思いついたのです。ENTER_FRAMEの判定の条件が効きっぱなしになっているのが負荷になっているのではないかと。ifの条件を満たしたらstopなのですが、それが一回こっきりではなくて、ずっと条件を満たして働き続けてしまう書き方になっているのがいけないんじゃないかと気付きました。AIのところで教えていただいたのを思い出して、条件を満たした時に1回だけ働くように書き直してみました。すると、やはりそのとおりだったみたいで、動くようになりました。通常モードおたすけモード(ゲームオーバーなし・おたすけボタン有)・ドラッグで左右に移動、離すと矢を放ちます。・矢は光っているときしか撃てません。・バグ(虫)に捕まるとゲームオーバーです。・バグに捕まってもゲームオーバーになりません。・画面のどこかにあるおたすけボタンをクリックすると、まとめて全員救出することができます。・クリアした後の画面がループして繰り返します。人工知能のところで、カウントによって画像や動きを変化させるということをやったので、それを使って、連打の数によって画像が変化するものをつくりました。60以上になると、千万両の小判が降ってきますが、これはなかなか難しいと思います。false;によって、タップできない(タップしてもカウントされない)ようになっています。true;としてカウントされるようにします。(制限時間が終わったら同様にタップしてもカウントされないようにする)・30点で田吾作の向きが変わりますが、modeのパラメータを使って、一度だけ変わるように制御しています。落ちてくる画像の変化についてもmodeを使いました。