カテゴリー: 自由研究

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

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

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

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

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

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

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

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

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

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

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

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

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

←これの右側

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

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

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

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

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

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

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

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

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

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

擬似3Dの授業で作ったものです。息子は、ジャンプからバネのついているおじさんが思いついてバネ山さんになりました。

例によってももちゃんでもつくってみましたが、あまりインスピレーションが湧きませんでした。浮かんだアイデアも、どうやってもうまくいかず、実装できませんでした。2Dなら2Dで、レトロな感じで作ったほうが面白いように感じました。でもこれも、やってみてわかったことで、遠近感の作り方とか、followとか、skipとか色々役に立ちそうなものも教えてもらえました。

すごろくゲームをつくりたい！と思ってつくりました。6マスでゴールなので、”最短すごろく”です。

4を出すとスタートに戻りますが、次に6を出せばゴールなので、意味がありません^^

中身はif祭りです。しかもコピー&ペーストばかりなので、無駄に長いです。

もっとコンパクトに綺麗に書けるのでしょうが、そのときまでに習った知識で思ったとおりに動くことを目標につくりました。ifの練習になりました。

何回目でゴールできたかによって、結果画面が変わります。手も足もないのに・・？ツッコミどころ満載の結果画面となっています。

最速の戦闘機を検索したつもりでしたが、F22は最強でした。

息子がシューティングゲームの作成のまとめとして、自分の普段の勉強の世界をゲームにしたものです。

息子が苦手なものは、作図と漢字です。その苦手なものを、愛用の消しゴムと三角定規からできた戦闘機の鉛筆ショットで倒していくというゲームです。

xは方程式のx、矢印は理科の光の作図、後醍醐は社会に出てくる難しい漢字（社会や理科では答えはわかるのに漢字が書けないということがしばしばあります）、ボスのコンパスはもっとも苦手なのがコンパスで円を描くことだからです。

矢印弾が向かってくるのに、角度を変えるところに苦労していました。

コンパスは実物を見ながら一生懸命ドット絵を描きました。作図に苦手意識があるので、最初のうちはドット絵にも苦手意識がありましたが、ゲームの為に頑張って描くうちに最初の頃からは見違えるほど上手になったと思います。

当たり前ですが、絵の上手な人はドット絵も上手ですね。絵が描ける人には簡単なことなのかもしれませんが、ドット絵を描くときに、どの点を取るかというのは、非常に難しい作業だと思います。

いつか先生が絵をトレースしてドット絵を描くという方法を教えてくださいましたが、これは私にはむしろ難しいです。絵に達者な先生だからこその技でしょう。絵（か写真）を見ながら描いた方が容易に思います。

「やっぱりももちゃん」というのは、やっぱりこれもももちゃんで作るのね？というニュアンスです。

課題の「ドカンをすり抜けろ」というサンプルゲームに習ってつくったものです。

ステージを5個もつくりました。1面は普通にすり抜けていく、2面はお芋が落ちてくる、3面は土管が動く、4面は土管に火が着いている、5面は土管が閉まる、とだんだん難しくなっているような様子になっています。4面からは、ライフもつけて、コンティニューできるようにしました。

5面まであるので、長いコードになってしまいました。

音がうるさいですね。しかも、パクっという音は、なぜか繰り返すと大きくなっていき、最後は破裂音になってしまいます。enchant.jsは音については難点があるようです。

プログラミングのポイントとしては、土管をきれいに動かしていくことではないでしょうか。5面は、土管が閉まり始める前とあとでは、別の動きになっているのですが、土管の速度が同じになるように結構面倒な調整をしています。

難しすぎても、簡単すぎてもつまらないですが、簡単めにして、それでもあまりゲームの得意でない人ががんばってクリアできるくらいの難易度にすればちょうどいいのかなと思っています。

それで、例によって自分がなかなかクリアできないので、オートマチックにクリアする画面をつけました。5面をクリアすると、オートマチックなデモ画面になります。

このデモ画面は、どうなっているかというと、ももちゃんはじつは同じ軌道で飛んでいるだけです。ももちゃんに触らないように、土管の動きのほうをプログラミングしました。なので、ごくたまにバグって、土管に触れてしまい、ゲームオーバーになることがあります。

激重の極みeasy? 改をさらに改良して、touchmoveを習ったので、バーをtouchmoveで動かせるようにし、球の速さも一定（プログラムの中で15に設定）にしたものです。

ゲームクリアすると、ボタンが出て、オートマチック画面になります。

バーをドラッグで動かす部分

 // 画面をドラッグしてバーを動かす
 scene.addEventListener(Event.TOUCH_START, function(e){
     console.log("タッチ");
     console.log(e.x);
     X = bar.x - e.x; // サイコロとタッチした場所の座標の差分
 });
 scene.addEventListener(Event.TOUCH_MOVE,function(e){
     bar.x = e.x + X; 
 });

たぬきが障害物を飛び越えながらコインをとっていくというゲームです。

最初、背景と一緒にアイテムもスクロールにしてループで動かしたため、一度消えたものは2回目のループのときには消えてしまっていて出てこない（消したものをループさせていた）ということがわからず、苦労しました。

先生がサンプルコードをくださったので、それで色々動かしてみて、わかりました。

それで、コインが蘇ったので、このような題名になりました。

