花火（解説）

soundの中に入っていた爆発音が、花火の音ように聴こえたので作ってみたものです。

花火が上がって、上で爆発させるにはどのようにしたらよいか考えました。

まず線と透明の花火（０フレーム目を透明にしておけばよい）を同じx座標上に出しておいて、線を上にのぼらせていって、花火と衝突したら、爆発させることにしました。

あとは、これをx座標の位置をランダムにしてloopで繰り返せば、何発も繰り返し花火が上がり、花火のほうはy座標をランダムして高さを変えました。

 

 

// Main
console.log("Hello EnchantJS!!");

var assets = [
 "images/e_tanuki.png",
 "images/title.png",// CodeFriendsタイトル
 "sounds/hit.mp3",
 "sounds/jump.mp3",
 "images/space.png",
 "images/beam.png",
 "images/cf307/hanabi.png",　
 "sounds/bomb.mp3" 
 ];

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

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

    // 背景
    var space = new ExSprite(320, 480);
    space.image = core.assets["images/space.png"];
    space.x = 0;
    space.y = 0;
    scene.addChild(space);

    // 花火 
    var wait = getRandom(20, 30);
    scene.tl.delay(wait);
    scene.tl.then(function() {
        //花火の火花
        var hanabi = new ExSprite(100, 100);
        hanabi.image = core.assets["images/cf307/hanabi.png"];
        var x = getRandom(0, 320 - 6);
        hanabi.x = x - 48;
        var y = getRandom(0, 160)
        hanabi.y = y;
        scene.addChild(hanabi);
        //花火の線
        var beam = new ExSprite(6, 32);
        beam.image = core.assets["images/beam.png"]; 
        beam.x = x; 
        beam.y = 480;
        scene.addChild(beam); 
        beam.tl.moveBy(0, -480, 100);
        beam.tl.then(function() {
            beam.remove(); 
        });
        //衝突したら、音と爆発アニメ
        hanabi.addCollision(beam);　
        hanabi.addEventListener(Event.COLLISION, function(e) { 　　　　
            var sound = core.assets["sounds/bomb.mp3"].clone();
            sound.play(); 
            // hanabi(アニメーション)
            hanabi.image = core.assets["images/cf307/hanabi.png"];
            hanabi.frame = []; 
            hanabi.frame = [0,1,2,3,4,5,6,7,8,9,10,null];
            beam.remove();  
        });
    });
    scene.tl.loop();

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

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();
}