ブロック崩し激重(空想芸~(解説)

前回、先生のサンプルコードから、配列を使った当たり判定を知ったので、それをつかってブロックくずしのようなものを作ってみました。

ブロックは1200個です。通常のブロック崩しのように跳ね返らず、貫通するので、多くしてみました。どれくらい多くできるのかなとやってみたら、Windowsでは重くなってしましました。

スコアによってだんだん弾のスピードを上げていこうとしましたが、速くすると、タイミングによってはバーをすりぬけてしまうので、断念しました。動くものどうしの衝突判定は色々難しいようです。

クリアすると、「?! 全部消したの?!      想定外です‥」と表示されます。

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

var assets = [
 "images/back_space.png", 
 "images/kati_tanuki.png",
 "images/title.png",// タイトル
 "sounds/coin.mp3",
 "sounds/jump.mp3",
 "images/cf307/baayoko64.png",
 "images/xe_bullet_r.png",
 "images/gameover.png", 
 "images/cf307/blueground.png",
 "sounds/cf307/decision1.mp3",
 "sounds/cf307/decision3.mp3",
 "sounds/cf307/rabohyuuu.mp3",
 "images/gameclear.png",
 "sounds/cf307/trumpet-dub1.mp3",
 "sounds/cf307/boyoyon1.mp3",
 "sounds/cf307/trumpet1.mp3",
 "sounds/cf307/dondonpafupafu1.mp3",
 "images/block_d.png", 
 "images/cf307/block8p.png", 
 "sounds/cf307/ME014-090610-loss02-wav.mp3",
 "sounds/cf307/hit04.mp3",  
 "images/cf307/10_480.png",   
];

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

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

scene.backgroundColor = "darkgray";
 
 // 背景
 var sky = new ExSprite(320, 480);
 sky.image = core.assets["images/back_space.png"];
 scene.addChild(sky);

 // 地面
 var ground = new ExSprite(320, 55);
 ground.image = core.assets["images/cf307/blueground.png"];
 ground.x = 0;
 ground.y = 480; 
 scene.addChild(ground);

 // 壁左
 var kabe = new ExSprite(30, 480);
 kabe.image = core.assets["images/cf307/10_480.png"]; 
 kabe.x = -30;
 kabe.y = 0;
 scene.addChild(kabe); 
 kabe.tag = "kabe";

 // 壁右
 var kabem = new ExSprite(30, 480);
 kabem.image = core.assets["images/cf307/10_480.png"]; 
 kabem.x = 320;
 kabem.y = 0;
 scene.addChild(kabem); 
 kabem.tag = "kabem";

 // バー
 var bar = new ExSprite(64, 6);
 bar.image = core.assets["images/cf307/baayoko64.png"];
 scene.addChild(bar);
 bar.x = 320 / 2 - 32;
 bar.y = 480 - 32;
 bar.tag = "bar";
 //bar.scale(10, 0);//テスト用

 // 玉グループ
 var tamaGroup = new Group();
 scene.addChild(tamaGroup);     

 // 玉
 var tama = new ExSprite(9, 9);
 tama.image = core.assets["images/xe_bullet_r.png"];
 //scene.addChild(tama);
 tama.x = bar.x + bar.width / 2 - tama.width / 2;
 tama.y = bar.y - tama.height;
 tamaGroup.addChild(tama);
 tama.originX = 0;
 tama.originY = 0;
 tama.scale(0.6, 0.6);  
 //tama.scale(4, 4);// テスト用

 // 最初の音
 var sound0 = core.assets["sounds/cf307/decision3.mp3"].clone();
 sound0.play(); 
  
 // 玉の動き
 var x1 = getRandom(-320, 640 - tama.width);
 //var x1 = getRandom(-320, 0);// テスト用
 tama.tl.moveTo(x1, -9, 35, enchant.Easing.SINE_EASEOUT); 
 // 最初に跳ね返る音
 tama.tl.then(function(){
     var sound1 = core.assets["sounds/cf307/decision1.mp3"].clone();
     sound1.play(); 
 });
 var x2 = getRandom(0, 320 - tama.width);
 tama.tl.moveTo(x2, 480, 35, enchant.Easing.SINE_EASEOUT);

 // ブロックグループ
 var blockGroup = new Group();
 scene.addChild(blockGroup);

 // スコア表示
 var score = 0;
 scoreLabel = new Label('SCORE : 0');
 scene.addChild(scoreLabel);
 scoreLabel.x = 10;
 scoreLabel.y = 10;
 scoreLabel.color = 'white';
 scoreLabel.font = "24px 'PixelMplus10'";
 scoreLabel.addEventListener(Event.ENTER_FRAME, function() {
     scoreLabel.text = 'SCORE : ' + score;
 });
    
 // ブロック(繰り返し処理)
 var blocks = new Array();
 for(var i=0; i<1200; i++){ 
     // ブロック
     var block = new ExSprite(8, 8);
     block.image = core.assets["images/cf307/block8p.png"]; 
     block.x = 0 + ((i % 40) * 8);
     block.y = 0 + (Math.floor(i / 40) * 8);
     blockGroup.addChild(block);
     block.tag = "b";// タグをつけます 
     blocks.push(block); 
 }

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

 // 当たり判定
 tama.addCollision(bar); 
 tama.addCollision(kabe); 
 tama.addCollision(kabem); 
 tama.addEventListener(Event.COLLISION, function(e) {
     // クリア
     if(1200 <= score){
         tama.remove();
         var label6 = new Label("?! 全部消したの?!      想定外です‥");
         label6.x = 60;
         label6.y = 480 / 2 - 16 / 2 + 48;
         label6.color = "white";
         label6.font = "24px 'PixelMplus10'";
         scene.addChild(label6);
         var sound100 = core.assets["sounds/cf307/rabohyuuu.mp3"].clone();
         sound100.play();
         var clear = new ExSprite(230, 32);
         clear.image = core.assets["images/gameclear.png"];
         scene.addChild(clear);
         clear.x = 320 / 2 - clear.width / 2;
         clear.y = 480 / 2 - clear.height;
         clear.scale(0.5, 0.5);
         clear.tl.scaleTo(1.4, 1.4, 4);
         clear.tl.scaleTo(1.2, 1.2, 4);      
     } 
     // 壁にあたったら
     // 壁左
     if(e.collision.target.tag == "kabe"){
         tama.tl.clear();
         var x1 = getRandom(100, 320 - tama.width);
         tama.tl.moveTo(x1, -9, 17, enchant.Easing.SINE_EASEOUT);
         tama.tl.then(function(){
             var sound1 = core.assets["sounds/cf307/decision1.mp3"].clone();
             sound1.play(); 
         });
         var x2 = getRandom(0, 320 - tama.width);
         tama.tl.moveTo(x2, 480, 35, enchant.Easing.SINE_EASEOUT); 
     } 
     // 壁右
     if(e.collision.target.tag == "kabem"){
         console.log("kabem");
         tama.tl.clear();
         var x1 = getRandom(0, 220);
         tama.tl.moveTo(x1, -9, 17, enchant.Easing.SINE_EASEOUT);
         tama.tl.then(function(){
             var sound1 = core.assets["sounds/cf307/decision1.mp3"].clone();
             sound1.play(); 
         });
         var x2 = getRandom(0, 320 - tama.width);
         tama.tl.moveTo(x2, 480, 35, enchant.Easing.SINE_EASEOUT); 
     } 
     // ブロックに当たったら
     if(e.collision.target.tag == "b"){
         e.collision.target.tl.then(function() {
             e.collision.target.remove();// 消します 
             score += 1;
             //score += 100; // テスト 
             var sound = core.assets["sounds/cf307/hit04.mp3"].clone();
             sound.play(); 
         });
         if(1199 <= score){
             tama.remove();
             var label6 = new Label("?! 全部消したの?!      想定外です‥");
             label6.x = 60;
             label6.y = 480 / 2 - 16 / 2 + 48;
             label6.color = "white";
             label6.font = "24px 'PixelMplus10'";
             scene.addChild(label6);
             var sound100 = core.assets["sounds/cf307/rabohyuuu.mp3"].clone();
             sound100.play();
             var clear = new ExSprite(230, 32);
             clear.image = core.assets["images/gameclear.png"];
             scene.addChild(clear);
             clear.x = 320 / 2 - clear.width / 2;
             clear.y = 480 / 2 - clear.height;
             clear.scale(0.5, 0.5);
             clear.tl.scaleTo(1.4, 1.4, 4);
             clear.tl.scaleTo(1.2, 1.2, 4);      
         } 
     }
     // バーに当たったら
     if(e.collision.target.tag == "bar"){
         tama.tl.clear();
         var x1 = getRandom(-320, 640 - tama.width);
         tama.tl.moveTo(x1, -9, 35, enchant.Easing.SINE_EASEOUT);
         tama.tl.then(function(){
             var sound = core.assets["sounds/cf307/decision1.mp3"].clone();
             sound.play(); 
         }); 
         var x2 = getRandom(0, 320 - tama.width);
         tama.tl.moveTo(x2, 480, 35, enchant.Easing.SINE_EASEOUT);
         // 音
         var sound2 = core.assets["sounds/cf307/decision3.mp3"].clone();
         sound2.play();       
         //tama.tl.moveTo(160, 471, 16); //テスト用
         //score += 500; //テスト用
         /* // 球が速くなる
         if(300<= score && score < 600){
             tama.tl.clear();
             var x1 = getRandom(0, 320 - tama.width);
             tama.tl.moveTo(x1, -9, 30, enchant.Easing.SINE_EASEOUT); 
             tama.tl.then(function(){
                 var sound = core.assets["sounds/cf307/decision1.mp3"].clone();
                 sound.play(); 
             }); 
             var x2 = getRandom(0, 320 - tama.width);
             tama.tl.moveTo(x2, 480, 30, enchant.Easing.SINE_EASEOUT);
         }
         if(600 <= score && score < 1200){
             tama.tl.clear();
             var x1 = getRandom(0, 320 - tama.width);
             tama.tl.moveTo(x1, -9, 27, enchant.Easing.SINE_EASEOUT); 
             tama.tl.then(function(){
                 var sound = core.assets["sounds/cf307/decision1.mp3"].clone();
                 sound.play(); 
             }); 
             var x2 = getRandom(0, 320 - tama.width);
             tama.tl.moveTo(x2, 480, 27, enchant.Easing.SINE_EASEOUT);
         }
         if(900 <= score ){
             tama.tl.clear();
             var x1 = getRandom(0, 320 - tama.width);
             tama.tl.moveTo(x1, -9, 24, enchant.Easing.SINE_EASEOUT); 
             tama.tl.then(function(){
                 var sound = core.assets["sounds/cf307/decision1.mp3"].clone();
                 sound.play(); 
             }); 
             var x2 = getRandom(0, 320 - tama.width);
             tama.tl.moveTo(x2, 480, 24, enchant.Easing.SINE_EASEOUT);
         } 
*/ 
     } 
 }); 
 
 // 画面をタップしてバーを動かす
 scene.addEventListener(Event.TOUCH_START, function(e){
     console.log("タッチ");
     console.log(e.x);
     bar.tl.moveTo(e.x - 32, 480 - 32, 3, enchant.Easing.QUART_EASEINOUT);
 });

 // ゲームオーバー
 ground.addCollision(tama); 
 ground.addEventListener(Event.COLLISION, function(e) {
     tama.remove();
     var over = new ExSprite(230, 32);
     over.image = core.assets["images/gameover.png"];
     scene.addChild(over);
     over.x = 320 / 2 - over.width / 2;
     over.y = 480 / 2 - over.height + 16;
     over.scale(0.5, 0.5);
     over.tl.scaleTo(1, 1, 8);
     var sound = core.assets["sounds/cf307/ME014-090610-loss02-wav.mp3"].clone();
     sound.play();
     over.tl.then(function() {
         var label = new Label(" TAP TO RETRY");
         label.color = 'red';
         label.font = "28px 'PixelMplus10'";
         label.textAlign = "center";
         label.y = 220 + 100;
         scene.addChild(label); 
         scene.addEventListener(Event.TOUCH_START, function() {
             gameStart();
         }); 
     });
 });               

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

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(解説・自由研究)

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

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

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

    //むし2
    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(自由研究)

恐怖ももちゃんサバイバル(解説)

いがぐりをたくさん出してみたら、あまりに気持ち悪く、そのままでは耐えられなかったので白くしてみたらウイルスっぽかったので、思いつきました。

ういるすは画面上いっぱいの範囲でランダムに出ますが、いきなりももちゃんに重なってしまうとそこですぐ終わってしまいます。

そこで、重ならないように出す工夫をしました。

まず、ウイルスを画面内のランダムの位置に出します。

 var igaguri = new ExSprite(32, 32);
 igaguri.image = core.assets["images/cf307/igagurikurugray.png"];
 igaguriGroup.addChild(igaguri);
 igaguri.tag = "いがぐり"; 
 igaguri.frame = [0, 1, 2, 3];
 var x1 = getRandom(0, 320 - 32);
 igaguri.x = x1;
 var y1 = getRandom(0, 480 - 32);
 igaguri.y = y1; 

ここで、ウイルスの出現する座標は、ランダムに指定される(x1, y1)です。

ももちゃんにいきなり重ならないように、ここでランダムの位置が重なる値ならば、重ならない値に変更するようにします。

if(momo.x - 32 <= x1 && x1 <= momo.x + 32){
    igaguri.x = x1 - 64;
}
if(momo.y - 32 <= y1 && y1 <= momo.y + 32){
    igaguri.y = y1 + 64;
} 

もしもウイルスがももちゃんの座標の周囲32ピクセル以内に入りそうなら、64ピクセル離れた座標にする、ということをしています。こうすれば、重なることがありません。

そして、ウイルスをももちゃんに向かってじわじわ接近させ、消します。

igaguri.tl.moveTo(momo.x, momo.y, 100); 
igaguri.tl.then(function(){      
    igaguri.remove();     
});       

以上を3カウント毎に繰り返す(3カウントに一個ずつのタイミングで、ウイルスを画面のどこかに出現させる)ので、合わせて以下のようになります。

// ももちゃんに被らないようにいがぐりを出す
var d = 3;
scene.tl.delay(d). then(function(){
    var igaguri = new ExSprite(32, 32);
    igaguri.image = core.assets["images/cf307/igagurikurugray.png"];
    igaguriGroup.addChild(igaguri);
    igaguri.tag = "いがぐり";
    igaguri.frame = [0, 1, 2, 3];
    var x1 = getRandom(0, 320 - 32);
    console.log(x1);        
    igaguri.x = x1;
    console.log(igaguri.x);
    var y1 = getRandom(0, 480 - 32);
    console.log(y1); 
    igaguri.y = y1;
    console.log(igaguri.y);
    if(momo.x - 32 <= x1 && x1 <= momo.x + 32){
        igaguri.x = x1 - 64;
        console.log("igaguri.x");
    }
    if(momo.y - 32 <= y1 && y1 <= momo.y + 32){
        igaguri.y = y1 + 64;
    }    
    igaguri.tl.moveTo(momo.x, momo.y, 100);
    igaguri.tl.then(function(){
        igaguri.remove();
    });           
});
scene.tl.loop();

お薬も同じようにして、ももちゃんに重ならないように出します。

完成したソースコード

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

var assets = [
    "images/e_tanuki.png",
    "images/title.png",// タイトル
    "sounds/hit.mp3",
    "sounds/jump.mp3",
    "images/cf307/momo.png", 
    "images/cf307/igagurikurugray.png",
    "sounds/cf307/jump12.mp3",
    "sounds/cf307/pyu15.mp3",
    "images/cf307/momochanzannen.png",
    "images/cf307/igaguri.png",
    "sounds/cf307/se_maoudamashii_onepoint31.mp3",
    "images/title_gameover.png",
    "images/cf307/okusuri.png",
    "sounds/cf307/correct2.mp3",
    "images/cf307/retrybotan.png",
    "images/cf307/sikibutonn.png",
    "images/cf307/kakebutonn.png",
    "images/cf307/hyounoua.png",
    "images/title_gameclear.png",
    "images/cf307/tarunohuroue.png",
    "images/cf307/tarunohurosita.png",
    "images/cf307/yuge.png",
    "images/cf307/sizuku0.png",
    "sounds/cf307/water-dopon1.mp3",
    "sounds/cf307/jump03.mp3",
    "sounds/fall.mp3",
    "sounds/cf307/clear04.mp3",
    "images/cf307/tenugui.png",
    "images/cf307/momobotann.png",
    "images/joe_gass.png",
    "sounds/gass.mp3",
    "sounds/cf307/water-bukubuku3.mp3",
    "sounds/cf307/bath-thapon1.mp3",
    "sounds/cf307/matchstick-put-fire1.mp3",
    "sounds/cf307/boyon1.mp3",
    "sounds/cf307/jump02.mp3",
];

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

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

    scene.backgroundColor = "orange";
    // ももちゅあんグループ 
    var momoGroup = new Group();
    scene.addChild(momoGroup);

    // ウイルスグループ
    var igaguriGroup = new Group();
    scene.addChild(igaguriGroup);
    
    // 薬グループ
    var kusuriGroup = new Group();
    scene.addChild(kusuriGroup);

    // ももちゃん
    var momo = new ExSprite(32, 32);
    momo.image = core.assets["images/cf307/momo.png"];
    momo.x = 320 /2 - 16;
    momo.y = 128 + 32 * 3 + 16;
    scene.addChild(momo);
    momo.frame = [0, 0, 1, 1, 2, 2]; 
  
    // 薬グループ1
    var kusuriGroup1 = new Group();
    scene.addChild(kusuriGroup1);

    // ももちゃん移動
    scene.addEventListener(Event.TOUCH_START, function(e){
        momo.moveTo(e.x - 16, e.y - 16, 0);
        console.log(e.y);
        var sound = core.assets["sounds/cf307/jump12.mp3"].clone();
        sound.play();
    });

    // ももちゃんに被らないようにいがぐりを出す
    var d = 3;
    scene.tl.delay(d). then(function(){
        var igaguri = new ExSprite(32, 32);
        igaguri.image = core.assets["images/cf307/igagurikurugray.png"];
        igaguriGroup.addChild(igaguri);
        igaguri.tag = "いがぐり";
        igaguri.frame = [0, 1, 2, 3];
        var x1 = getRandom(0, 320 - 32);
        console.log(x1);        
        igaguri.x = x1;
        console.log(igaguri.x);
        var y1 = getRandom(0, 480 - 32);
        console.log(y1); 
        igaguri.y = y1;
        console.log(igaguri.y);
        if(momo.x - 32 <= x1 && x1 <= momo.x + 32){
            igaguri.x = x1 - 64;
            console.log("igaguri.x");
        }
        if(momo.y - 32 <= y1 && y1 <= momo.y + 32){
            igaguri.y = y1 + 64;
        }    
        igaguri.tl.moveTo(momo.x, momo.y, 100);
        igaguri.tl.then(function(){
           igaguri.remove();
        });           
    });
    scene.tl.loop();

    // ももちゃんに被らないように薬を出す
    momo.tl.delay(32).then(function(){
        var kusuri = new ExSprite(32, 32);
        kusuri.image = core.assets["images/cf307/okusuri.png"];
        var x2 = getRandom(0, 320 - 32);
        kusuri.x = x2;
        var y2 = getRandom(0, 480 - 32);
        kusuri.y = y2;
        kusuriGroup.addChild(kusuri);
       kusuri.tag = "くすり";  
        if(momo.x - 32 <= x2 && x2 <= momo.x + 32){
            kusuri.x = x2 - 64;
        }
        if(momo.y - 32 <= y2 && y2 <= momo.y + 32){
            kusuri.y = y2 + 64;
        }    
        kusuri.tl.delay(16).then(function(){
            kusuri.remove();
        }); 
    }); 
    momo.tl.loop();
    
    // ウイルスか薬か
    momo.addCollision(igaguriGroup);
    momo.addCollision(kusuriGroup);
    momo.addEventListener(Event.COLLISION, function(e) {
        scene.tl.clear();
        console.log(e.collision.target.tag);
        // ウイルス
        if (e.collision.target.tag == "いがぐり") {
        kusuriGroup.remove();      
        igaguriGroup.remove();
        momo.remove();
        var momoz = new ExSprite(32, 32);
        momoz.image = core.assets['images/cf307/momochanzannen.png'];
        momoz.x = momo.x;
        momoz.y = momo.y;
        momoGroup.addChild(momoz);
        // グサッ
        var sound = core.assets["sounds/cf307/pyu15.mp3"].clone();
        sound.play(); 
        // ウイルスの動き
        var asteroid = new ExSprite(32, 32);
        asteroid.image = core.assets["images/cf307/igagurikurugray.png"];
        asteroid.x = momo.x + 25;
        asteroid.y = momo.y + 18;
        scene.addChild(asteroid);
        asteroid.tl.moveBy(-5, -10, 2);
     // ももちゃん落ちていく
        asteroid.tl.delay(8).then(function(){             
            momoz.tl.moveBy(0, -25, 3);                 
            momoz.tl.delay(3).then(function(){
                var sound = core.assets["sounds/fall.mp3"].clone();
            sound.play();                
            });   
            momoz.tl.rotateBy(720, 20).and().moveBy(0, 480, 20, enchant.Easing.QUAD_EASEIN);           
            momoz.tl.then(function() {
                gameOver();
            });
         });
    }
       // 薬ゲット 
       if (e.collision.target.tag == "くすり") {
            igaguriGroup.remove();
            kusuriGroup.remove();
            // ピンポン
            var sound = core.assets["sounds/cf307/correct2.mp3"].clone();
            sound.play();
            var kusuri = new ExSprite(32, 32);
            kusuri.image = core.assets["images/cf307/okusuri.png"]; 
            kusuriGroup1.addChild(kusuri);
            kusuri.x = momo.x ;
            kusuri.y = momo.y + 5;
            kusuri.tl.rotateBy(270, 6).and().scaleTo(0.1, 0.1, 6);
            // ももちゃんジャンプ 
            kusuri.tl.then(function(){
                kusuri.remove();
                momo.tl.moveBy(0, 15, 6, enchant.Easing.QUAD_EASEOUT);
                momo.tl.then(function(){
                    var sound = core.assets["sounds/cf307/jump03.mp3"].clone();
                    sound.play();
                });
                momo.tl.moveBy(0, -480, 20, enchant.Easing.QUAD_EASEIN);                
                momo.tl.then(function(){
                    gameClear();
                });
            });   
        }      
    });

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

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

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

    scene.backgroundColor = "orange";

    // 敷ふとん
    var siki = new ExSprite(64, 64);
    siki.image = core.assets['images/cf307/sikibutonn.png'];
    siki.x = 0;
    siki.y = 480;
    scene.addChild(siki);
    siki.tl.moveTo(320 / 2 - 32, 200 - 10, 14).and().scaleTo(2, 2, 14).and().rotateBy(360, 14);
    
    // ざんねんももちゃん
    var momoz = new ExSprite(32, 32);
    momoz.image = core.assets['images/cf307/momochanzannen.png'];
    momoz.x = 320 / 2 - 16;
    momoz.y = 0;
    scene.addChild(momoz);
    momoz.tl.moveTo(320 / 2 - 16, 400 / 2 - 16, 16, enchant.Easing.QUAD_EASEOUT).and().scaleTo(2, 2, 16).and().rotateBy(360, 16);
    
    // 掛けぶとん     
    var kake = new ExSprite(64, 64);
    kake.image = core.assets['images/cf307/kakebutonn.png'];
    kake.x = 320;
    kake.y = 0;
    scene.addChild(kake);
    kake.tl.moveTo(320 / 2 - 32, 200 - 6, 18).and().scaleTo(2, 2, 18).and().rotateBy(-360, 18);
    
    // ふとん掛けたら音
    kake.tl.then(function(){
        var sound = core.assets["sounds/cf307/se_maoudamashii_onepoint31.mp3"].clone();
        sound.play();
    }); 

    // 氷嚢
    scene.tl.delay(24).then(function(){
        var hyou = new ExSprite(60, 50);
        hyou.image = core.assets['images/cf307/hyounoua.png'];
        hyou.x = 320 / 2 - 30;
        hyou.y = 0;
        scene.addChild(hyou);
        hyou.scale(0.5, 0.5);
        hyou.tl.moveTo(320 / 2 - 30, 400 / 2 - 53, 5,enchant.Easing.BOUNCE_EASEOUT);
        hyou.tl.then(function(){
            var sound = core.assets["sounds/cf307/boyon1.mp3"].clone();
        sound.play();
        });
    });
   
    // お大事に
    var label1 = new Label("  お大事に‥");
    label1.color = 'black';
    label1.font = "30px 'PixelMplus10'";
    label1.textAlign = "center";
    label1.y = 330; 
    scene.addChild(label1); 
  
    // ゲームオーバーを表示
    var gameover = new ExSprite(147, 48);
    gameover.image = core.assets['images/title_gameover.png'];
    gameover.x = 320 / 2 - gameover.width/2;
    gameover.y = 50;
    scene.addChild(gameover);
    // 大きく
    gameover.scale(0.5, 0.5);
    gameover.tl.scaleTo(1.5, 1.5, 20); 
        
    // リトライボタン
    var retry = new ExSprite(62, 55);
    retry.image = core.assets["images/cf307/retrybotan.png"];
    scene.addChild(retry);
    retry.x = 320 / 2 - retry.width / 2;
    retry.y = 350 ;
    retry.tl.moveBy(0, 50, 20);
    // ボタンをタッチ
   retry.addEventListener(Event.TOUCH_START, function(){
        retry.frame = 1;
        console.log("タッチしました");
    });
    retry.addEventListener(Event.TOUCH_END, function(){
        retry.frame = 0;
        gameStart();
    });

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

function gameClear(){// ゲームクリア画面
    scene = gameManager.createGameScene();
    core.replaceScene(scene); core.resume();

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

    scene.backgroundColor = "orange";

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

    // 湯気
    var yuge = new ExSprite(64, 18);
    yuge.image = core.assets['images/cf307/yuge.png'];
    yuge.x = 320 / 2 - 32;
    yuge.y = 200 - 10 - 50;
    scene.addChild(yuge);
    yuge.tl.scaleTo(2, 2, 10);
    yuge.frame = [0, 0, 1, 1, 2, 2, 3, 3];

    // お風呂の上
    var huroue = new ExSprite(64, 19);
    huroue.image = core.assets['images/cf307/tarunohuroue.png'];
    huroue.x = 320 / 2 - 32;
    huroue.y = 200 - 10;
    scene.addChild(huroue);
    huroue.tl.scaleTo(2, 2, 10);

    // しずくグループ
    var sizukuGroup = new Group();
    scene.addChild(sizukuGroup);

    // ももちゃん
    var momo = new ExSprite(32, 32);
    momo.image = core.assets["images/cf307/momo.png"];
    momo.x = 320 / 2 - 16;
    momo.y = 0;
    scene.addChild(momo);
    momo.frame = [0, 0, 1, 1, 2, 2]; 
    momo.tl.moveTo(320 / 2 - 16, 400 / 2 - 8, 16, enchant.Easing.QUAD_EASEOUT).and().scaleTo(2, 2, 16);
    momo.tl.then(function(){
        momo.tl.moveBy(0, -5, 3);
        // しぶき
        var sizuku = new ExSprite(32, 32);
        sizuku.image = core.assets["images/cf307/sizuku0.png"];
        sizuku.x = momo.x;
        sizuku.y = momo.y;
        scene.addChild(sizuku);
        sizuku.scale(3, 3);             
        sizuku.frame = [0, 1, 2, 3, 4, null];
        var sound = core.assets["sounds/cf307/water-dopon1.mp3"].clone();
        sound.play();
        momo.tl.delay(3).then(function(){
            momo.tl.moveBy(0, 3, 6, enchant.Easing.QUAD_EASEOUT);
            momo.tl.moveBy(0, -3, 6, enchant.Easing.QUAD_EASEOUT);   
            momo.tl.loop();      
        });
        sizuku.tl.delay(24).then(function(){
            var sizuku = new ExSprite(32, 32);
            sizuku.image = core.assets["images/cf307/sizuku0.png"];
            sizuku.x = momo.x;
            sizuku.y = momo.y;
            sizukuGroup.addChild(sizuku);
            sizuku.scale(3, 3);             
            sizuku.frame = [0, 1, 2, 3, 4, null];
            var sound = core.assets["sounds/cf307/bath-thapon1.mp3"].clone();
            sound.play();
        });
        sizuku.tl.loop();
    }); 

    // てぬぐい
    scene.tl.delay(25).then(function(){
        var tenugui = new ExSprite(32, 16);
        tenugui.image = core.assets['images/cf307/tenugui.png'];
        tenugui.x = 320 / 2 - 16;
        tenugui.y = 0;
        scene.addChild(tenugui);
        tenugui.scale(1.3, 1.3);
        tenugui.tl.moveTo(320 / 2 - 16, 400 / 2 - 8 - 13, 6,enchant.Easing.QUAD_EASEOUT);
        tenugui.tl.then(function(){
            var sound = core.assets["sounds/cf307/jump02.mp3"].clone();
        sound.play();
        });   
        tenugui.tl.delay(3).then(function(){
            tenugui.tl.moveBy(0, 3, 6, enchant.Easing.QUAD_EASEOUT);
            tenugui.tl.moveBy(0, -3, 6, enchant.Easing.QUAD_EASEOUT);   
            tenugui.tl.loop();      
        });
    });  
 
    // お風呂の下
    var hurosita = new ExSprite(64, 64);
    hurosita.image = core.assets['images/cf307/tarunohurosita.png'];
    hurosita.x = 320 / 2 - 32;
    hurosita.y = 200  - 10 + 19;
    scene.addChild(hurosita);
    hurosita.tl.scaleTo(2, 2, 10);

    // Thank You
    var label1 = new Label("  THANK YOU!");
    label1.color = 'black';
    label1.font = "30px 'PixelMplus10'";
    label1.textAlign = "center";
    label1.y = 330; 
    scene.addChild(label1);

    // ゲームクリアを表示
    var gameclear = new ExSprite(147, 48);
    gameclear.image = core.assets['images/title_gameclear.png'];
    gameclear.x = 320 / 2 - gameclear.width/2;
    gameclear.y = 50;
    scene.addChild(gameclear);
    // 大きく
    gameclear.scale(0.5, 0.5);
    gameclear.tl.scaleTo(1.5, 1.5, 20); 
        
    // リトライボタン
    var retry = new ExSprite(62, 55);
    retry.image = core.assets["images/cf307/retrybotan.png"];
    scene.addChild(retry);
    retry.x = 320 / 2 - retry.width / 2;
    retry.y = 350 ;
    retry.tl.moveBy(0, 50, 20);  
    // ボタンをタッチ
   retry.addEventListener(Event.TOUCH_START, function(){
        retry.frame = 1;
        console.log("タッチしました");
    });
    retry.addEventListener(Event.TOUCH_END, function(){
        retry.frame = 0;
        gameStart();
    });

    // おまけボタン       
    var botan = new ExSprite(64, 64);
    botan.image = core.assets["images/cf307/momobotann.png"];
    scene.addChild(botan);
    botan.x = 320 - 64;
    botan.y = 480 - 64;
    botan.originX = 64;
    botan.originY = 64;
    botan.scale(0.1, 0.1);
    botan.tl.scaleTo(0.5, 0.5, 20);

   // もう一回の文字
    var label3 = new Label("おまけ");
    label3.color = 'black';
    label3.font = "10px 'PixelMplus10'";
    scene.addChild(label3);
    label3.x = 320 - 58;
    label3.y = 480 - 20;                 
    label3.scale(0.1, 0.1);
    label3.tl.scaleTo(0.8, 0.8, 20);
    // ボタンをタッチ
   botan.addEventListener(Event.TOUCH_START, function(){
        botan.frame = 1;
        label3.tl.moveBy(0, 6, 0);
        console.log("タッチしました");     
    });
    botan.addEventListener(Event.TOUCH_END, function(){
        botan.frame = 0;
        label3.tl.moveBy(0, -6, 0);
        // ももちゃんブッ 
        var sound = core.assets["sounds/gass.mp3"].clone();
        sound.play();
        label3.tl.delay(5).then(function(){
            var bomb = new ExSprite(32, 32);
            bomb.image = core.assets["images/joe_gass.png"];
            bomb.x = momo.x + 32;
            bomb.y = momo.y - 32;
            scene.addChild(bomb);
        bomb.scale(2, 2);       
            bomb.frame = [0, 1, 2, 3, 4, null]; 
            var sound = core.assets["sounds/cf307/water-bukubuku3.mp3"].clone();
            sound.play();              
        });                 
   });

    // ラべるをタッチ
    label3.addEventListener(Event.TOUCH_START, function(){
        botan.frame = 1;
        label3.tl.moveBy(0, 6, 0);
        console.log("タッチしました");
    });
    label3.addEventListener(Event.TOUCH_END, function(){
        botan.frame = 0;
        label3.tl.moveBy(0, -6, 0);
        // ももちゃんブッ 
        var sound = core.assets["sounds/gass.mp3"].clone();
        sound.play();
        label3.tl.then(function(){          
            var sound = core.assets["sounds/cf307/water-bukubuku3.mp3"].clone();
            sound.play();
        });
        label3.tl.delay(10).then(function(){
            var bomb = new ExSprite(32, 32);
            bomb.image = core.assets["images/joe_gass.png"];
            bomb.x = momo.x + 32;
            bomb.y = momo.y - 32;
            scene.addChild(bomb);
        bomb.scale(2, 2);       
            bomb.frame = [0, 1, 2, 3, 4, null];                           
        });   
    });

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

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

ド・レ・か当ててミ・ソ~♪(解説)

🎹ピアノdeぽ~ん!🎹をさらに発展させて、音がなるのでそれが何の音か当てるゲームにしました。

自動的に音がなる仕組みは、透明の鍵盤を上から落として、下の鍵盤に当たったらその音が鳴るという仕組みです。鍵盤の位置はド〜上のドまで、8箇所の位置いずれか0〜7の間のランダムで落ちるようにすれば、ランダムで音がなるという訳です。

この時はまだ画像を透明にする方法を知らなくて、透明の画像を描いて、それを置きました。

後から知って、そんな簡単な方法があったのか・・となりましたが、こういうことがあると、その後から教えてもらった便利な方法はすぐ覚えて忘れません。

だから、forループを知らずに100個描いたら、forループを知ったなら感動してすぐ覚えるでしょうし、苦労して面倒な書き方をしていれば、関数の便利さも実感できます。自分なりの工夫の苦労も、無駄じゃないと思います。

ソースコードはこちら(自由研究:18ドレミ音当て)

満腹ももちゃんDeluxe(解説)

満腹ももちゃんeasy超∞満腹Hardをまとめて一つにして、タイトル画面で選べるようにしたものです。中身は同じなので、タイトル画面のソースコードだけ載せておきます。

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

var assets = [
    "images/back_sky.png",
    "images/title.png",// タイトル
    "sounds/coin.mp3",
    "sounds/jump.mp3",
    "images/cf307/momo.png",
    "images/joe_gass.png",
    "sounds/gass.mp3",
    "images/cf307/oimo (3).png",
    "images/cf307/oimohokahoka1.png", 
    "images/b_left.png", 
    "images/b_right.png",
    "images/cf307/wareimo (1).png",
    "images/cf307/wareimo1 (2).png",
    "sounds/cf307/jump12.mp3", 
    "images/title_gameclear.png",
    "images/cf307/blueground.png",
    "images/title_gameover.png",
    "images/cf307/momochanzannen.png",
    "sounds/cf307/se_maoudamashii_onepoint31.mp3",
    "sounds/cf307/correct2.mp3",
    "images/cf307/oimokirakira.png",
    "images/cf307/oimokirakira1.png",
    "images/cf307/igaguri.png",
    "images/cf307/igagurikuru.png",
    "images/b_red.png",
    "images/cf307/hi.png",
    "sounds/cf307/matchstick-put-fire1.mp3",
    "sounds/bomb.mp3",
    "images/bomb.png",
    "sounds/cf307/strike1.mp3",
    "images/back_mountain.png",
    "sounds/cf307/kotsudumi1.mp3",
    "sounds/cf307/suck1.mp3",
    "images/cf307/wareguri.png", 
    "images/cf307/mannpukudeluxeicony1.png", 
    "images/cf307/momobotann.png",
    "images/cf307/momochanzannenbotan1.png",
    "images/cf307/momozannenbotan.png",
    "images/cf307/oimokirahoka.png", 
    "sounds/cf307/ME010fanfare01.mp3",
    "images/cf307/manpukumomoicon.png",
    "images/cf307/mugennmanpukuicon.png",      
];

function title(){// タイトル画面
    scene = gameManager.createGameScene();
    core.replaceScene(scene); core.resume();

    //==========

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

    // 背景    
    scene.backgroundColor = "rgb(255, 255, 224)";

    // 
    var sound = core.assets["sounds/cf307/ME010fanfare01.mp3"].clone();
                sound.play();
    // アイコン
    var icon = new ExSprite(150, 150);
    icon.image = core.assets["images/cf307/mannpukudeluxeicony1.png"];
    icon.x = 320 / 2 - 150 / 2;
    icon.y = 50;    
    icon.scale(1.4, 1.4);
    scene.addChild(icon);   
 
    // タイトル
    var label1 = new Label("   おなかすいたー!");
    label1.color = 'black';
    label1.font = "28px 'PixelMplus10'";
    label1.textAlign = "center";
    label1.y = 245;
    scene.addChild(label1);

    // ラベル2
    var label2 = new Label("   おいもだいすき!");
    label2.color = 'black';
    label2.font = "28px 'PixelMplus10'";
    label2.textAlign = "center";
    //label2.x = 25;
    label2.y = 285;
    scene.addChild(label2);

    // EASYアイコン       
    var icon1 = new ExSprite(150, 150);
    icon1.image = core.assets["images/cf307/manpukumomoicon.png"];
    scene.addChild(icon1);
    icon1.x = 5;
    icon1.y = 480 - 150;
    icon1.scale(0.8, 0.8);

    // EASYの文字
    var label3 = new Label("  EASY");
    label3.color = 'black';
    label3.font = "18px 'PixelMplus10'";
    label3.x = 160 / 2 - 18 * 4 / 2 + 3;
    //label3.textAlign = "center" ;
    label3.y = 480 - 22;
    scene.addChild(label3);

    // EASYiconをタッチ
    icon1.addEventListener(Event.TOUCH_START, function(){
        icon1.tl.moveBy(0, 8, 0);
        console.log("タッチしました");
    });
    icon1.addEventListener(Event.TOUCH_END, function(){       
        gameStart1();
    });

    // HARDアイコン       
    var icon2 = new ExSprite(150, 150);
    icon2.image = core.assets["images/cf307/mugennmanpukuicon.png"];
    scene.addChild(icon2);
    icon2.x = 160 + 5;
    icon2.y = 480 - 150;
    icon2.scale(0.8, 0.8);

    // HARDの文字
    var label4 = new Label("  HARD");
    label4.color = 'black';
    label4.font = "18px 'PixelMplus10'";
    label4.x = 160 / 2 - 18 * 4 / 2 + 3 + 160;
    //label3.textAlign = "center" ;
    label4.y = 480 - 22;
    scene.addChild(label4);

    // HARDiconをタッチ
    icon2.addEventListener(Event.TOUCH_START, function(){        
        icon2.tl.moveBy(0, 8, 0);
        console.log("タッチしました");
    });
    icon2.addEventListener(Event.TOUCH_END, function(){
        //botan2.frame = 0;
        gameStart2();
    });

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

}

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

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

(以下略)

🎹ピアノdeぽ~ん!🎹(解説)

 🎹ぴあのdeキャラ🎹 をさらに発展させて、ピアノを弾いたときに出てきたキャラをクリックすると、ポン!と音が鳴って雲に戻り、カウントされるというものです。今見たらところどころ;が抜けているのですが、なぜか動いてます。なんでだろー?

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

var assets = [
    "images/back_mountain.png",
    "images/kati_land.png",
    "images/kati_tanuki.png",
    "images/title.png",// タイトル
    "sounds/coin.mp3",
    "sounds/jump.mp3",
    "images/cf307/kennbanmigi.png",
    "images/cf307/kennbanhidari.png",
    "sounds/piano1_1do.mp3",
    "images/cf307/kennbannaka.png",
    "sounds/piano1_2re.mp3",
    "images/cf307/backonpu1.png",
    "images/cf307/kennbanhidari.png",
    "sounds/piano1_3mi.mp3",
    "sounds/piano1_4fa.mp3",
    "sounds/piano1_5so.mp3",
    "sounds/piano1_6ra.mp3",
    "sounds/piano1_7si.mp3",
    "sounds/piano1_8do.mp3",
    "images/bk_body.png",
    "images/cf307/holekumo(1).png",
    "images/cf307/tono1.png",
    "images/cf307/mogura rg.png",
    "images/cf307/mogura rg1.png",
    "images/cf307/nekonemuri.png",
    "images/cf307/nekohako.png",
    "images/cf307/zyonipyon (1).png",
    "images/cf307/zyoni.png",
    "images/cf307/momochanzannen.png",
    "images/cf307/momochan.png",
    "images/cf307/perapera.png",
    "images/cf307/hebipiro.png",
    "images/cf307/takochanugoku.png", 
    "images/bk_mage.png",
    "sounds/cf307/kotsudumi1.mp3",
];

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

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

    scene.backgroundColor = "#00ffff";
    
    // 背景
    var background1 = new ExSprite(320, 480);
    background1.image = core.assets['images/cf307/backonpu1.png'];
    scene.addChild(background1);
    background1.x = 0;
    background1.y = -480;
    var background2 = new ExSprite(320, 480);
    background2.image = core.assets['images/cf307/backonpu1.png'];
    scene.addChild(background2);
   
    // スコア表示
    var score = 0;
    scoreLabel = new Label('SCORE : 0');
    scene.addChild(scoreLabel);
    scoreLabel.x = 10;
    scoreLabel.y = 10;
    scoreLabel.color = 'black';
    scoreLabel.font = "24px 'PixelMplus10'";
    scoreLabel.addEventListener(Event.ENTER_FRAME, function() {
        scoreLabel.text = '♪ぽん! : ' + score;
    });

    // モグ(レ)
    var mogu = new Sprite(82, 65);
    mogu.image = core.assets["images/cf307/mogura rg1.png"];
    mogu.x = 40;
    mogu.y = 70;
    scene.addChild(mogu);   

    // モグの穴
    var hole1 = new Sprite(82, 65);
    hole1.image = core.assets["images/cf307/holekumo(1).png"];
    hole1.x = 40;
    hole1.y = 70;
    scene.addChild(hole1);

    // まげ
    var mage = new Sprite(45, 60);
    mage.image = core.assets["images/bk_mage.png"];
    scene.addChild(mage);
    mage.x = -43;
    mage.y = 150;
    mage.scale(82 / 190, 82 / 190);

    // 殿ド
    var tono = new Sprite(190, 120);
    tono.image = core.assets["images/cf307/tono1.png"];
    tono.x = 10 - 53;
    tono.y = 150;
    scene.addChild(tono);
    tono.scale(82 / 190, 82 / 190);
    
    // 殿の穴
    var hole0 = new Sprite(82, 65);
    hole0.image = core.assets["images/cf307/holekumo(1).png"];
    hole0.x = 10;
    hole0.y = 180;
    scene.addChild(hole0);

    // ねこ(上のド)
    var neko = new Sprite(64, 64);
    neko.image = core.assets["images/cf307/nekonemuri.png"];
    neko.x = 320 - 82 + 41 - neko.width / 2;
    neko.y = 100;
    scene.addChild(neko);
    //neko.scale(82 / 190, 82 / 190);

    // ねこの穴
    var hole2 = new Sprite(82, 65);
    hole2.image = core.assets["images/cf307/holekumo(1).png"];
    hole2.x = 320 - 82;
    hole2.y = 100;
    scene.addChild(hole2);

  // ぺらぺら小僧(ファ)
    var pera = new Sprite(64, 64);
    pera.image = core.assets["images/cf307/perapera.png"];
    pera.x = 40 * 3 + 41 - pera.width / 2;
    pera.y = 135;
    scene.addChild(pera);
    pera.scale(0.8, 0.8);   

    // ぺらの穴
    var holefa = new Sprite(82, 65);
    holefa.image = core.assets["images/cf307/holekumo(1).png"];
    holefa.x = 40 * 3;
    holefa.y = 135;
    scene.addChild(holefa);

  // ももちゃん(ラ)
    var momo = new Sprite(32, 32);
    momo.image = core.assets["images/cf307/momochanzannen.png"];
    momo.x = 40 * 5 + 41 - momo.width / 2;
    momo.y = 183;
    scene.addChild(momo);
    momo.scale(1.2, 1.2);   

    // ももちゃんの穴
    var holera = new Sprite(82, 65);
    holera.image = core.assets["images/cf307/holekumo(1).png"];
    holera.x = 40 * 5;
    holera.y = 175;
    scene.addChild(holera);

  // ぬへ小僧(ソ)
    var kozou = new Sprite(64, 64);
    kozou.image = core.assets["images/cf307/zyonipyon (1).png"];
    kozou.x = 40 * 4 + 41 - kozou.width / 2;
    kozou.y = 240;
    scene.addChild(kozou);  
  
    // その穴
    var holeso = new Sprite(82, 65);
    holeso.image = core.assets["images/cf307/holekumo(1).png"];
    holeso.x = 40 * 4;
    holeso.y = 240;
    scene.addChild(holeso);

    // へび(ミ)
    var hebi = new Sprite(82, 65);
    hebi.image = core.assets["images/cf307/hebipiro.png"];
    hebi.x = 40 * 2;
    hebi.y = 290;
    scene.addChild(hebi);    
    hebi.scale(0.8, 0.8);

    // へびの穴
    var holemi = new Sprite(82, 65);
    holemi.image = core.assets["images/cf307/holekumo(1).png"];
    holemi.x = 40 * 2;
    holemi.y = 290;
    scene.addChild(holemi);

    // たこちゃん(シ)
    var tako = new Sprite(32, 32);
    tako.image = core.assets["images/cf307/takochanugoku.png"];
    tako.x = 40 * 6 + 41 - tako.width / 2;
    tako.y = 330;
    scene.addChild(tako);
    tako.scale(1.2, 1.2); 
  
    // たこちゃんの穴
    var holesi = new Sprite(82, 65);
    holesi.image = core.assets["images/cf307/holekumo(1).png"];
    holesi.x = 40 * 6;
    holesi.y = 320;
    scene.addChild(holesi);

    // 
    var kennbanmigi = new ExSprite(40, 104);
    kennbanmigi.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(kennbanmigi);
    kennbanmigi.x = 0;
    kennbanmigi.y = 480 - 104;
    // タップ
    kennbanmigi.addEventListener(Event.TOUCH_START, function(){
        kennbanmigi.frame = 1;
        var sound = core.assets['sounds/piano1_1do.mp3'].clone();
        sound.play(); 
        // 殿が出てくる
        tono.tl.clear();
        mage.tl.clear();    
        tono.image = core.assets["images/cf307/tono1.png"];
        tono.tl.moveBy(0, -55, 12);
        mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, tono.y - 10, 0);
        mage.tl.moveBy(0, -55, 12);
        tono.tl.then(function(){
            tono.image = core.assets["images/bk_body.png"];
            tono.tl.moveTo(-43, 150, 12);
            mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, 150, 12);
            mage.tl.moveTo(-43, 150, 0);
        });
    });
    // タップ終了
    kennbanmigi.addEventListener(Event.TOUCH_END, function(){
        kennbanmigi.frame = 0;        
    });
    // 殿をタップした時
    tono.addEventListener(Event.TOUCH_START, function() {
        tono.tl.clear();
        tono.tl.moveTo(-43, 150, 0);
        mage.tl.moveTo(-43, 150, 0);
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    });     

   // レ 
    var kennbannaka = new ExSprite(40, 104);
    kennbannaka.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(kennbannaka);
    kennbannaka.x = 40;
    kennbannaka.y = 480 - 104;
    // タップ
    kennbannaka.addEventListener(Event.TOUCH_START, function(){
        kennbannaka.frame = 1;
        var sound = core.assets['sounds/piano1_2re.mp3'].clone();
        sound.play();
        // moguが出てくる
        mogu.tl.clear();    
        mogu.image = core.assets["images/cf307/mogura rg1.png"];
        mogu.tl.moveBy(0, -50, 12);
        mogu.tl.then(function(){
            mogu.image = core.assets["images/cf307/mogura rg.png"];
            mogu.tl.moveTo(40, 70, 12); 
        });
    });
    // タップ終了
    kennbannaka.addEventListener(Event.TOUCH_END, function(){
        kennbannaka.frame = 0;
    });
    // モグをタップした時
   mogu.addEventListener(Event.TOUCH_START, function() {
        mogu.tl.clear();
        mogu.tl.moveTo(40, 70, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    }); 

    // ミ 
    var kennbanhidari = new ExSprite(40, 104);
    kennbanhidari.image = core.assets["images/cf307/kennbanhidari.png"];
    scene.addChild(kennbanhidari);
    kennbanhidari.x = 40 + 40;
    kennbanhidari.y = 480 - 104;
    // タップ
    kennbanhidari.addEventListener(Event.TOUCH_START, function(){
        kennbanhidari.frame = 1;
        var sound = core.assets['sounds/piano1_3mi.mp3'].clone();
        sound.play();
        // へびが出てくる
        hebi.tl.clear();    
        hebi.image = core.assets["images/cf307/hebipiro.png"];
        hebi.frame = [0, 1, 2]; 
        hebi.tl.moveBy(0, -60, 12);
        hebi.frame = [0, 0, 1, 1, 2, 2];
        hebi.tl.then(function(){
            hebi.frame = [0];
            hebi.tl.moveTo(40 * 2, 290, 12); 
        });
    });
    // タップ終了
    kennbanhidari.addEventListener(Event.TOUCH_END, function(){
        kennbanhidari.frame = 0;
    });
    // へびをタップした時
   hebi.addEventListener(Event.TOUCH_START, function() {
        hebi.tl.clear();
        hebi.tl.moveTo(40 * 2, 290, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    }); 

    // ファ 
    var fa = new ExSprite(40, 104);
    fa.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(fa);
    fa.x = 40 + 40 + 40;
    fa.y = 480 - 104;
    // タップ
    fa.addEventListener(Event.TOUCH_START, function(){
        fa.frame = 1;
        var sound = core.assets['sounds/piano1_4fa.mp3'].clone();
        sound.play();
        // ぺらぺら小僧が出てくる
        pera.tl.clear();    
        pera.image = core.assets["images/cf307/perapera.png"];
        pera.frame = [0, 1, 2];
        pera.tl.moveBy(0, -50, 12);
        pera.tl.then(function(){
            pera.frame = [2];
            pera.tl.moveTo(40 * 3 + 41 - pera.width / 2, 135, 12);
        });
    });
    // タップ終了
    fa.addEventListener(Event.TOUCH_END, function(){
        fa.frame = 0;
    });
    // ぺらぺら小僧をタップした時
   pera.addEventListener(Event.TOUCH_START, function() {
        pera.tl.clear();
        pera.tl.moveTo(40 * 3 + 41 - pera.width / 2, 135, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    })

    // ソ 
    var so = new ExSprite(40, 104);
    so.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(so);
    so.x = 40 + 40 + 40 + 40;
    so.y = 480 - 104;
    // タップ
    so.addEventListener(Event.TOUCH_START, function(){
        so.frame = 1;
        var sound = core.assets['sounds/piano1_5so.mp3'].clone();
        sound.play();
        // ぬへ小僧が出てくる
        kozou.tl.clear();    
        kozou.image = core.assets["images/cf307/zyonipyon (1).png"];
        kozou.frame = [0, 0, 1, 1]; 
        kozou.tl.moveBy(0, -60, 12);
        kozou.tl.then(function(){
            kozou.image = core.assets["images/cf307/zyoni.png"];
            kozou.tl.moveTo(40 * 4 + 41 - kozou.width / 2, 240, 12); 
        });
    });
    // タップ終了
    so.addEventListener(Event.TOUCH_END, function(){
        so.frame = 0;
    });
    // ぬへ小僧をタップした時
   kozou.addEventListener(Event.TOUCH_START, function() {
        kozou.tl.clear();
        kozou.tl.moveTo(40 * 4 + 41 - kozou.width / 2, 240, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    })

    // ラ 
    var ra = new ExSprite(40, 104);
    ra.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(ra);
    ra.x = 40 + 40 + 40 + 40 + 40;
    ra.y = 480 - 104;
    // タップ
    ra.addEventListener(Event.TOUCH_START, function(){
        ra.frame = 1;
        var sound = core.assets['sounds/piano1_6ra.mp3'].clone();
        sound.play();
        // ももちゃんが出てくる
        momo.tl.clear();    
        momo.image = core.assets["images/cf307/momochanzannen.png"];
        momo.tl.moveBy(0, -45, 12);
        momo.tl.then(function(){
            momo.image = core.assets["images/cf307/momochan.png"];
            momo.tl.moveTo(40 * 5 + 41 - momo.width / 2, 183, 12); 
        });
    });
    // タップ終了
    ra.addEventListener(Event.TOUCH_END, function(){
        ra.frame = 0;
    });
    // ももちゃんをタップした時
   momo.addEventListener(Event.TOUCH_START, function() {
        momo.tl.clear();
        momo.tl.moveTo(40 * 5 + 41 - momo.width / 2, 183, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    });

    // シ 
    var si = new ExSprite(40, 104);
    si.image = core.assets["images/cf307/kennbanhidari.png"];
    scene.addChild(si);
    si.x = 40 + 40 + 40 + 40 + 40 + 40;
    si.y = 480 - 104;
    // タップ
    si.addEventListener(Event.TOUCH_START, function(){
        si.frame = 1;
        var sound = core.assets['sounds/piano1_7si.mp3'].clone();
        sound.play();
        // たこちゃんが出てくる
        tako.tl.clear();    
        tako.image = core.assets["images/cf307/takochanugoku.png"];
        tako.tl.moveBy(0, -50, 12);
        tako.frame = [0, 0, 1, 1];
        tako.tl.then(function(){
            tako.frame = [0];
            tako.tl.moveTo(40 * 6 + 41 - tako.width / 2, 330, 12); 
        });
    });
    // タップ終了
    si.addEventListener(Event.TOUCH_END, function(){
        si.frame = 0;
    });
    // たこちゃんをタップした時
   tako.addEventListener(Event.TOUCH_START, function() {
        tako.tl.clear();
        tako.tl.moveTo(40 * 6 + 41 - tako.width / 2, 330, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;
    });

    // ド 
    var do8 = new ExSprite(40, 104);
    do8.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(do8);
    do8.x = 280;
    do8.y = 480 - 104;
    // タップ
    do8.addEventListener(Event.TOUCH_START, function(){
        do8.frame = 1;
        var sound = core.assets['sounds/piano1_8do.mp3'].clone();
        sound.play();
        // 猫が出てくる
        neko.tl.clear();    
        neko.image = core.assets["images/cf307/nekonemuri.png"];
        neko.tl.moveBy(0, -64, 12);
        neko.frame = [0, 0, 1, 1];
        neko.tl.then(function(){
            neko.image = core.assets["images/cf307/nekohako.png"];
            neko.tl.moveTo(320 - 82 + 41 - neko.width / 2, 100, 12); 
        });
    });
    // タップ終了
    do8.addEventListener(Event.TOUCH_END, function(){
        do8.frame = 0;
    });
    // 猫ちゃんをタップした時
   neko.addEventListener(Event.TOUCH_START, function() {
        neko.tl.clear();
        neko.tl.moveTo(320 - 82 + 41 - neko.width / 2, 100, 0);       
        var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
        sound.play();
        score += 1;    
        neko.image = core.assets["images/cf307/nekohako.png"]; //zがはみ出すので
    });
   
    // 画面がタップされたら
    scene.addEventListener(Event.TOUCH_START, function(){
        background1.tl.clear();
        background2.tl.clear();
        console.log("音符よ動け!!");
        background1.tl.moveBy(0, 480 * 24 / 150, 24);
        background2.tl.moveBy(0, 480 * 24 / 150, 24);
        // 背景スクロール
        if(background2.y >= 480){
            console.log("スクロールして!!");      
            background2.y = background1.y - 480;
        }
       if(background1.y >= 480){
            background1.y = background2.y - 480;
        }
    });  
 
    //==========
    // ここまで
    //==========

}

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

🎹ぴあのdeキャラ🎹(解説)

🎹ぴあの🎹シンプルを発展させて、音を鳴らすと雲の上からキャラクターが顔を出すというものです。

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

var assets = [
    "images/back_mountain.png",
    "images/kati_land.png",
    //"images/kati_tanuki.png",
    "images/title.png",// タイトル
    "sounds/coin.mp3",
    "sounds/jump.mp3",
    "images/cf307/kennbanmigi.png",
    "images/cf307/kennbanhidari.png",
    "sounds/piano1_1do.mp3",
    "images/cf307/kennbannaka.png",
    "sounds/piano1_2re.mp3",
    "images/cf307/backonpu1.png",
    "images/cf307/kennbanhidari.png",
    "sounds/piano1_3mi.mp3",
    "sounds/piano1_4fa.mp3",
    "sounds/piano1_5so.mp3",
    "sounds/piano1_6ra.mp3",
    "sounds/piano1_7si.mp3",
    "sounds/piano1_8do.mp3",
    "images/bk_body.png",
    "images/cf307/holekumo(1).png",
    "images/cf307/tono1.png",
    "images/cf307/mogura rg.png",
    "images/cf307/mogura rg1.png",
    "images/cf307/nekonemuri.png",
    "images/cf307/nekohako.png",
    "images/cf307/zyonipyon (1).png",
    "images/cf307/zyoni.png",
    "images/cf307/momochanzannen.png",
    "images/cf307/momochan.png",
    "images/cf307/perapera.png",
    "images/cf307/hebipiro.png",
    "images/cf307/takochanugoku.png", 
    "images/bk_mage.png",
];

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

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

    scene.backgroundColor = "#00ffff";
    
    // 背景
    var background1 = new ExSprite(320, 480);
    background1.image = core.assets['images/cf307/backonpu1.png'];
    scene.addChild(background1);
    background1.x = 0;
    background1.y = -480;
    var background2 = new ExSprite(320, 480);
    background2.image = core.assets['images/cf307/backonpu1.png'];
    scene.addChild(background2);
   
    // モグ(レ)
    var mogu = new Sprite(82, 65);
    mogu.image = core.assets["images/cf307/mogura rg1.png"];
    mogu.x = 40;
    mogu.y = 70;
    scene.addChild(mogu);   

    // モグの穴
    var hole1 = new Sprite(82, 65);
    hole1.image = core.assets["images/cf307/holekumo(1).png"];
    hole1.x = 40;
    hole1.y = 70;
    scene.addChild(hole1);

    // まげ
    var mage = new Sprite(45, 60);
    mage.image = core.assets["images/bk_mage.png"];
    scene.addChild(mage);
    mage.x = -43;
    mage.y = 150;
    mage.scale(82 / 190, 82 / 190);

    // 殿ド
    var tono = new Sprite(190, 120);
    tono.image = core.assets["images/cf307/tono1.png"];
    tono.x = 10 - 53;
    tono.y = 150;
    scene.addChild(tono);
    tono.scale(82 / 190, 82 / 190); 
   
    // 殿の穴
    var hole0 = new Sprite(82, 65);
    hole0.image = core.assets["images/cf307/holekumo(1).png"];
    hole0.x = 10;
    hole0.y = 180;
    scene.addChild(hole0);

    // ねこ(上のド)
    var neko = new Sprite(64, 64);
    neko.image = core.assets["images/cf307/nekonemuri.png"];
    neko.x = 320 - 82 + 41 - neko.width / 2;
    neko.y = 100;
    scene.addChild(neko);
   
    // ねこの穴
    var hole2 = new Sprite(82, 65);
    hole2.image = core.assets["images/cf307/holekumo(1).png"];
    hole2.x = 320 - 82;
    hole2.y = 100;
    scene.addChild(hole2);
    // ぺらぺら小僧(ファ)
    var pera = new Sprite(64, 64);
    pera.image = core.assets["images/cf307/perapera.png"];
    pera.x = 40 * 3 + 41 - pera.width / 2;
    pera.y = 135;
    scene.addChild(pera);
    pera.scale(0.8, 0.8);   

    // ぺらの穴
    var holefa = new Sprite(82, 65);
    holefa.image = core.assets["images/cf307/holekumo(1).png"];
    holefa.x = 40 * 3;
    holefa.y = 135;
    scene.addChild(holefa);
    // ももちゃん(ラ)
    var momo = new Sprite(32, 32);
    momo.image = core.assets["images/cf307/momochanzannen.png"];
    momo.x = 40 * 5 + 41 - momo.width / 2;
    momo.y = 183;
    scene.addChild(momo);
    momo.scale(1.2, 1.2);   

    // ももちゃんの穴
    var holera = new Sprite(82, 65);
    holera.image = core.assets["images/cf307/holekumo(1).png"];
    holera.x = 40 * 5;
    holera.y = 175;
    scene.addChild(holera);
    // ぬへ小僧(ソ)
    var kozou = new Sprite(64, 64);
    kozou.image = core.assets["images/cf307/zyonipyon (1).png"];
    kozou.x = 40 * 4 + 41 - kozou.width / 2;
    kozou.y = 240;
    scene.addChild(kozou);  
  
    // その穴
    var holeso = new Sprite(82, 65);
    holeso.image = core.assets["images/cf307/holekumo(1).png"];
    holeso.x = 40 * 4;
    holeso.y = 240;
    scene.addChild(holeso);

    // へび(ミ)
    var hebi = new Sprite(82, 65);
    hebi.image = core.assets["images/cf307/hebipiro.png"];
    hebi.x = 40 * 2;
    hebi.y = 290;
    scene.addChild(hebi);    
    hebi.scale(0.8, 0.8);

    // へびの穴
    var holemi = new Sprite(82, 65);
    holemi.image = core.assets["images/cf307/holekumo(1).png"];
    holemi.x = 40 * 2;
    holemi.y = 290;
    scene.addChild(holemi);

    // たこちゃん(シ)
    var tako = new Sprite(32, 32);
    tako.image = core.assets["images/cf307/takochanugoku.png"];
    tako.x = 40 * 6 + 41 - tako.width / 2;
    tako.y = 330;
    scene.addChild(tako);
    tako.scale(1.2, 1.2);  
 
    // たこちゃんの穴
    var holesi = new Sprite(82, 65);
    holesi.image = core.assets["images/cf307/holekumo(1).png"];
    holesi.x = 40 * 6;
    holesi.y = 320;
    scene.addChild(holesi);

    // 
    var kennbanmigi = new ExSprite(40, 104);
    kennbanmigi.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(kennbanmigi);
    kennbanmigi.x = 0;
    kennbanmigi.y = 480 - 104;
    // タップ
    kennbanmigi.addEventListener(Event.TOUCH_START, function(){
        kennbanmigi.frame = 1;
        var sound = core.assets['sounds/piano1_1do.mp3'].clone();
        sound.play(); 
        // 殿が出てくる
        tono.tl.clear();
        mage.tl.clear();    
        tono.image = core.assets["images/cf307/tono1.png"];
        tono.tl.moveBy(0, -55, 12);
        mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, tono.y - 10, 0);
        mage.tl.moveBy(0, -55, 12);
        tono.tl.then(function(){
            tono.image = core.assets["images/bk_body.png"];
            tono.tl.moveTo(-43, 150, 12);
            mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, 150, 12);
            mage.tl.moveTo(-43, 150, 0);
        });
    });
    // タップ終了
    kennbanmigi.addEventListener(Event.TOUCH_END, function(){
        kennbanmigi.frame = 0;        
    });
    // レ 
    var kennbannaka = new ExSprite(40, 104);
    kennbannaka.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(kennbannaka);
    kennbannaka.x = 40;
    kennbannaka.y = 480 - 104;
    // タップ
    kennbannaka.addEventListener(Event.TOUCH_START, function(){
        kennbannaka.frame = 1;
        var sound = core.assets['sounds/piano1_2re.mp3'].clone();
        sound.play();
        // moguが出てくる
        mogu.tl.clear();    
        mogu.image = core.assets["images/cf307/mogura rg1.png"];
        mogu.tl.moveBy(0, -50, 12);
        mogu.tl.then(function(){
            mogu.image = core.assets["images/cf307/mogura rg.png"];
            mogu.tl.moveTo(40, 70, 12); 
        });
    });
    // タップ終了
    kennbannaka.addEventListener(Event.TOUCH_END, function(){
        kennbannaka.frame = 0;
    });

    // ミ 
    var kennbanhidari = new ExSprite(40, 104);
    kennbanhidari.image = core.assets["images/cf307/kennbanhidari.png"];
    scene.addChild(kennbanhidari);
    kennbanhidari.x = 40 + 40;
    kennbanhidari.y = 480 - 104;
    // タップ
    kennbanhidari.addEventListener(Event.TOUCH_START, function(){
        kennbanhidari.frame = 1;
        var sound = core.assets['sounds/piano1_3mi.mp3'].clone();
        sound.play();
        // へびが出てくる
        hebi.tl.clear();    
        hebi.image = core.assets["images/cf307/hebipiro.png"];
        hebi.frame = [0, 1, 2]; 
        hebi.tl.moveBy(0, -60, 12);
        hebi.frame = [0, 0, 1, 1, 2, 2];
        hebi.tl.then(function(){
            hebi.frame = [0];
            hebi.tl.moveTo(40 * 2, 290, 12); 
        });
    });
    // タップ終了
    kennbanhidari.addEventListener(Event.TOUCH_END, function(){
        kennbanhidari.frame = 0;
    });

    // ファ 
    var fa = new ExSprite(40, 104);
    fa.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(fa);
    fa.x = 40 + 40 + 40;
    fa.y = 480 - 104;
    // タップ
    fa.addEventListener(Event.TOUCH_START, function(){
        fa.frame = 1;
        var sound = core.assets['sounds/piano1_4fa.mp3'].clone();
        sound.play();
        // ぬへ小僧が出てくる
        pera.tl.clear();    
        pera.image = core.assets["images/cf307/perapera.png"];
        pera.frame = [0, 1, 2];
        pera.tl.moveBy(0, -50, 12);
        pera.tl.then(function(){
            pera.frame = [2];
            pera.tl.moveTo(40 * 3 + 41 - pera.width / 2, 135, 12);
        });
    });
    // タップ終了
    fa.addEventListener(Event.TOUCH_END, function(){
        fa.frame = 0;
    });

    // ソ 
    var so = new ExSprite(40, 104);
    so.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(so);
    so.x = 40 + 40 + 40 + 40;
    so.y = 480 - 104;
    // タップ
    so.addEventListener(Event.TOUCH_START, function(){
        so.frame = 1;
        var sound = core.assets['sounds/piano1_5so.mp3'].clone();
        sound.play();
        // ぬへ小僧が出てくる
        kozou.tl.clear();    
        kozou.image = core.assets["images/cf307/zyonipyon (1).png"];
        kozou.frame = [0, 0, 1, 1]; 
        kozou.tl.moveBy(0, -60, 12);
        kozou.tl.then(function(){
            kozou.image = core.assets["images/cf307/zyoni.png"];
            kozou.tl.moveTo(40 * 4 + 41 - kozou.width / 2, 240, 12); 
        });
    });
    // タップ終了
    so.addEventListener(Event.TOUCH_END, function(){
        so.frame = 0;
    });

    // ラ 
    var ra = new ExSprite(40, 104);
    ra.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(ra);
    ra.x = 40 + 40 + 40 + 40 + 40;
    ra.y = 480 - 104;
    // タップ
    ra.addEventListener(Event.TOUCH_START, function(){
        ra.frame = 1;
        var sound = core.assets['sounds/piano1_6ra.mp3'].clone();
        sound.play();
        // ももちゃんが出てくる
        momo.tl.clear();    
        momo.image = core.assets["images/cf307/momochanzannen.png"];
        momo.tl.moveBy(0, -45, 12);
        momo.tl.then(function(){
            momo.image = core.assets["images/cf307/momochan.png"];
            momo.tl.moveTo(40 * 5 + 41 - momo.width / 2, 183, 12); 
        });
    });
    // タップ終了
    ra.addEventListener(Event.TOUCH_END, function(){
        ra.frame = 0;
    });

    // シ 
    var si = new ExSprite(40, 104);
    si.image = core.assets["images/cf307/kennbanhidari.png"];
    scene.addChild(si);
    si.x = 40 + 40 + 40 + 40 + 40 + 40;
    si.y = 480 - 104;
    // タップ
    si.addEventListener(Event.TOUCH_START, function(){
        si.frame = 1;
        var sound = core.assets['sounds/piano1_7si.mp3'].clone();
        sound.play();
        // たこちゃんが出てくる
        tako.tl.clear();    
        tako.image = core.assets["images/cf307/takochanugoku.png"];
        tako.tl.moveBy(0, -50, 12);
        tako.frame = [0, 0, 1, 1];
        tako.tl.then(function(){
            tako.frame = [0];
            tako.tl.moveTo(40 * 6 + 41 - tako.width / 2, 330, 12); 
        });
    });
    // タップ終了
    si.addEventListener(Event.TOUCH_END, function(){
        si.frame = 0;
    });

    // ド 
    var do8 = new ExSprite(40, 104);
    do8.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(do8);
    do8.x = 280;
    do8.y = 480 - 104;
    // タップ
    do8.addEventListener(Event.TOUCH_START, function(){
        do8.frame = 1;
        var sound = core.assets['sounds/piano1_8do.mp3'].clone();
        sound.play();
        // 猫が出てくる
        neko.tl.clear();    
        neko.image = core.assets["images/cf307/nekonemuri.png"];
        neko.tl.moveBy(0, -64, 12);
        neko.frame = [0, 0, 1, 1];
        neko.tl.then(function(){
            neko.image = core.assets["images/cf307/nekohako.png"];
            neko.tl.moveTo(320 - 82 + 41 - neko.width / 2, 100, 12); 
        });
    });
    // タップ終了
    do8.addEventListener(Event.TOUCH_END, function(){
        do8.frame = 0;
    });
   
    // 画面がタップされたら
    scene.addEventListener(Event.TOUCH_START, function(){
        background1.tl.clear();
        background2.tl.clear();
        console.log("音符よ動け!!");
        background1.tl.moveBy(0, 480 * 24 / 150, 24);
        background2.tl.moveBy(0, 480 * 24 / 150, 24);
        // 背景スクロール
        if(background2.y >= 480){
            console.log("スクロールして!!");      
            background2.y = background1.y - 480;
        }
        if(background1.y >= 480){
            background1.y = background2.y - 480;
        }
    });

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

}

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

🎹ぴあの🎹シンプル(解説)

soundsのところに音があったので、作ってみたものです。

イメージとしては、よくおもちゃコーナーにある、小さな子ども用のおもちゃのピアノです。

工夫したところとしては、鍵盤の絵です。

鍵盤の種類は三種類、

 

 

 

描いてみて、押したときに、左右の枠が少し太くなり、下に長く伸ばすと押した感じに見えることがわかりました。(上図の右側がそれぞれ鍵盤を押したときのframe)

音の長さに合わせて背景の音符が流れるようにして、音が流れている感じを出してみました。

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

var assets = [
    "images/back_mountain.png",
    "images/kati_land.png",
    "images/kati_tanuki.png",
    "images/title.png",// タイトル
    "sounds/coin.mp3",
    "sounds/jump.mp3",
    "images/cf307/kennbanmigi.png",
    "images/cf307/kennbanhidari.png",
    "sounds/piano1_1do.mp3",
    "images/cf307/kennbannaka.png",
    "sounds/piano1_2re.mp3",
    "images/cf307/backonpu1.png",
    "images/cf307/kennbanhidari.png",
    "sounds/piano1_3mi.mp3",
    "sounds/piano1_4fa.mp3",
    "sounds/piano1_5so.mp3",
    "sounds/piano1_6ra.mp3",
    "sounds/piano1_7si.mp3",
    "sounds/piano1_8do.mp3",
];

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

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

    scene.backgroundColor = "#00ffff";
    
    // 背景
    var background1 = new ExSprite(320, 480);
    background1.image = core.assets['images/cf307/backonpu1.png'];
    scene.addChild(background1);
    background1.x = 0;
    background1.y = -480;
    var background2 = new ExSprite(320, 480);
    background2.image = core.assets['images/cf307/backonpu1.png'];
    scene.addChild(background2);
    
    // 
    var kennbanmigi = new ExSprite(40, 104);
    kennbanmigi.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(kennbanmigi);
    kennbanmigi.x = 0;
    kennbanmigi.y = 480 - 104;
    // タップ
    kennbanmigi.addEventListener(Event.TOUCH_START, function(){
        kennbanmigi.frame = 1;
        var sound = core.assets['sounds/piano1_1do.mp3'].clone();
        sound.play();
    });
    // タップ終了
    kennbanmigi.addEventListener(Event.TOUCH_END, function(){
        kennbanmigi.frame = 0;
    });

    // レ 
    var kennbannaka = new ExSprite(40, 104);
    kennbannaka.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(kennbannaka);
    kennbannaka.x = 40;
    kennbannaka.y = 480 - 104;
    // タップ
    kennbannaka.addEventListener(Event.TOUCH_START, function(){
        kennbannaka.frame = 1;
        var sound = core.assets['sounds/piano1_2re.mp3'].clone();
        sound.play();
    });
    // タップ終了
    kennbannaka.addEventListener(Event.TOUCH_END, function(){
        kennbannaka.frame = 0;
    });

    // ミ 
    var kennbanhidari = new ExSprite(40, 104);
    kennbanhidari.image = core.assets["images/cf307/kennbanhidari.png"];
    scene.addChild(kennbanhidari);
    kennbanhidari.x = 40 + 40;
    kennbanhidari.y = 480 - 104;
    // タップ
    kennbanhidari.addEventListener(Event.TOUCH_START, function(){
        kennbanhidari.frame = 1;
        var sound = core.assets['sounds/piano1_3mi.mp3'].clone();
        sound.play();
    });
    // タップ終了
    kennbanhidari.addEventListener(Event.TOUCH_END, function(){
        kennbanhidari.frame = 0;
    });

    // ファ 
    var fa = new ExSprite(40, 104);
    fa.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(fa);
    fa.x = 40 + 40 + 40;
    fa.y = 480 - 104;
    // タップ
    fa.addEventListener(Event.TOUCH_START, function(){
        fa.frame = 1;
        var sound = core.assets['sounds/piano1_4fa.mp3'].clone();
        sound.play();
    });
    // タップ終了
    fa.addEventListener(Event.TOUCH_END, function(){
        fa.frame = 0;
    });

    // ソ 
    var so = new ExSprite(40, 104);
    so.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(so);
    so.x = 40 + 40 + 40 + 40;
    so.y = 480 - 104;
    // タップ
    so.addEventListener(Event.TOUCH_START, function(){
        so.frame = 1;
        var sound = core.assets['sounds/piano1_5so.mp3'].clone();
        sound.play();
    });
    // タップ終了
    so.addEventListener(Event.TOUCH_END, function(){
        so.frame = 0;
    });

    // ラ 
    var ra = new ExSprite(40, 104);
    ra.image = core.assets["images/cf307/kennbannaka.png"];
    scene.addChild(ra);
    ra.x = 40 + 40 + 40 + 40 + 40;
    ra.y = 480 - 104;
    // タップ
    ra.addEventListener(Event.TOUCH_START, function(){
        ra.frame = 1;
        var sound = core.assets['sounds/piano1_6ra.mp3'].clone();
        sound.play();
    });
    // タップ終了
    ra.addEventListener(Event.TOUCH_END, function(){
        ra.frame = 0;
    });

    // シ 
    var si = new ExSprite(40, 104);
    si.image = core.assets["images/cf307/kennbanhidari.png"];
    scene.addChild(si);
    si.x = 40 + 40 + 40 + 40 + 40 + 40;
    si.y = 480 - 104;
    // タップ
    si.addEventListener(Event.TOUCH_START, function(){
        si.frame = 1;
        var sound = core.assets['sounds/piano1_7si.mp3'].clone();
        sound.play();
    });
    // タップ終了
    si.addEventListener(Event.TOUCH_END, function(){
        si.frame = 0;
    });

    // ド 
    var do8 = new ExSprite(40, 104);
    do8.image = core.assets["images/cf307/kennbanmigi.png"];
    scene.addChild(do8);
    do8.x = 280;
    do8.y = 480 - 104;
    // タップ
    do8.addEventListener(Event.TOUCH_START, function(){
        do8.frame = 1;
        var sound = core.assets['sounds/piano1_8do.mp3'].clone();
        sound.play();
    });
    // タップ終了
    do8.addEventListener(Event.TOUCH_END, function(){
        do8.frame = 0;
    });
   
    // 画面がタップされたら
    scene.addEventListener(Event.TOUCH_START, function(){
        background1.tl.clear();
        background2.tl.clear();
        console.log("音符よ動け!!");
        background1.tl.moveBy(0, 480 * 24 / 150, 24);
        background2.tl.moveBy(0, 480 * 24 / 150, 24);
        if(background2.y >= 480){
            console.log("スクロールして!!");      
            background2.y = background1.y - 480;
        }
       if(background1.y >= 480){
            background1.y = background2.y - 480;
        }
    });

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

}

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

なでてニャ(解説)

これは、カウンターを設置して、何かをするとカウンターが増えたり減ったりするようにして、カウンターの値によって条件分岐で動きを変えるというものを習ったので、それを使って作ったものです。

念願のねこをなでるゲームをつくることができて、大変満足でした。

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

var assets = [
    "images/back_mountain.png",
    "images/kikori_land.png",
    "images/cf005/cat_run.png",
    "images/kikori_kame_1.png",
    "images/title.png",// タイトル
    "sounds/hit.mp3",
    "sounds/jump.mp3",
    "images/kikori_kame_1.png",
    "images/kati_rock.png",
    "images/cf307/zabton.png",
    "images/cf307/nadenade.png",
    "images/cf307/nekoosuwari.png",
    "images/cf307/nekohako.png",
    "images/cf307/nekonemuri.png",
];

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

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

    scene.backgroundColor = "orange";

    // 座布団
    var zabuton = new ExSprite(70, 70);
    zabuton.image = core.assets["images/cf307/zabton.png"];
    scene.addChild(zabuton);
    zabuton.x = 320 / 2 - 70 / 2;
    zabuton.y = 480 / 2 - 70 / 2;
    zabuton.scale(2, 2);

    // カウンター
    var counter = 0;

    // ラベル
    var label = new Label("x");
    label.x = 160 - 16;
    label.y = 380 - 90;
    label.color = "white";
    label.font = "32px Arial";
    label.text = counter;
    scene.addChild(label);
    
    // ねこちゃん
    var neko = new ExSprite(64, 64);
    neko.image = core.assets["images/cf005/cat_run.png"];
    scene.addChild(neko);
    neko.x = 320 / 2 - 32;
    neko.y = 480 / 2 - 52;
    neko.frame = [0, 0, 1, 1, 2, 2, 3, 3]; 

    // 
    var hand = new ExSprite(42, 32);
    hand.image = core.assets["images/cf307/nadenade.png"];
    scene.addChild(hand);
    hand.x = neko.x + 27;
    hand.y = neko.y;
            
    // ねこちゃんをなでると
    hand.addEventListener(Event.TOUCH_START, function(){
        hand.frame = 1;
        neko.tl.moveBy(0, -5, 2);
        neko.tl.moveBy(0, 5, 2);        
        counter++; 
        console.log("なでっ!!");
        console.log(counter);
        label.text = counter;
        // 33以上でおすわり
        if(counter >= 33){
            console.log("おすわりニャン!!");
            neko.image = core.assets["images/cf307/nekoosuwari.png"];
            neko.tl.clear();
        }
        // 66以上で箱すわり
        if(counter >= 66){
            console.log("箱すわりニャン!!");
            neko.image = core.assets["images/cf307/nekohako.png"];
            hand.tl.moveTo(hand.x, neko.y + 10, 0);            
        }
     // 100以上でおやすみ
        if(counter >= 100){
            console.log("極楽ニャン!!");
            neko.image = core.assets["images/cf307/nekonemuri.png"];
            hand.remove();
        }                                                  
    });
    // なで終わり
    hand.addEventListener(Event.TOUCH_END, function(){
        hand.frame = 0;       
    });

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

}

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

