おならして帰る

タイトルですが、これは、テキストの中に課題として 

//プレイヤーの位置まで迫って、(おならして)帰って左右移動

とあったので、そのとおりに作ったものです。

娘にやってもらったら、「なにこれーやだー最低ー!」と引いていました。。。

【ポイント】

・ifの条件分岐は、上から判定していくので、順番を考える

・modeパラメーターを設定して、条件を満たしたときに一度だけ発動するようにする

・tl.clearとtl.unloopの違いを理解して使い分ける

 (1)タイムラインを止める(別の動きにするために今のtlの動きを即時止める)
 boss.tl.clear();
 (2)タイムラインのループのオン
 boss.tl.loop();
 (3)タイムラインのループオフ(tlのloopを止める)
 boss.tl.unloop();
ソースコード

配列と比例を使った放射弾のつくり方

・・改めて、発表のときの動画を見返してみましたが、先生がうろたえてみえるので、それは驚いていらっしゃったからだそうですが(まさかあのようなものが出てくるとは思ってなかったでしょうね)、でもそのときはどうしてうろたえているのか私もわかりませんでしたので私は私で「あちゃー外したかな?」と思ってどぎまぎしています。それ以前に、人前で自分の作品を披露して反応を確かめたのも生まれて初めてです。見ながらいろいろ笑ってしまいました。

「しめじ先生の大冒険」の中で、実は一番気に入っているのは、おたすけボタンをクリックしたときに、おざき先生から一斉に発射される矢が、みんなのところへ放射されるところです。

これは、プレゼンのときに通常モードではなかなかクリアまでいけない場合に、ショートカットしてクリア画面を見ていただくためにつくりました。

これは、先生のキャラがどの位置にいても、矢が放射状に一人ひとりをめがけて向かっているように角度を変えて飛んでいくところがきれいで我ながらうまくできたなーと思っています。

当然、最初は垂直の矢が、みんなに向かって垂直の角度で飛んでいくわけです。それではおかしい感じなので、角度をつけることにしました。

その際に、本当なら、三角関数を使ってその都度計算するのが正確なのでしょうが、ここではそういう難しいことはせずに、擬似的に、距離と角度についての比だけで、つくってみました。思いの外うまくいって一発でできたので、自分でも驚いたので記録しておきたいと思います。

例えば、しめじ先生が左端Aの位置にあるとします。すると、左下のゾンビに向かう矢の角度は、垂直方向に対して0°です。そして、しめじ先生が右端Bの位置に移動したとすると、Aの位置の矢の角度に比べて、右回転方向にa°回転すればいいわけです。

そこで、角度の計算ソフトを使うか、目分量でもいいので、角度の最大値(一番端に来た時の角度)であるa°を決めます。この場合40°くらいです。ですので、しめじ先生が「Aの位置(ゾンビから最も近い位置)からBの位置(ゾンビから最も離れた位置)に動いたとき、矢の角度が0°(最小値)からa°(最大値)に変化する」というように比例させればいいと考えました。

