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

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

最初、背景と一緒にアイテムもスクロールにしてループで動かしたため、一度消えたものは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（自由研究）