カテゴリー: ゲーム作品

クリックすると、猿がりんご、バナナ、さくらんぼのどれかをランダムに落とします。

落とした分だけ得点にカウントされますが、地面に落ちた分はマイナスされるので、かごに積んだ分が得点になります。

時間は５０秒で、スコアと、りんご、バナナ、さくらんぼの数の分の絵が表示されます。

作り込みの授業のときに困ったところをいくつか先生に助言をいただいたおかげでそのときにすごく進めることができたみたいで喜んでいました。やっぱり一人で作るより助けを借りて作ったほうがいいですね。

最後に、結果画面のところに、「積んだ果物をそれぞれの個数分で画像で並べて出したい」と言い出して、(ﾉ∀`)ｱﾁｬｰまた難しそうなことを（ﾔﾒﾃｰ）・・と思いましたが、偶然にも私の助言のおかげで（ｴｯﾍﾝ）実現することができました。

その結果画面について、難しかったので覚えで書いておきます。息子に説明してもらいました。

何が難しいかというと、

①りんご、バナナ、さくらんぼの数はそれぞれその都度異なる。

②それぞれその都度異なる数のものを、等間隔に並べて表示する。（ｘ座標の問題）

③端まできたら、次の行に移して並べていく。（ｘ，ｙ座標の問題）

どういうアルゴリズムでやればいいのでしょうか？

①りんご、バナナ、さくらんぼの数を配列にしてセーブします

var howmanyF = [0,0,0];//フルーツの数を入れておく配列をつくる(howmanyF[0]がりんごの数、
howmanyF[1]がバナナの数、howmany[2]がさくらんぼの数)

function dropBlock(){
    var fruits1 = new PhyBoxSprite(32,32, enchant.box2d.DYNAMIC_SPRITE,1,0.5,0);
    var rdm = getRandom(0,2);
    //ifと同じだが２つ以上だとこっちが楽
    switch(rdm){
        case 0: fruits1.image= core.assets["images/cf307/monkeyapple.png"];
            howmanyF[0] +=1;//りんごを落としたらりんごの数が＋１される
            break;
        case 1: fruits1.image= core.assets["images/cf307/banana.png"];
            howmanyF[1] +=1;//バナナを落としたらバナナの数が＋１される
            break;
        case 2: fruits1.image = core.assets["images/cf307/sakuranbo.png"];
            howmanyF[2] +=1;//さくらんぼを落としたらさくらんぼの数が＋１される
            break;
    }

（略）

// (2)当たり判定(ground x group)//フルーツが地面に当たったら
ground.addCollision(group);
ground.on(Event.COLLISION, function(e){
    //console.log(e);
    var target = e.collision.target;
    target.remove();
    switch(target.image){
        case core.assets["images/cf307/monkeyapple.png"]:
            console.log("aplle");
            howmanyF[0] -=1;//りんごだったらりんごの数を-1する
            break;
        case core.assets["images/cf307/banana.png"]:
            console.log("banana");
            howmanyF[1] -=1;//（以下同様）
            break;
        case core.assets["images/cf307/sakuranbo.png"]:
            console.log("さくらんぼ");
            howmanyF[2] -=1;//（以下同様）
            break;
    }
    if(score != 0){
        score--;
    }
});

rope.tl.delay(16);
rope.tl.then(function(){
    timer--;
    console.log("あと"+ timer + "秒");
    timelabel.text = "TIME: " + timer;
    if(timer <= 10){
        timelabel.color = "red";
    }
    if(timer == 0){//0秒になったら
        BGM.stop();//音を止める
        console.log("おしまい");
        console.log(howmanyF);
        localStorage.setItem("howmanyF", howmanyF);//howmanyFをセーブする
        localStorage.setItem("monkey_score", score);
        endStart();
    }
});
rope.tl.loop();

②りんご、バナナ、さくらんぼをセーブした個数分画像で並べる

例えば、りんごを１５個並べたいとき、１０個目までは３２ピクセルずつずらしてならべ、１１個目からはまたｘ座標は０に戻さないといけないのです。

x座標で言うと、０のときは０、１のときは３２×１、２のときは３２×２、・・・９のときは３２×９、そして１０のときはまた０に戻る、これはどう書けばいいのか・・

息子は悩みはじめました。こんな数学の問題は学校ではでてきません。どんな数式でしょうか。

要は０〜９まではそれぞれ対応して０〜９で、１０〜１９までまた戻って０〜９、２０から２９までまた戻って０〜９（この繰り返し）になればいいのです。だから、「１０で割ってその余りの数の・・」というところまで息子は考えたのですがわかりませんでした。

そこで私が思い出したのは、ブロック崩しもどきのゲームを作ったときに、先生のサンプルから真似して見よう見まねで書いたものの中に、ブロックをきっちりすきまなく順番に並べて置いていくというものを作ったことをうっすら思い出しました。意味もわからず見よう見まねで書いたものがあったよね、それがもしかしたら参考になるのでは？と息子に言って見せると

block.x = 0 + ((i % 40) * 8);//（iを４０で割った数の余り）×８
block.y = 0 + (Math.floor(i / 40) * 8);//（iを４０で割った商の小数点を切り捨てた数）×８

↑これだ！これがやりたかったの！これのことだったんだ！と感激していました。

これって・・言われればそのとおりだけど、思いついた人はすごいと思う。

％というのは、「割った余りの数値」です。Math.floorとは「小数点を切り捨て」です。

上の例だと、８ピクセルのブロックを４０個ずつ並べたいので、iを４０で割った余りの８倍をx座標にすれば４０までは i （×８）ずつ増えて４０で０に戻り、iを４０で割った商の小数点を切り捨てた数の８倍をｙ座標にすれば、iが４０増えるごとに １（×８）ずつ増えるので４０個ずつで行が下に行くことになります。

ということで、母のかすかな記憶のおかげで偶然にも解決できました。見よう見まねで作ってみたものがこんなところで役に立つとは。おかげで私も、初めてこれの意味を理解することができました。

さらに、ブロックは一種類でしたが今回はりんご、バナナ、さくらんぼを三種類を画像を変えて並べないといけないので、iの数を前の果物の数だけ加えてずらすという工夫が必要でした。

以下コメント部分はゆうじの解説です。

function endStart(){// 結果画面
    scene = new Scene();
    core.replaceScene(scene); core.resume();

    //==========
    // ここから
    //==========

    var sound = core.assets["sounds/cf307/trumpet1.mp3"].clone();
    sound.play();

    Fruits = Class.create(Sprite, {　// フルーツというクラスを、Spriteを継承させてつくる
        initialize: function(image){　// クラスのものをつくるときに行う　imageが引数
            Sprite.call(this,32,32);　// 継承したものを呼び出す（これ、32,32）
            this.image = core.assets[image];　//そのクラスのプロパティを設定
        }
    });

    var howmany = localStorage.getItem("howmanyF");　// howmanyFで名付けた配列を取り出して
                                                     howmanyと名付ける
    var howmanyA = howmany.split(",");　// howmanyを区切って取りしたものをhowmanyAとする
    var howmanyN =[];// 空っぽの配列を作る
    for (var n in howmanyA) {　// howmanyAの中身を順番に数字にする（長さ分だけ繰り返す例えば、
                               2,3,5とかなら３）
    var N = Number(howmanyA[n]);　// howmanyAのn番目を文字列から数値にする（文字列として保存
                                 されているから）
    howmanyN.push(N); // 数値にしたものを作っておいた空っぽの配列howmanyNに入れる 
    console.log(howmanyN);　// howmanyNというのは（りんごの数、バナナの数、さくらんぼの数）
                            という配列なので、howmanyN[0]はりんごの数、
                            howmany[1]はバナナの数、howmany[2]はさくらんぼの数になる
    }

　　 //林檎をさっき皿の上にのったかずだけ出す
    for(var Fx = 0; Fx < howmanyN[0]; Fx++){　// りんごの数分だけ繰り返す（howmanyN[0]という
　　　　　　　　　　　　　　　　　　　　　　　　　　　のが今りんごの個数になっているのでその分繰り返す）
        var apple = new Fruits("images/cf307/monkeyapple.png");
        apple.x = 0 + ((Fx % 10) * 32); // １０個まで３２ずつずらして並べ、かつ１０個ずつで折り返し
　　　　　　　　　　　　　　　　　　　　　　　　たいので、「りんごの個数を１０で割った余り×３２」をｘ座標と
　　　　　　　　　　　　　　　　　　　　　　　　する
        console.log(apple.x);
        apple.y = (Math.floor(Fx / 10) * 32); // １０個ならべたら次の行にするには「りんごの数を
　　　　　　　　　　　　　　　　　　　　　　　　　　　１０で割った数の小数点を切り捨てた数×３２」をりんご
　　　　　　　　　　　　　　　　　　　　　　　　　　　のｙ座標とする
        scene.addChild(apple);
    }

　　//バナナをその続きからだす
    for(var Fx2 = 0; Fx2 < howmanyN[1]; Fx2++){
        var banana = new Fruits("images/cf307/banana.png");
        banana.x = 0 + (((Fx2 + Fx) % 10) * 32);// バナナもりんごと同様だが、りんごの後に並べるので
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　りんごの分をずらさないといけないので個数はりんごの
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　分も加えた（Fx2 + Fx）とする
        console.log(Fx);
        banana.y = (Math.floor((Fx2 + Fx) / 10) * 32);
        scene.addChild(banana);
    }

    //さくらんぼをバナナの続きからだす
    for(var Fx3 = 0; Fx3 < howmanyN[2]; Fx3++){
        var cherry = new Fruits("images/cf307/sakuranbo.png");
        cherry.x = 0 + (((Fx3 + Fx2 + Fx) % 10) * 32);// りんごとバナナの分ずらさないといけないの
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　でその分の個数を加えた（Fx3 + Fx2 + Fx）と
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　する
        console.log(Fx3);
        cherry.y = (Math.floor((Fx3 + Fx2 + Fx) / 10) * 32);
        scene.addChild(cherry);
    }

    scene.backgroundColor = "green";
    var score = localStorage.getItem("monkey_score");

    var scorelabel = new Label("結果: " + score);
    scorelabel.x = 320 / 2 -100;
    scorelabel.y = 340;
    scorelabel.color = 'yellow';
    scorelabel.font = "48px 'PixelMplus10'";
    scene.addChild(scorelabel);
    //console.log(scorelabel);

//==========
// ここまで
//==========

}

【感想】

今回の発表は、発表用の原稿の紙がなかったこともあって、アドリブの効かない息子は、デモプレイを一回やったっきり、だんまりで間が持たず、（デモプレイを繰り返ししていればよかったのにそれもなぜかせず ^♢^; ）、苦労したんだからそのあたりもうちょっと説明したらいいのになと可笑しかったのですが、それも一つの個性なので、まあいいかと思います。（みんな違ってみんないい）

奇をてらわずシンプルで、息子の真面目さが出たようなゲームだと思いました。ゲームとして突き抜けたようなアイデアはないけれど、こういうふうに動かしたい、こういうものを出したいという構想を思い描いたとおりに実現させました（プログラミングの醍醐味だね）。そういうところを見ると、もしかすると息子はゲームよりも、実用的なアプリとかシステムをつくるプログラミングのほうが向いているかも知れないなと思いました。

ゲーム投稿サイト9leapに投稿してみました。こちらは得点の登録ができるプラグインがあるので、得点ランキングがでるところがいいです！

http://9leap.net/games/5633

AIに挑戦せよという授業の中で作ったものです。

前の、45.ブッタ様大噴火、47.おならして帰る を応用してシューティングゲームにして、ダメージによって敵の画像・攻撃・動きが変わるようにしました。

マンドラゴラのつもりで描いた敵が、にんじんに見えてしまうのは、頭の葉っぱが短すぎたからでしょう。

（授業での発表のとき、デモ用に当たり判定を外してゲームオーバーにならないようにしておきました。発表が終わったので元に戻したら、先生が「ああ、これマンドラゴラか〜」と言われて再度プレイされて、一瞬でやられてゲームオーバーになってしまい可笑しかったです）

工夫やこだわり

・ボスのビームは関数 function bossbeam(w, h, b)を作って、変化させた

・クリアのときの大爆発

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

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

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

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

【ポイント】

・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回だけ働くように書き直してみました。すると、やはりそのとおりだったみたいで、動くようになりました。ﾔｯﾀｰ/

これから何かに行き詰まったら、お風呂に入ることにします^^;

修正前

修正後

     　　　　　　                                              　　     

通常モード

おたすけモード （ゲームオーバーなし・おたすけボタン有）

・ドラッグで左右に移動、離すと矢を放ちます。
・矢は光っているときしか撃てません。
・バグ（虫）に捕まるとゲームオーバーです。避けてください。

【おたすけモード】
・バグに捕まってもゲームオーバーになりません。
・画面のどこかにあるおたすけボタンをクリックすると、まとめて全員救出することができます。
・クリアした後の画面がループして繰り返します。

〜素材〜
CODE FRIENDS大垣ドリームコアS3の皆さん
©️おざきしめじ　©効果音ラボ　(C)PANICPUMPKIN
無料効果音で遊ぼう！　フリー音楽素材/魔王魂　
DOTS・DESIGN　ぴぽや　ドット絵素材　

解説はこちら

 

 

 

 

 

 

 

 

 

 

クリックで拡大

人工知能のところで、カウントによって画像や動きを変化させるということをやったので、それを使って、連打の数によって画像が変化するものをつくりました。

60以上になると、千万両の小判が降ってきますが、これはなかなか難しいと思います。

【工夫したところ】

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

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