15

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

var assets = [
    "images/back_town.png",
    "images/washi_stand.png",
    "images/washi_sit.png",
    "images/washi_kick_l.png",
    "images/washi_kick_r.png",
    "images/title.png",// タイトル
    "sounds/hit.mp3",
    "sounds/jump.mp3",
    "images/cf307/nuhehidari.png",
    "images/cf307/nuhemigi.png",
    "images/cf307/zyoniue.png",
    "images/cf307/yazirusi(64).png",

];

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

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

    scene.backgroundColor = "darkgray";

    // 
    var town = new Sprite(320, 480);
    town.image = core.assets["images/back_town.png"];
    scene.addChild(town);

    // ラベル
    var label = new Label("タップで移動");
    label.x = 320 / 2 - 150 / 2;
    label.y = 340 + 44;
    label.color = "black";
    label.font = "32px Arial";
    scene.addChild(label);
    
    // わし
    var washi = new Sprite(64, 64);
    washi.image = core.assets["images/cf307/nuhehidari.png"];
    washi.x = 160 - 32;
    washi.y = 260;
    scene.addChild(washi);
    washi.scale(1.5, 1.5);

    // 矢印左
    var hidari = new Sprite(64, 64);
    hidari.image = core.assets["images/cf307/yazirusi(64).png"];
    hidari.x = washi.x - 64;
    hidari.y = washi.y;
    scene.addChild(hidari);
    hidari.scale(0.8, 0.8);
    hidari.rotate(-90);

    // 矢印右
    var migi = new Sprite(64, 64);
    migi.image = core.assets["images/cf307/yazirusi(64).png"];
    migi.x = 160 - 32 + 64;
    migi.y = 260;
    scene.addChild(migi);
    migi.scale(0.8, 0.8);
    migi.rotate(90);

    // 矢印上
    var ue = new Sprite(64, 64);
    ue.image = core.assets["images/cf307/yazirusi(64).png"];
    ue.x = 160 - 32;
    ue.y = 260 - 64 - 6;
    scene.addChild(ue);
    ue.scale(0.8, 0.8);
    // 矢印下
    var sita = new Sprite(64, 64);
    sita.image = core.assets["images/cf307/yazirusi(64).png"];
    sita.x = 160 - 32;
    sita.y = 260 + 64;
    scene.addChild(sita);
    sita.scale(0.8, 0.8);
    sita.rotate(180);
    scene.addEventListener(Event.TOUCH_START, function(e){
        console.log("ごりら");
        console.log(e.x);
        if(e.x < washi.x){
            console.log("ちっちゃいね");
            washi.image =  core.assets["images/cf307/nuhehidari.png"];
            label.text = " 左ぢゃ!";
            washi.moveBy(-20, 0, 0);
            hidari.moveBy(-20, 0, 0);
            migi.moveBy(-20, 0, 0);
            ue.moveBy(-20, 0, 0);
            sita.moveBy(-20, 0, 0);
        label.moveBy(-20, 0, 0);
        }
        if(washi.x + washi.width < e.x){
            console.log("でかいね");
        washi.image =  core.assets["images/cf307/nuhemigi.png"];
            label.text = " 右ぢゃ!";
            washi.moveBy(20, 0, 0);
            hidari.moveBy(20, 0, 0);
            migi.moveBy(20, 0, 0);
            ue.moveBy(20, 0, 0);
            sita.moveBy(20, 0, 0);
            label.moveBy(20, 0, 0);
                if(washi.y > e.y){
            console.log("うえだね");
        washi.image =  core.assets["images/cf307/zyoniue.png"];
            label.text = " 上ぢゃ!";
            washi.moveBy(0, -20, 0);
            hidari.moveBy(0, -20, 0);
            migi.moveBy(0, -20, 0);
            ue.moveBy(0, -20, 0);
            sita.moveBy(0, -20, 0);
            label.moveBy(0, -20, 0);
                if(washi.y + washi.height < e.y){
            console.log("しただね");
        washi.image =  core.assets["images/cf307/nuhehidari.png"];
            label.text = " 下ぢゃ!";
            washi.moveBy(0, 20, 0);
            hidari.moveBy(0, 20, 0);
            migi.moveBy(0, 20, 0);
            ue.moveBy(0, 20, 0);
            sita.moveBy(0, 20, 0);
            label.moveBy(0, 20, 0);
            });
    //==========
    // ここまで
    //==========
}

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