このサンプルコードには、配列を使った複数のアイテムの作り方と、それに対する衝突判定のやり方も書いてあったので、その後色々作るのに非常に参考になりました。

その部分の抜粋

    // 1, アイテムを10個作ります
    var items = new Array();
    for(var i=0; i<10; i++){
        var item = new ExSprite(16, 20);
        item.image = core.assets["images/coin.png"];
        item.x = 100 + i * 50;
        item.y = 390;
        item.tag = "c";// タグをつけます   
        stageGroup.addChild(item);
        items.push(item);
    }

まず、itemsという配列を作っています。var items = new Array();

そして、forループで10個のitemをつくり、それを配列itemsの中に入れています。items.push(item);

これで、itemの一つひとつは、items[i]という名前が振られることになります。（iは0から9まで）

  // 2, 当たり判定をつけます
    for(var i=0; i<items.length; i++){
       tanuki.addCollision(items[i]);
    }

それに当たり判定をつけるには、items[0]からitems[9]までの当たり判定をforループでつければよいということになります。

サンプルコード

// Main
console.log("Hello EnchantJS!!");
var assets = [
    // 背景
    "images/back_mountain.png",
    "images/kati_land.png",
    // コイン
    "images/coin.png",
    // 虫
    "images/bug.png",
    // たぬき
    "images/tanu.png",
    // CodeFriendsタイトル
    "images/title_gameclear.png",
    "images/title_gameover.png",
    "images/title.png"
];

function gameStart(){// ゲーム画面
    scene = gameManager.createGameScene();
    core.replaceScene(scene); core.resume();

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

    //グループ
    var stageGroup = new Group();
    scene.addChild(stageGroup); 
    stageGroup.tl.moveBy(-320, 0, 50);
    stageGroup.tl.moveTo(0,0,0);
    stageGroup.tl.loop();
    
    // 背景
    var background = new ExSprite(640, 480);
    background.image = core.assets["images/back_mountain.png"];
    background.x = 0;
    background.y = 0;
    stageGroup.addChild(background);
    var land = new ExSprite(640, 60);
    land.image = core.assets["images/kati_land.png"];
    land.x = 0;
    land.y = 420;
    stageGroup.addChild(land);

    // スコア
    var score = 0;
    var scoreLabel = new Label();
    scoreLabel.text = 'SCORE : 0';
    scoreLabel.color = 'white';
    scoreLabel.font = "24px 'PixelMplus10'";
    scene.addChild(scoreLabel);

    //むし１
    var bug1 = new ExSprite(32, 32);
    bug1.image = core.assets["images/bug.png"];
    bug1.x = 200;
    bug1.y = 390;
    stageGroup.addChild(bug1);

    //むし２
    var bug2 = new ExSprite(32, 32);
    bug2.image = core.assets["images/bug.png"];
    bug2.x = 520;
    bug2.y = 390;
    stageGroup.addChild(bug2);

    // 1, アイテムを10個作ります
    var items = new Array();
    for(var i=0; i<10; i++){
        var item = new ExSprite(16, 20);
        item.image = core.assets["images/coin.png"];
        item.x = 100 + i * 50;
        item.y = 390;
        item.tag = "c";// タグをつけます   
        stageGroup.addChild(item);
        items.push(item);
    }

    //たぬき
    var tanuki = new ExSprite(32, 32);
    tanuki.image = core.assets["images/tanu.png"];
    tanuki.x = 80;
    tanuki.y = 390;
    tanuki.frame = [0, 1, 2];
    scene.addChild(tanuki);
    scene.addEventListener(Event.TOUCH_START, function(){
        tanuki.frame = [3];
        tanuki.tl.moveBy(0, -100, 10, enchant.Easing.QUAD_EASEOUT);
        tanuki.tl.moveBy(0, 100, 10, enchant.Easing.QUAD_EASEIN);
        tanuki.tl.then(function() {
            tanuki.frame = [0, 1, 2];
        });
    });
    tanuki.addCollision(bug1);
    tanuki.addCollision(bug2);

    // 2, 当たり判定をつけます
    for(var i=0; i<items.length; i++){
       tanuki.addCollision(items[i]);
    }

    tanuki.addEventListener(Event.COLLISION, function(e){
        //虫と衝突したとき
        if (false) {
            core.stop();
        }
        //アイテムと衝突したとき
        if (e.collision.target.tag == "c") {
            score++;
            scoreLabel.text = 'SCORE : ' + score;
            //e.collision.target.tl.moveBy(0, -64, 10);
            // 同じタグの場合は消します
            e.collision.target.tl.then(function() {
                e.collision.target.remove();// 消します          
            });
        }
    });

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

function getRandom(start, end) {
    return start + Math.floor( Math.random() * (end - start + 1));
}
function titleStart(){// タイトル画面
    var scene = gameManager.createTitleScene();
    core.replaceScene(scene); core.pause();
    scene.on(enchant.Event.TOUCH_START, function(){gameStart();});
}

//==========
// EnchantJS
enchant();
var gameManager;
var core;
var scene;
window.onload = function(){
    gameManager = new common.GameManager();
    core = gameManager.createCore(320, 480);
    core.preload(assets);
    core.onload = function(){titleStart();};
    core.start();
}

自由研究の内容はこちら

蘇ったcoinエアギタぬきv（自由研究）