『PCNこどもプロコン2017冬』で佳作をいただきました

いつもこちらに素敵なコメントを寄せてくださるりょうくんのお母さんからお勧めをいただいて、『PCNこどもプロコン2017冬』コンテストに応募したところ、ソフトウェア部門中学生の部で佳作をいただきました。

自分一人で作ったものしか出したくないと言って出した3作品の中の、2作品(文房軍シューティングAIマンドラゴラを倒せ)でいただきました。

一次審査の結果の「佳作」ということで、最終審査に進むエントリー作品には残ることができませんでしたが、それでもCODE FRIENDSの授業で作ったものそのままだったので(本当はブラッシュアップして応募したかったのですが、この時期いろいろあってできませんでした💦)、佳作にも入れるとは思っていなかったので、大変嬉しくすごく自信になったようです。

授業の中で作ったまんまなので、まるまる教えてくださった先生のおかげということでもあります。

皆様ありがとうございました〜-人-

いただいた講評のカード(クリックで拡大)

息子の大発見?

息子がゲームつくりをしていて面白いことを発見して、ブログに書いてくれというので書きます。

息子から、「ちょっとお母さん助けてよ!」とHelpがありました。

何?とPCを覗き込むと、htmlファイルをブラウザで開いて(すると先生の作られたCodeFriendsのロゴが出るわけですが)、それをクリックして実行しようとすると、びっくり、印刷の画面が出るのです。しかも、キャンセルを押しても消えない!ここで、これを消したくばこちらへ電話・・と出れば詐欺サイトですが、そうではなく、ひたすら消えない!

・・なにそれ・・こんな症状見たことないよ・・「また◯◯◯の有害電磁波か?」(息子がPCを触るとよくエラーがでるので、私はそう読んでいます。元々は私の父からです。父のPCはいつもおかしくなり、いつも私に聞いてくるので、勝手に「じいちゃんの有害電磁波」と呼称しています。実はおかしな操作(気づかないうちにどこかをクリックしたり)しているのですが。)

どこを書き換えたの?何か触った?と聞くと、変なことはしていない、と言います。

(そんなのわかんないよ・・)と思いながら息子に書き換えたところを見せてもらいました。

息子はプログラミング教室の先生が作ってくださったenchant.jsを基にしたフレームワークをつかってゲームを作っていますが、「指定した内容を表示する」というメソッドで、

for (var i = 0; i < arrayOfStrings.length; i++) {
    print(arrayOfStrings[i] + " / ");
}

と書いたそうです。自分でどこかで調べてきて、見よう見まね書いたのです。

「ここにprintってあるじゃん、だから印刷、プリントの画面が出るんじゃないの?」私は冗談半分で言いました。

息子も「そんなことあるわけない」と半分呆れて、真に受けませんでした。

でも・・しばらくして半信半疑でこの一行を無効にしたら、その印刷の画面は消えて正常に戻ったのです。息子はびっくりして笑っていました。

よくわからないことを書くから・・。でも自分なりに調べてやろうとしたのだから、よし!

たとえこのゲームが完成しなくても、これらの経験が無駄になることは決してないでしょう。(でも完成させて欲しいな。なんでそんな難しいことやろうとするんだろう・・とヤキモキしたりしながらも見守っている親です。)

 

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

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

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

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

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

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

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

例えば、しめじ先生が左端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°の範囲で自動的に変化させることができます。