上の例はゾンビが端ですが実際は13体それぞれ違った位置にあるので、それぞれについてこの考え方を適用すると、一つひとつのゾンビとしめじ先生について「x座標の距離」に比例させればいいということになります。(x座標が同じなら角度0°、最大離れた時が角度40°となるよう比例させればよい

お助けモード発動

配列は、授業ではやっていないと思いますが、たぬきが飛びながらコインをとる横スクロールのゲームのときに、先生がサンプルを掲示板に貼ってくださったものを参考にしています。

配列と当たり判定

この中で、矢を放つ部分は以下です。

ゾンビは上の段と下の段の二列に別れているので、そのように書きました。上下に数値をずらして一つでまとめて書こうと思えば書けると思いますが、面倒だったので分けました。

この中で以下のように矢の傾きを計算しています。

// 矢の角度を変えるための計算
//var k = 52 / 225 * (teache.x - zombies[ya].x) 
//arrow.rotate(k);

kが、矢の回転角度です。それぞれのゾンビの位置に対応させてこの角度に傾けたいということです。角度の最小値と最大値(ゾンビとしめじ先生が最も離れたときの矢の角度)が-52°と52°、しめじ先生とゾンビのx座標の距離の差の最小値が-225、最大値が225なので、分母を225にすれば、しめじ先生とゾンビが同じx座標にあるときteache.x – 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以上になると、千万両の小判が降ってきますが、これはなかなか難しいと思います。

【工夫したところ】

・3、2、1とカウントされてからスタートしますが、スタートするまでは、board.touchEnabled = false;によって、タップできない(タップしてもカウントされない)ようになっています。始まったら、board.touchEnabled = true;としてカウントされるようにします。(制限時間が終わったら同様にタップしてもカウントされないようにする)

・30点で田吾作の向きが変わりますが、modeのパラメータを使って、一度だけ変わるように制御しています。落ちてくる画像の変化についてもmodeを使いました。

完成したソースコード

教室からの脱出

授業で共同の作品を作り始める前に、教室をテーマに脱出ゲームをつくりたいと言ってつくりはじめていたので、それを完成させました。絵は、手伝いました。

完成したソースコード
教室からの脱出
ヒント

①丸まった紙をクリックして開く ファイルをクリックして開く
講師を所定の位置に
②映し出された問題を解く 部屋を出る
③エレベータに張り出された問題を解く
①〜③の数字をセットする
クリア!

打合い100いけたら神

タッチムーブをまだ習っていないときに、バーをクリックで動かすものを作ったので、それに、タッチムーブで動かすモードも付け加えたものです。

さらに、ストレージを習ったので、結果画面に得点が出るようにしました。

ゲーム画面が始まったときにremoveLocalStorageで初期化して、球を打ったときに、得点(score += 1; )と得点がセーブ(setLocalStorage(“得点”, score);)されるようになっています。

・完成したソースコード

打合い100いけたら神

Escape with くさや

脱出ゲームの授業でつくったものです。

グループに分かれてテーマを決め、画像を分担してつくりました。

息子のグループは、くさや、トイレ、トイレットペーパー、部屋、扉はみんなの画像です。それをつなぎ合わせて、トイレからの脱出となりました。

苦労したところは、さいごの扉の黒いもやもやを消すところで、これは、実は決しているのではなく、透明の四角をブロックを並べておいて、くさやと衝突すると、白く上書きされるように作りました。

そして、ブロックの数は10*15=150個なので、衝突した個数をカウントして、それが150個になったらクリアとして、全部消したらクリア、としました。

ネタバレも一番下に書いておきます。

当初は、神棚をそのまま出していましたが、トイレに神棚は罰当たりでありえないということだったので、トイレがお掃除によって昇天して神棚になるという設定に変えました・・

ふたつのゲームオーバーの場面がうまくできて、満足して何度も自分で遊んでいます。

完成したソースコード
Escape with くさや
攻略法とゲームオーバー
・ブラシをトイレに合わせる
・カウントが出たらクリックして10回磨く→カウントとブラシが消える
・水を流す→トイレが昇っていき神棚になる
・神棚にトイレットペーパー(紙だな〜)
・目玉にくさや攻撃
・くさやをドラッグしてもやもやを消す
・クリア
ゲームオーバー
・くさやをトイレにドラッグ→レバーをクリック→流れる
・トイレットペーパーも同様

不屈のカニ

サンプル「カニをつかまえろ」の授業でつくったゲームです。

先生のサンプルでは、何匹かのカニがいくつかの土管から出てくるのですが、これは一匹のカニという想定で、捕まっても捕まってもなんども出てくるので、「不屈のカニ」だそうです。

結果画面もパターンを変えてつくっています。

このアイコンは、先生のカニの絵

←これの右側

 

を見ながら、本気で真剣に模写したものです。

ゆがんだ線も、わざとではありません。先生と同じ絵を書こうとしているのですが、こうなってしまうのです。ある意味天才だと思います。こんな線なかなか出せません。

なんとも味があってよいと思いますが、本人はその良さがわからずボツにしようとするので、「これでいいよ!すごくいいよ!」と言って採用になりました^^;

完成したソースコード
不屈のカニ
自由研究

ももちゃんで(^-^) テンコモリ

想定はふざけていますが、中身は至って真面目につくっています。

シューティングの授業で習ってきたものを全部いれたので、てんこ盛りです。それから、いままで作ったもの(お殿様やペラペラ小僧や花火)も使いました。

わかりにくいですが、「お」「い」「も」の文字を打つと何割かの確率でランダムで小おいもや大おいもに変化します。さらにそのおいもをとると、それぞれ三方向弾、一掃ボムとなります。小判を取ると一定数速射になります。

三方向弾は最初そのままで出ていたのですが、息子が「頭から出ていたらおかしいでしょ、回転させたらいいじゃん」というので、なるほど〜とそうなりました。

一番苦労したのは、ボスのお殿様のところの動きです。果物と一緒に左右に動きながら、まげが上に上がったときに一定のタイミングで果物を発射するというのには苦労しました。それと、回転して撃ってまた戻す、速射や三方向弾や一掃ボムを撃ってから通常弾に戻すというのにも苦労しました。

あと、いがぐりや文字爆弾を5個ずつ出して、それを繰り返すというのは、forの入れ子になっていて、カッコがどんどん重なっていき、訳がわからなくなりそうでした。それで、細かく//でコメントを入れています。

お殿様はタッチしてちょんまげのところから、最後の花火はマリオのクリア画面を見直して、6発にしました。前に作った花火が役に立ちました。

完成したソースコード
乱撃ももちゃん