超∞満腹Hard(解説)

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/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/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/oimohokahoka1.png",
    "images/cf307/igagurikuru.png",
    "images/cf307/oimokirahoka.png",  
];

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

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

    scene.backgroundColor = "skyblue";
    
    // 
    var sky3 = new ExSprite(320, 241);
    sky3.image = core.assets["images/back_mountain.png"];
    scene.addChild(sky3);
    sky3.tl.moveTo(0, 240, 0);
    sky3.tl.moveBy(0, 240, 250);
    sky3.tl.loop();
    
    var sky1 = new ExSprite(320, 241);
    sky1.image = core.assets["images/back_mountain.png"];
    scene.addChild(sky1);
    sky1.tl.moveTo(0, -240, 0);
    sky1.tl.moveBy(0, 480, 500);
    sky1.tl.loop();
    sky1.tl.skip(500/2);
    var sky2 = new ExSprite(320, 241);
    sky2.image = core.assets["images/back_mountain.png"];
    scene.addChild(sky2);
    sky2.scale(-1, 1);
    sky2.tl.moveTo(0, -240, 0);
    sky2.tl.moveBy(0, 480, 500);
    sky2.tl.loop();
    sky2.tl.skip(0);
   
    // おいもグループ
    var oimoGroup = new Group();
    scene.addChild(oimoGroup);

    // おいもグループ1
    var oimoGroup1 = new Group();
    scene.addChild(oimoGroup1); 

    // 地面
    var ground = new ExSprite(320, 55);
    ground.image = core.assets["images/cf307/blueground.png"];
    ground.x = 0;
    ground.y = 480;
    scene.addChild(ground);
    
    // おいもが落ちてくる
    scene.tl.delay(30);
    scene.tl.then(function() {
        var oimo = new ExSprite(32, 32);
        oimo.image = core.assets["images/cf307/oimohokahoka1.png"];
        oimo.x = bigoimo.x + bigoimo.width / 2 - oimo.width/2; 
        oimo.y = bigoimo.height / 2 - oimo.height / 2 + 34;
        oimoGroup.addChild(oimo);
        oimo.frame = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4];
        oimo.scale(1.2, 1.2);
        oimo.tl.moveBy(0, 480, 150);
        oimo.tl.then(function() {
            oimo.remove();
        });
        // おいもでももちゃんがブッ
        oimo.addCollision(momo);
        oimo.addEventListener(Event.COLLISION, function(e) {
            // おいもが消えて
            oimo.remove();
            var oimo1 = new ExSprite(32, 32);
            oimo1.image = core.assets["images/cf307/oimo (3).png"];
            oimo1.x = oimo.x;
            oimo1.y = oimo.y;
            scene.addChild(oimo1);      
            oimo1.scale(1.2, 1.2);
            oimo1.tl.fadeTo(0.5, 0).and().scaleTo(0.2, 0.2, 5);
            var sound = core.assets["sounds/cf307/suck1.mp3"].clone();
            sound.play();               
            oimo1.tl.then(function(){
                oimo1.remove();
                // 進む
                momo.moveBy(0, -64, 5);
                if(momo.y < -32){
                    momo.y = 200;
                }             
                var sound = core.assets["sounds/gass.mp3"].clone();
                sound.play();
                // ももちゃんブッ 
                var bomb = new ExSprite(32, 32);
                bomb.image = core.assets["images/joe_gass.png"];
                bomb.x = momo.x;
                bomb.y = momo.y + 32;
                scene.addChild(bomb);        
                bomb.frame = [0, 1, 2, 3, 4, null];                  
            });         
            // 満腹度アップ
            score += 10;
            // 300点になると
            if(290 < score){
                // いがぐり消える
                asteroidGroup.remove();
                // 中央に移動
                bigoimo.tl.clear();
                bigoimo.tl.moveTo(160 - 40, 34, 10);
                bigoimo.tl.then(function(){                
                    bigoimo.tl.clear(); //これ必要
                    // おいもシャワー
                    bigoimo.tl.delay(2);
                    bigoimo.tl.then(function(){
                        var oimo = new ExSprite(32, 32);
                        oimo.image = core.assets["images/cf307/oimo (3).png"];
                        oimo.x = bigoimo.x + bigoimo.width / 2 - oimo.width/2; 
                        oimo.y = bigoimo.height / 2 - oimo.height / 2 + 34;
                        oimoGroup1.addChild(oimo);
                        oimo.scale(1.2, 1.2);
                        var x3 = getRandom(-100, 420);
                        oimo.tl.moveTo(x3, 480, 120/2);
                        oimo.tl.then(function() {
                            oimo.remove();
                        });
                        // ももちゃんおいもシャワーを浴びる
                        oimo.addCollision(momo);
                        oimo.addEventListener(Event.COLLISION, function(e) {
                            // おいもが消えて
                            oimo.tl.clear();
                            oimo.tl.moveBy(0, -5, 0);
                            oimo.tl.fadeTo(0.5, 0).and().scaleTo(0.2, 0.2, 5);
                            oimo.tl.delay(0);
                            var sound = core.assets["sounds/cf307/suck1.mp3"].clone();
                            sound.play();
                            oimo.tl.then(function(){
                                oimo.remove();
                                // ももちゃんブッ 
                                var bomb = new ExSprite(32, 32);
                                bomb.image = core.assets["images/joe_gass.png"];
                                bomb.x = momo.x;
                                bomb.y = momo.y + 32*3;
                                scene.addChild(bomb);
                                bomb.scale(3, 3);       
                                bomb.frame = [0, 1, 2, 3, 4, null]; 
                                var sound = core.assets["sounds/gass.mp3"].clone();
                                sound.play();
                            });                                
                            // 満腹度アップ
                            score += 300;
                            // ももちゃん進む
                            //momo.moveBy(-momo.x / 10 + 160 /10 - 40 /10, -10, 5);
                            if(momo.y < -32){
                                momo.y = 200;                           
                            }                                             
                        });
                    });
                }); 
                bigoimo.tl.loop();
                // ゲームクリア       
                var gameclear = new ExSprite(147, 48);
                gameclear.image = core.assets['images/title_gameclear.png'];
                gameclear.x = 320 / 2 - gameclear.width/2;
                gameclear.y = 480 / 2 - gameclear.height/2;
                scene.addChild(gameclear);
                // 大きく
                gameclear.scale(0.5, 0.5);
                gameclear.tl.scaleTo(2, 2, 24);
                gameclear.tl.then(function() {
                    // サウンド
                    var sound = core.assets['sounds/cf307/correct2.mp3'].clone();
                    sound.play();
                    //core.stop();
                });
                // おいもグループを消す
                oimoGroup.remove();
                // ももちゃん大きくなりながら移動
                momo.tl.clear();                             
                momo.tl.then(function(){                     
                    momo.tl.moveTo(320 / 2 - 16, 480 / 2 - 16 + 96, 16).and().scaleTo(3, 3, 16);
                });
             }        
        });
    });
    scene.tl.loop();          
          
    // いがぐり落ちてくる
    ground.tl.delay(20);
    ground.tl.then(function() {
        var asteroid = new ExSprite(32, 32);
        asteroid.image = core.assets["images/cf307/igagurikuru.png"];
        asteroid.x = getRandom(0, 320 - 32);
        asteroid.y = 0;
        asteroidGroup.addChild(asteroid);
        asteroid.frame = [0, 1, 2 ,3];
        //asteroid.scale(0.9, 0.9);
        asteroid.tl.moveBy(0, 480, 50);
        asteroid.tl.then(function() {
            asteroid.remove();
        });
        //b-むと衝突したとき
        asteroid.addCollision(beamGroup);
        asteroid.addEventListener(Event.COLLISION, function(e) {
            asteroid.remove();             
            var bomb = new ExSprite(32, 32);
            bomb.image = core.assets["images/bomb.png"];
            bomb.x = asteroid.x;
            bomb.y = asteroid.y;
            scene.addChild(bomb);
            bomb.scale(1, 1);
            bomb.frame = [0, 1, 2, 3, 4, null];       
            var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
            sound.play();
            //いがぐり割れる
            bomb.tl.then(function(){  
                var wareguri = new ExSprite(32, 32);
                wareguri.image = core.assets["images/cf307/wareguri.png"];
                wareguri.x = asteroid.x;
                wareguri.y = asteroid.y;
                scene.addChild(wareguri);
                wareguri.scale(1.3, 1.3);
                // 消える
                wareguri.tl.delay(3);
                wareguri.tl.then(function(){
                    wareguri.remove();
                });
            });            
        });                   
    });     
    ground.tl.loop();
    // 巨大おいも
    var bigoimo = new ExSprite(80, 80);
    bigoimo.image = core.assets["images/cf307/oimokirahoka.png"];
    var x = getRandom(0, 320 - 32*2.5);
    bigoimo.x = x;
    bigoimo.y = - 32 * 2.5;
    scene.addChild(bigoimo);
    bigoimo.frame = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4];
    //bigoimo.tl.delay(30);
    bigoimo.tl.moveBy(0, 80 + 34, 30);
    bigoimo.tl.then(function() {
        var x1 = getRandom(240 - 80, 320 - 40);
        var x2 = getRandom(-40, 240); 
        bigoimo.tl.moveTo(x1, 34, 30);
        bigoimo.tl.moveTo(x2, 34, 30);        
        bigoimo.tl.loop();
    });
    //ビームグループ
    var beamGroup = new Group();
    scene.addChild(beamGroup);
    // いがぐりグループ
    var asteroidGroup = new Group();
    scene.addChild(asteroidGroup); 
    // 左へ移動するボタン
    var button_left = new ExSprite(62, 55);
    button_left.image = core.assets["images/b_left.png"];
    button_left.x = 320/2 - 62 - 31;
    button_left.y = 480 - 55;
    scene.addChild(button_left);
    // 左ボタンタップ開始
    button_left.addEventListener(Event.TOUCH_START, function(){
        button_left.frame = 1;
        momo.x -= 15;
        if(momo.x < - 16){
            momo.x = 304;
        }
        var sound = core.assets["sounds/cf307/jump12.mp3"].clone();
        sound.play();
    });
    // 左ボタンタップ終了
    button_left.addEventListener(Event.TOUCH_END, function(){
        button_left.frame = 0;
    });
    // 右へ移動するボタン
    var button_right = new ExSprite(62, 55);
    button_right.image = core.assets["images/b_right.png"];
    button_right.x = 320/2 + 31;
    button_right.y = 480 - 55;
    scene.addChild(button_right);
    // 右ボタンタップ開始
    button_right.addEventListener(Event.TOUCH_START, function(){
        button_right.frame = 1;
        momo.x += 15;
        if(320 - 16 < momo.x){
            momo.x = - 16;
        }
        var sound = core.assets["sounds/cf307/jump12.mp3"].clone();
        sound.play();
    });
    // 右ボタンタップ終了
    button_right.addEventListener(Event.TOUCH_END, function(){
        button_right.frame = 0;
    });
    // 火を発射するボタン
    var button_fire = new ExSprite(62, 55);
    button_fire.image = core.assets['images/b_red.png'];
    button_fire.x = 320 / 2 - button_fire.width / 2;
    button_fire.y = 480 - 55;
    scene.addChild(button_fire);
    button_fire.addEventListener(Event.TOUCH_START, function(){
        button_fire.frame = 1;
    });
    button_fire.addEventListener(Event.TOUCH_END, function(){
        button_fire.frame = 0;
    });
    // 火を発射
    button_fire.addEventListener(Event.TOUCH_START, function(){
        var beam = new ExSprite(32, 32);
        beam.image = core.assets['images/cf307/hi.png'];
        beam.x = momo.x + momo.width / 2 - beam.width / 2;
        beam.y = momo.y;
        beamGroup.addChild(beam);
        var sound = core.assets["sounds/cf307/matchstick-put-fire1.mp3"].clone();
        sound.play();
        // 上に向かって移動させよう
        beam.tl.moveBy(0, -480, 20);
        beam.tl.then(function(){
            beam.remove();
        });
    });  
   
    // ももちゃん
    var momo = new ExSprite(32, 32);
    momo.image = core.assets["images/cf307/momo.png"];
    momo.x = 320 /2 - 16;
    momo.y = 200;
    scene.addChild(momo);
    momo.frame = [0, 0, 1, 1, 2, 2];
    // ももちゃんを動かす
    momo.tl.moveBy(0, 480, 350);
    momo.tl.moveBy(0, 480, 350);
    momo.tl.loop();
    // スコア表示
    var score = 0;
    scoreLabel = new Label('SCORE : 0');
    scene.addChild(scoreLabel);
    scoreLabel.x = 10;
    scoreLabel.y = 10;
    scoreLabel.color = 'gray';
    scoreLabel.font = "24px 'PixelMplus10'";
    scoreLabel.addEventListener(Event.ENTER_FRAME, function() {
        scoreLabel.text = '満腹度(300で(^^)) : ' + score;
    });       
    // ももちゃん地面に衝突でゲームオーバー
    ground.addCollision(momo);
    ground.addEventListener(Event.COLLISION,function(e){
        // 残念ももちゃん
        momo.remove();
        var momoz = new ExSprite(32, 32);
        momoz.image = core.assets['images/cf307/momochanzannen.png'];
        momoz.x = momo.x;
        momoz.y = momo.y;
        scene.addChild(momoz);
        momoz.tl.then(function(){         
            // ゲームオーバーを表示
            var gameover = new ExSprite(147, 48);
            gameover.image = core.assets['images/title_gameover.png'];
            gameover.x = 320 / 2 - gameover.width/2;
            gameover.y = 480 / 2 - gameover.height/2;
            scene.addChild(gameover);
            // 大きく
            gameover.scale(0.5, 0.5);
            gameover.tl.scaleTo(2.3, 2.3, 10);
            gameover.tl.then(function() {
                core.stop();
            });
        });
        var sound = core.assets["sounds/cf307/se_maoudamashii_onepoint31.mp3"].clone();
        sound.play();      
    });
  
    // ももちゃんいがぐりに衝突でゲームオーバー
    momo.addCollision(asteroidGroup);
    momo.addEventListener(Event.COLLISION, function(e) {
        momo.remove();
        var momoz = new ExSprite(32, 32);
        momoz.image = core.assets['images/cf307/momochanzannen.png'];
        momoz.x = momo.x;
        momoz.y = momo.y;
        scene.addChild(momoz);
        // いがぐり跳ねる
        asteroidGroup.remove();
        var asteroid = new ExSprite(32, 32);
        asteroid.image = core.assets["images/cf307/igaguri.png"];
        asteroid.x = momo.x;
        asteroid.y = momo.y - 32;
        scene.addChild(asteroid);
        //asteroid.scale(0.9, 0.9);
        asteroid.tl.moveBy(20, -30, 3);
        asteroid.tl.moveBy(20, 100, 5);
        // ポコッ
        var sound = core.assets["sounds/cf307/strike1.mp3"].clone();
        sound.play();            
        asteroid.tl.then(function()
            var sound = core.assets["sounds/cf307/se_maoudamashii_onepoint31.mp3"].clone();
            sound.play();
            // ゲームオーバーを表示
            var gameover = new ExSprite(147, 48);
            gameover.image = core.assets['images/title_gameover.png'];
            gameover.x = 320 / 2 - gameover.width/2;
            gameover.y = 480 / 2 - gameover.height/2;
            scene.addChild(gameover);
            // 大きく
            gameover.scale(0.5, 0.5);
            gameover.tl.scaleTo(2, 2, 10);
            gameover.tl.then(function() {
                core.stop();
            });
        });     
    });  
 
    //==========
    // ここまで
    //==========
}

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

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

 8.おいも=3(音注意)^^ を発展させて、おならの音に合うように、戦闘機におしりをつけようと思ったのですが、戦闘機の好きな人に怒られるかもと思い、クレヨンしんちゃんのようなおしりにしようと思いましたが、おしりそのままでは生々しいので、お尻の象徴である桃になりました。

何もしないと落ちて行き、おいもをたべるとおならのガス噴射で進むというものを最初から考えていましたが、まずは簡単バージョンで、落ちず進まず横移動でおいもを食べて行くというものを作りました。

クリアすると「ブブッブ、ピンポーン」と鳴りますが、この「ブブッブ」のリズムは偶然の産物です。

// 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/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/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/igagurikuru.png",
    "images/cf307/oimohokahoka1.png",   
];
function gameStart(){// ゲーム画面
    scene = gameManager.createGameScene();
    core.replaceScene(scene); core.resume();
    //==========
    // ここから
    //==========
    scene.backgroundColor = "skyblue";
    
    // 
    var sky3 = new ExSprite(320, 241);
    sky3.image = core.assets["images/back_mountain.png"];
    scene.addChild(sky3);
    sky3.tl.moveTo(0, 240, 0);
    sky3.tl.moveBy(0, 240, 250);
    sky3.tl.loop();
    
    var sky1 = new ExSprite(320, 241);
    sky1.image = core.assets["images/back_mountain.png"];
    scene.addChild(sky1);
    sky1.tl.moveTo(0, -240, 0);
    sky1.tl.moveBy(0, 480, 500);
    sky1.tl.loop();
    sky1.tl.skip(500/2);
    var sky2 = new ExSprite(320, 241);
    sky2.image = core.assets["images/back_mountain.png"];
    scene.addChild(sky2);
    sky2.scale(-1, 1);
    sky2.tl.moveTo(0, -240, 0);
    sky2.tl.moveBy(0, 480, 500);
    sky2.tl.loop();
    sky2.tl.skip(0);
   
    // おいもグループ
    var oimoGroup = new Group();
    scene.addChild(oimoGroup); 
   
    // 地面
    var ground = new ExSprite(320, 55);
    ground.image = core.assets["images/cf307/blueground.png"];
    ground.x = 0;
    ground.y = 480;
    scene.addChild(ground);
    
    // おいもが落ちてくる
    scene.tl.delay(30);
    scene.tl.then(function() {
        var oimo = new ExSprite(32, 32);
        oimo.image = core.assets["images/cf307/oimohokahoka1.png"];
        oimo.x = bigoimo.x + bigoimo.width / 2 - oimo.width/2; 
        oimo.y = bigoimo.height / 2 - oimo.height / 2 + 34;
        oimoGroup.addChild(oimo);
        oimo.frame = [0, 1, 2, 3, 4]
        oimo.scale(1.2, 1.2);
        oimo.tl.moveBy(0, 480, 150);
        oimo.tl.then(function() {
            oimo.remove();
        });
        // おいもでももちゃんがブッ
        oimo.addCollision(momo);
        oimo.addEventListener(Event.COLLISION, function(e) {
            // おいもが消えて
            oimo.tl.clear();
            oimo.tl.moveBy(0, -5, 0);
            oimo.tl.fadeTo(0.5, 0).and().scaleTo(0.2, 0.2, 5);
            var sound = core.assets["sounds/cf307/suck1.mp3"].clone();
            sound.play();
            oimo.tl.delay(0);
            oimo.tl.then(function(){
                var sound = core.assets["sounds/gass.mp3"].clone();
                sound.play();
                oimo.remove();           
                // ももちゃんブッ 
                var bomb = new ExSprite(32, 32);
                bomb.image = core.assets["images/joe_gass.png"];
                bomb.x = momo.x;
                bomb.y = momo.y + 32;
                scene.addChild(bomb);              
                bomb.frame = [0, 1, 2, 3, 4, null];
             });       
            
            // 満腹度アップ
            score += 10;
            // 100点になると
            if(90 < score){
                 // 中央に移動
                bigoimo.tl.clear();
                bigoimo.tl.moveTo(160 - 40, 34, 10);
                bigoimo.tl.then(function(){
                  // いがぐり消える
              asteroidGroup.remove();
                bigoimo.tl.clear();
                // おいもシャワー
                bigoimo.tl.delay(2);
                bigoimo.tl.then(function(){
                    var oimo = new ExSprite(32, 32);
                    oimo.image = core.assets["images/cf307/oimo (3).png"];
                    oimo.x = bigoimo.x + bigoimo.width / 2 - oimo.width/2; 
                    oimo.y = bigoimo.height / 2 - oimo.height / 2 + 34;
                    oimoGroup.addChild(oimo);
                    oimo.scale(1.2, 1.2);
                    var x3 = getRandom(-100, 420);
                    oimo.tl.moveTo(x3, 480, 120/2);
                    oimo.tl.then(function() {
                        oimo.remove();
                    });
                    // ももちゃんおいもシャワーを浴びる
             oimo.addCollision(momo);
                 oimo.addEventListener(Event.COLLISION, function(e) {
                        // おいもが消えて
                        oimo.tl.clear();
                        oimo.tl.moveBy(0, -5, 0);
                        oimo.tl.fadeTo(0.5, 0).and().scaleTo(0.2, 0.2, 5);
                        oimo.tl.delay(0);
                        oimo.tl.then(function(){
                            var sound = core.assets["sounds/gass.mp3"].clone();
                            sound.play();
                            oimo.remove();
                        });
                        // ももちゃんブッ 
                        var bomb = new ExSprite(32, 32);
                        bomb.image = core.assets["images/joe_gass.png"];
                        bomb.x = momo.x;
                        bomb.y = momo.y + 32;
                        scene.addChild(bomb);        
                        bomb.frame = [0, 1, 2, 3, 4, null];       
                        var sound = core.assets["sounds/cf307/suck1.mp3"].clone();
                        sound.play();
                        // 満腹度アップ
                        score += 100;
                        // ももちゃん進む
                        momo.moveBy(-momo.x / 10 + 160 /10 - 40 /10, -10, 5);
                        if(momo.y < -32){
                            momo.y = 200;
                        }                  
                        });
                    });
                }); 
                bigoimo.tl.loop();
            }        
        });
    });
    scene.tl.loop();
    // いがぐり落ちてくる
    ground.tl.delay(20);
    ground.tl.then(function() {
        var asteroid = new ExSprite(32, 32);
        asteroid.image = core.assets["images/cf307/igagurikuru.png"];
        asteroid.x = getRandom(0, 320 - 32);
        asteroid.y = 0;
        asteroidGroup.addChild(asteroid);
        asteroid.frame = [0, 1, 2, 3];
        //asteroid.scale(0.9, 0.9);
        asteroid.tl.moveBy(0, 480, 50);
        asteroid.tl.then(function() {
            asteroid.remove();
        });
        //b-むと衝突したとき
        asteroid.addCollision(beamGroup);
        asteroid.addEventListener(Event.COLLISION, function(e) {
            asteroid.remove();             
            var bomb = new ExSprite(32, 32);
            bomb.image = core.assets["images/bomb.png"];
            bomb.x = asteroid.x;
            bomb.y = asteroid.y;
            scene.addChild(bomb);
            bomb.scale(1, 1);
            bomb.frame = [0, 1, 2, 3, 4, null];       
            var sound = core.assets["sounds/cf307/kotsudumi1.mp3"].clone();
            sound.play();
            //いがぐり割れる
            bomb.tl.then(function(){  
                var wareguri = new ExSprite(32, 32);
                wareguri.image = core.assets["images/cf307/wareguri.png"];
                wareguri.x = asteroid.x;
                wareguri.y = asteroid.y;
                scene.addChild(wareguri);
                wareguri.scale(1.3, 1.3);
                // 消える
                wareguri.tl.delay(3);
                wareguri.tl.then(function(){
                    wareguri.remove();
                });
            });            
        });                   
    });     
    ground.tl.loop(); 
    // 巨大おいも
    var bigoimo = new ExSprite(80, 80);
    bigoimo.image = core.assets["images/cf307/oimokirakira1.png"];
    var x = getRandom(0, 320 - 32*2.5);
    bigoimo.x = x;
    bigoimo.y = - 32 * 2.5;
    scene.addChild(bigoimo);
    bigoimo.frame = [0, 0, 1, 1, 2, 2, 3, 3];
    //bigoimo.tl.delay(30);
    bigoimo.tl.moveBy(0, 80 + 34, 30);
    bigoimo.tl.then(function() {
        var x1 = getRandom(240 - 80, 320 - 32 * 2.5);
        var x2 = getRandom(0, 240); 
        bigoimo.tl.moveTo(x1, 34, 30);
        bigoimo.tl.moveTo(x2, 34, 30);        
        bigoimo.tl.loop();
    });
    // いがぐりグループ
    var asteroidGroup = new Group();
    scene.addChild(asteroidGroup);
    //ビームグループ
    var beamGroup = new Group();
    scene.addChild(beamGroup);
    // 左へ移動するボタン
    var button_left = new ExSprite(62, 55);
    button_left.image = core.assets["images/b_left.png"];
    button_left.x = 320/2 - 62 - 31;
    button_left.y = 480 - 55;
    scene.addChild(button_left);
    // 左ボタンタップ開始
    button_left.addEventListener(Event.TOUCH_START, function(){
        button_left.frame = 1;
        momo.x -= 15;
        if(momo.x < - 16){
            momo.x = 304;
        }
        var sound = core.assets["sounds/cf307/jump12.mp3"].clone();
        sound.play();
    });
    // 左ボタンタップ終了
    button_left.addEventListener(Event.TOUCH_END, function(){
        button_left.frame = 0;
    });
    // 右へ移動するボタン
    var button_right = new ExSprite(62, 55);
    button_right.image = core.assets["images/b_right.png"];
    button_right.x = 320/2 + 31;
    button_right.y = 480 - 55;
    scene.addChild(button_right);
    // 右ボタンタップ開始
    button_right.addEventListener(Event.TOUCH_START, function(){
        button_right.frame = 1;
        momo.x += 15;
        if(320 - 16 < momo.x){
            momo.x = - 16;
        }
        var sound = core.assets["sounds/cf307/jump12.mp3"].clone();
        sound.play();
    });
    // 右ボタンタップ終了
    button_right.addEventListener(Event.TOUCH_END, function(){
        button_right.frame = 0;
    });
    // 火を発射するボタン
    var button_fire = new ExSprite(62, 55);
    button_fire.image = core.assets['images/b_red.png'];
    button_fire.x = 320 / 2 - button_fire.width / 2;
    button_fire.y = 480 - 55;
    scene.addChild(button_fire);
    button_fire.addEventListener(Event.TOUCH_START, function(){
        button_fire.frame = 1;
    });
    button_fire.addEventListener(Event.TOUCH_END, function(){
        button_fire.frame = 0;
    });
    // 火を発射
    button_fire.addEventListener(Event.TOUCH_START, function(){
        var beam = new ExSprite(32, 32);
        beam.image = core.assets['images/cf307/hi.png'];
        beam.x = momo.x + momo.width / 2 - beam.width / 2;
        beam.y = momo.y;
        beamGroup.addChild(beam);
        var sound = core.assets["sounds/cf307/matchstick-put-fire1.mp3"].clone();
        sound.play();
        // 上に向かって移動させよう
        beam.tl.moveBy(0, -480, 20);
        beam.tl.then(function(){
            beam.remove();
        });
    }); 
    
    // ももちゃん
    var momo = new ExSprite(32, 32);
    momo.image = core.assets["images/cf307/momo.png"];
    momo.x = 320 /2 - 16;
    momo.y = 360;
    scene.addChild(momo);
    momo.frame = [0, 0, 1, 1, 2, 2];
    // スコア表示
    var score = 0;
    scoreLabel = new Label('SCORE : 0');
    scene.addChild(scoreLabel);
    scoreLabel.x = 10;
    scoreLabel.y = 10;
    scoreLabel.color = 'gray';
    scoreLabel.font = "24px 'PixelMplus10'";
    scoreLabel.addEventListener(Event.ENTER_FRAME, function() {
        scoreLabel.text = '満腹度(100^-^) : ' + score;
    });       
    // 巨大おいもに到達したら
    bigoimo.addCollision(momo);
    bigoimo.addEventListener(Event.COLLISION,function(e){
        // おいもたち消える
        oimoGroup.remove();
        // 巨大おいもが消えて
        bigoimo.tl.clear();
        bigoimo.tl.moveBy(0, -5, 0);
        bigoimo.tl.fadeTo(0.5, 0).and().scaleTo(0.2, 0.2, 5);
        bigoimo.tl.delay(3);
        bigoimo.tl.then(function(){
            //var sound = core.assets["sounds/gass.mp3"].clone();
            //sound.play();
            bigoimo.remove();
            var sound = core.assets["sounds/cf307/suck1.mp3"].clone();
            sound.play();
        });
        // ももちゃん大きくなりながら移動
        momo.tl.clear(); 
        momo.tl.moveTo(320 / 2 - 16, 480 / 2 - 16 + 96, 16).and().scaleTo(3, 3, 16);
        // 大きなガス
        var bigbomb = new ExSprite(32, 32);
        bigbomb.image = core.assets["images/joe_gass.png"];
        bigbomb.x = momo.x;
        bigbomb.y = momo.y + 64;
        scene.addChild(bigbomb);
        bigbomb.frame = [0, 1, 2, 3, 4];
        bigbomb.scale(3,3);
        // 爆発音
        bigbomb.tl.delay(0);
        bigbomb.tl.then(function(){              
            var sound = core.assets["sounds/gass.mp3"].clone();
            sound.play();
        });
        bigbomb.tl.loop();
        // 大ガス移動
        bigbomb.tl.moveTo(320 / 2 - 27, 320 + 70, 10).and().scaleTo(3, 3, 10);
        // 動きながら 
        bigbomb.tl.then(function(){
            var a = getRandom(-30, 30);
            var b = getRandom(-30, 30);
            bigbomb.tl.moveBy(a, b, 1);
            bigbomb.tl.moveTo(320 / 2 - 27, 320 + 70, 2);
            bigbomb.tl.loop();
        });    
        // ゲームクリア       
        var gameclear = new ExSprite(147, 48);
        gameclear.image = core.assets['images/title_gameclear.png'];
        gameclear.x = 320 / 2 - gameclear.width/2;
        gameclear.y = 480 / 2 - gameclear.height/2;
        scene.addChild(gameclear);
        // 大きく
        gameclear.scale(0.5, 0.5);
        gameclear.tl.scaleTo(2, 2, 24);
        gameclear.tl.then(function() {
            // サウンド
            var sound = core.assets['sounds/cf307/correct2.mp3'].clone();
            sound.play();
            core.stop();
        });                                 
    });

    // ももちゃんいがぐりに衝突でゲームオーバー
    momo.addCollision(asteroidGroup);
    momo.addEventListener(Event.COLLISION, function(e) {
        momo.remove();
        var momoz = new ExSprite(32, 32);
        momoz.image = core.assets['images/cf307/momochanzannen.png'];
        momoz.x = momo.x;
        momoz.y = momo.y;
        scene.addChild(momoz);
        // いがぐり跳ねる
        asteroidGroup.remove();
        var asteroid = new ExSprite(32, 32);
        asteroid.image = core.assets["images/cf307/igaguri.png"];
        asteroid.x = momo.x;
        asteroid.y = momo.y - 32;
        scene.addChild(asteroid);
        //asteroid.scale(0.9, 0.9);
        asteroid.tl.moveBy(20, -30, 3);
        asteroid.tl.moveBy(20, 100, 5);
        // ポコッ
        var sound = core.assets["sounds/cf307/strike1.mp3"].clone();
        sound.play();            
        asteroid.tl.then(function()            var sound = core.assets["sounds/cf307/se_maoudamashii_onepoint31.mp3"].clone();
            sound.play();        
            // ゲームオーバーを表示
            var gameover = new ExSprite(147, 48);
            gameover.image = core.assets['images/title_gameover.png'];
            gameover.x = 320 / 2 - gameover.width/2;
            gameover.y = 480 / 2 - gameover.height/2;
            scene.addChild(gameover);
            // 大きく
            gameover.scale(0.5, 0.5);
            gameover.tl.scaleTo(2, 2, 10);
            gameover.tl.then(function() {
                core.stop();
            });
        });     
    });   
    //==========
    // ここまで
    //==========
}
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();
}

へびたま(解説)

忘れないうちに、どうやって作ったかなど記録しておきたいと思います。(最近すぐ忘れてしまいます。やればやるほど、びっくりするくらいものすごい勢いで忘れてくので悲しいばかりです。新しいことを処理するのに、忘れないと間に合わないと海馬が判断しているのでしょうか…)

1.ゲームの内容

へびが動いていきます。へびは、進行方向に対して、右か左いずれかタップした方向に曲がります。(後方には曲がりません)へびは虹色の玉を落としていきます。

タイトル画面は、自由に動かせる練習画面。

ゲーム画面は、頭や玉が壁に当たらないように、ゴールの卵まで到達したらクリア。それには少しこつが要ります。上手に動かさないと、頭は当たらなくても玉が壁に当たってしまいます。

お手本画面としてオートマチックにクリアするものを作ってみました。

2.作ったきっかけ

ゲーム投稿サイトitch.ioの中で、Snakeというゲームがありました。その説明を訳します。

「Snakeというアーケードゲームがありました。それは、蛇を操作して、りんごを食べ、画面いっぱいに成長させなければなりませんが、壁や自分にブロックされるとアウトというゲームです。

Snakeは、1976年に、グレムリン社によって作成された、Blockadeを元に作られたものです。そこから、多くの模写や派生したバージョンが登場しています。

1998年には、ノキアによってSnakeとSnake2が携帯電話に搭載?されたことにより、一般により広く知られることとなりました。そうして、偉大な古典ゲームのひとつとなりました。

このバージョンのSnakeは、Snake2のレトロスタイルのリメイク版です。(以下略・・)」

要するに、古典的有名ゲームにSnakeというゲームがあって、そのリメイクですよということらしいです。偉大な古典ゲーム・・おそらく、他にはポン、ブロック崩し、テトリス(愛しの!)あたりのことをいうのでしょうか。息子がいろいろ教えてくれました。

さすがは偉大な古典ゲーム、私はさほど珍しさを感じなかったのですが、このレトロなゲームを息子がなぜかいたく気に入り(やはり人を惹きつけるものがあるのでしょう)、へびを作ろうということになりました。

3.試行錯誤の連続

動きとしては、頭があり、いくつかのブロックでできた体がその動きに規則正しく遅れてついていくというものです。一見簡単そうに見えましたが、これがなかなか難しい。直線で動かすのは簡単にできても、曲がる時や曲がった後にずれてしまいます。

どこかにこの動きのサンプルがないか探したのですが、見つけることができませんでした。
ちなみに、いままで作ったゲームはすべて授業で習ったことだけで、他の人が作ったプログラムを見て作ったものはなくすべて自分たちで一からコードを考えて作ってきたのですが、今回は何か参考にしたほうがいいだろうと思ったのです。しかし、どこにもそれらしいものがありませんでした。

そこで、最初にやったのは、出発点から到達点までを決めて、速度を一定にし、胴体のひとつひとつをそれぞれ出発点で送らせて同じ速度で動かすという方法です。直線は簡単にできても、クリックしてからの動きがうまくいきませんでした。

次に試したのは、・・・なんだっけ、いろいろあって忘れてしまいました。兎に角、あきらめて、すべて捨てました。最後に成功したのが以下の方法です。多分、すごく原始的なやり方だと思います。

4.作り方

作りたかった基本の動きは以下の二つです。

1.ほかっておくとまっすぐ進む。進行方向に対して、右か左いずれかクリックした方向に曲がる。(後ろに曲がることはできない)

2.画面の端まできたら、反対の端にまわって出現する。

3.へびが通ったあとにカラフルな玉が置かれていく。

⑴本体

まず、へびの頭(head)を出し、その後に16ピクセルずらして体(body1~5)を5個のブロックで作ります。

 var head = new ExSprite(16, 16);
 head.image = core.assets["images/cf307/snakeheadene.png"];
 //head.backgroundColor = "red";
 head.x = 320 - 16 - 8;
 head.y = 480 - 16 * 5;
 snakeGroup.addChild(head);
 var body1 = new ExSprite(16, 16);
 body1.backgroundColor = "green";
 body1.x = head.x + head.width / 2 - body1.width / 2;
 body1.y = head.y + 16;
 snakeGroup.addChild(body1);

 以下body2~body5も同様につくる

⑵最初の基本の動き loop();を使って動かす

はじめは下から出て、上に向かって進むので、上むきの動きにします。

胴体のブロックをどの仕組みを使って動かすかが最大のポイントですが、最終的に、loop();を使って16ピクセル(胴体のブロック一つ分)ずつ動かすやり方に行き着きました。

 // 最初の動き(上向き)
 head.tl.moveBy(0, -16, 8); 
 head.tl.moveBy(0, -16, 8); 
 head.tl.loop();
 // 最初の方向(上向き)
 var houkou = 1; 
 console.log(houkou);
 body1.tl.moveBy(0, -16, 8); 
 body1.tl.moveBy(0, -16, 8); 
 body1.tl.loop(); 

 以下body2~5も同様。

⑶クリックすると左右に曲がる

へびの向かっている方向としては、画面に向かって上むき、右向き、左向き、下向きの4通りがあるので、それぞれで分ける必要があります。そこで上むきで進んでいるときの方向を1と指定して、それぞれ指定しておきます。そして、

// 上向き(houkou=1) のとき
// 右向き(houkou=2) のとき
// 左向き(houkou=3) のとき
// 下向き(houkou=4) のとき

としてそれぞれタップしたとき、進行方向に対して左右に曲がるようにしました。

上むきのときを例に説明します。

上むきのときに、へびの頭より右側をタッチした場合は、head.x < e.x の場合なので、タッチされたらloopを停止し、曲がる方向に頭を回転させ、こんどはx軸の方向に8カウントで16ピクセル進むのを繰り返します。

bodyについても同様に、headから8カウント遅らせて、headの後を追う動きにします。

// 上向き(houkou=1) のとき
scene.addEventListener(Event.TOUCH_START, function(e){
    if(houkou == 1){
        // 右側タッチで右に曲がる 
        if(head.x < e.x){ 
            head.tl.unloop();
            head.tl.clear();
            head.tl.rotateTo(90, 0);
            head.tl.then(function(){ //こうしないと上にむかうloopが効いてしまう
                head.tl.moveBy(16, 0, 8);
                head.tl.moveBy(16, 0, 8);
                head.tl.loop();
                houkou = 2; // 右方向を2と指定
                console.log(houkou);
            });
            body1.tl.unloop();
            body1.tl.clear();
            body1.tl.moveTo(head.x, head.y, 8);// body一個分進んでからなので
            body1.tl.then(function(){ 
                body1.tl.moveBy(16, 0, 8);
                body1.tl.moveBy(16, 0, 8);
                body1.tl.loop();
            });
       以下body2~5についても同じようにする

同じように、左側をタッチした場合は、 if(head.x > e.x){};とし、 head.tl.moveBy(-16, 0, 8);と動かします。

あとは、右向き、左向き、下向きの場合も、同じように進行方向だけ変えれば書くことができます。

⑷画面の端まできたら、反対側にまわって出現させる

端まできたら、そのまま消えてしまうのではなくて、反対側から続いているように出現させることにしました。

それには、端に線を置いておいて、ぶつかったら反対側に移動するという動きにします。

 

 

上下左右にbarを配置します。

 var bar = new ExSprite(320, 1);
 //bar.backgroundColor = "red";
 bar.y = 0;
 scene.addChild(bar); 
 bar.tag = "上のバー";
 
 var barmigi = new ExSprite(1, 480);
 //barmigi.backgroundColor = "red";
 barmigi.x = 319;
 scene.addChild(barmigi);
 barmigi.tag = "右のバー";
 
 var barhidari = new ExSprite(1, 480);
 //barhidari.backgroundColor = "red";
 barhidari.x = 0;
 scene.addChild(barhidari);
 barhidari.tag = "左のバー";
 
 var barsita = new ExSprite(320, 1);
 //barsita.backgroundColor = "red";
 barsita.y = 479;
 scene.addChild(barsita); 
 barsita.tag = "下のバー";

衝突判定をして、当たったら反対側に移動します。動きはそのままなので、座標を指定して動かすだけです。

 // バーに当たったら
 head.addCollision(bar); 
 head.addCollision(barmigi);
 head.addCollision(barhidari);
 head.addCollision(barsita);
 head.addEventListener(Event.COLLISION, function(e) {
     if(e.collision.target.tag == "上のバー"){  
         console.log("ぶつかったよ");
         console.log(head.y);
         head.y = 480 - 17; 
     }
     if(e.collision.target.tag == "右のバー"){
         head.x = 2;
     } 
     if(e.collision.target.tag == "左のバー"){
         head.x = 320 - 17;
     } 
     if(e.collision.target.tag == "下のバー"){
         head.y = 2;
     } 
 });

bode1~5についても同様にします。

⑸問題発生(全部が移動しおわらないうちにタップすると、bodyの動きがおかしくなる)

しかし、これだけでは、例えば頭が端にきて頭、body1、body2と順番に移動をはじめますが、全部移動し終わらないうちにタップをすると、タップをしたときの命令が効いて、まだ移動していないbodyがワープして飛んできてしまいます。

そこで、barに当たってから移動し終わるまで、タッチしても無効になるように、カウンターを使ってタッチのイベントを無効化しました。headがbarに当たるとカウンターが1になるようにし、移動し終わるのが40カウント後なので、そうしたらカウンターを0に戻し、タッチイベントはカウンターが0の時に動くように設定しました。以下青字を挟んで解決しました。

 head.addEventListener(Event.COLLISION, function(e) {
     counter = 1;
     scene.tl.delay(40).then(function(){
         counter = 0;
     });
     (以下略)

 

scene.addEventListener(Event.TOUCH_START, function(e){
    if(counter == 0){ // 壁にぶつかったあと全部移動するまでタッチ無効にする為
    (以下略)

⑹通った後に七色の玉が置かれていく

本当は、二匹のへびが対決するものにしたかったのですが、そこまでは無理だったので、カラフルな玉が出るようにしてみました。

body5の位置に、色を順番に変えながら出現するようにしました。

七色あるので、frame数を変数にした関数を使いました。

 // へびの玉を作る関数
 function makeMozi(f) {
     var mozi = new ExSprite(9, 9);
     mozi.image = core.assets["images/cf307/hebitama.png"];
     mozi.x = body5.x + 8 - 4.5;
     mozi.y = body5.y + 8 - 4.5;
     moziGroup.addChild(mozi); 
     mozi.frame = f;
 }
 
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(0);
 });
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(1);
 });
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(2);
 });
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(3);
 });
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(4);
 });
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(5);
 });
 snakeGroup.tl.delay(8).then(function(){
     makeMozi(6);
 });
 snakeGroup.tl.loop(); 

⑺ゲーム画面

ⅰ.壁の配置

画面は、32×10、32×15ピクセルに分けることができるので、32×32を一マスとして、壁の配置を考えました。そして、マスの位置で、配置と長さを指定していくことで、簡単に壁を配置することができました。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

kabeは、幅をw,高さをh、位置のx座標をx、y座標をyとします。

 var kabes = new Array();
 function makeKabe(w, h, x, y) {
     var kabe = new ExSprite(w, h);
     kabe.backgroundColor = "red";
     kabe.x = x;
     kabe.y = y;
     scene.addChild(kabe);
     kabes.push(kabe); 
 }

縦の壁はw=1,横の壁はh=1とし、長さと位置をそれぞれ方眼用紙のマスを見ながら埋めていきます。

 makeKabe(1, 480 - 64, 320 - 32, 64);
 makeKabe(320 - 32 * 2, 1, 32, 64);
 makeKabe(1, 480 - 32 * 3, 32, 64);
 makeKabe(320 - 32 * 3, 1, 32, 480 - 32); 
 makeKabe(1, 32 * 5, 320 - 32 * 2, 32 * 9); // 5
 ・・・(以下略)

ⅱ.壁の衝突判定

壁は配列になっているので、for文の中に衝突判定を入れます。

 // 頭や体がかべに当たったらゲームオーバー
 for(var i=0; i<kabes.length; i++){
      head.addCollision(kabes[i]);
     kabes[i].addCollision(moziGroup);
     kabes[i].addEventListener(Event.COLLISION, function(e){ //[i]があるからこれもforの中に入れる
         // 操作不能にするためのカウンター(そのままではゴールできてしまう)
         counter = 1;
     (以下略)

⑻お手本の画面

オートマチックに動かすために、最初に作った、タップしたら左右いずれかに動くという動きを、関数にして簡潔にしました。

動きとしては、4×2の8通りあるので、それぞれ

// 上向きから左に曲がる動き:function upLeft(){});
// 左向きから下に曲がる動き:function leftDown(){ });
// 左向きから下に曲がる動き:function leftDown(){ });
・・・
のように作っていきました。

そして、曲がらせたい箇所にきたら、いずれかを指定して、曲がるようにします。これも、先に挙げた方眼紙の絵を見ながら指定していくと簡単です。

 scene.addEventListener(Event.ENTER_FRAME, function() {
     if(head.y == 32 + 8 && head.x == 320 - 16 - 8){
         upLeft();
     }
     if(head.y == 32 + 8 && head.x == 8){
         leftDown();
     }
     if(head.y == 32 * 14 + 8 && head.x == 8){
         downRight();
     }
     if(head.y == 32 * 14 + 8 && head.x == 32 * 8 + 8){
         rightUp();
     }
     if(head.y <= 32 * 8 + 8 && head.y > 32 * 8 && head.x == 32 * 8 + 8){
         upLeft();
     }
    ・・・(以下略)

⑼その他の問題

その他、以下の問題も解決して、完成しました。(メモ書きから)

barにも衝突判定があるのでゲームクリアになってしまうので修正が必要→tagをつけて解決
ゲームオーバーになっても強行突破できてしまう→これもバーと同じカウンターを使って解決

5.完成したソースコード

なぜかここにうまく貼り付けができないので、PDFをリンクします。

へびたまソースコード

ぺらぺら小僧がめおべ(解説)

「ゲームオーバーを表示させよう」という授業の後作ったものです。

ゲームオーバーを画面の中央に表示して、少しずつ大きくするという課題でした。

この時に、Piskelの使い方も習って、その時にフレームを使ったアニメーションの作り方も教えていただいて、作ったキャラクターがぺらぺらおしゃべりしているように見えたので、ぺらぺら小僧と名付けました。

おしゃべりなぺらぺら小僧。隕石が近づいてくるのにも気づかず、ぺらぺら喋っています。
「ぺらぺら小僧!うしろ!」

var assets = [
 // 背景
 'images/space.png',
 // 隕石
 'images/asteroid_1.png',
 // 戦闘機
 'images/cf307/perapera.png',
 // 爆発
 'images/bomb.png',
 // ゲームオーバー
 "images/title_gameover.png",
 // 音
 'sounds/bomb.mp3',
 'sounds/bomb_l.mp3',
 // CodeFriendsタイトル
 "images/title.png",
 "images/planet_04.png"   
];

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

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

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

    // プレイヤー
    var soldier = new ExSprite(64, 64);
    soldier.image = core.assets["images/cf307/perapera.png"];
    soldier.x = 320 / 2 - soldier.width / 2;
    soldier.y = 250;
    scene.addChild(soldier);
    soldier.frame = [0, 1, 2,];

    //惑星
    var pla = new ExSprite(88, 88);
    pla.image =core.assets["images/planet_04.png"];
    pla.x = 320,
    pla.y = 0;
    scene.addChild(pla);
    pla.scale(0.1, 0.1);
    pla.tl.then(function(){ 
        pla.tl.moveTo(soldier.x - 12, soldier.y, 50 - 12); 
        pla.tl.scaleTo(1, 1, 10); 
    });

    // 50フレーム後に戦闘機爆発
    soldier.addCollision(pla);
    soldier.addEventListener(Event.COLLISION,function(e){
        var bomb = new ExSprite(32, 32);
        bomb.image = core.assets["images/bomb.png"];
        bomb.x = soldier.x;
        bomb.y = soldier.y;
        scene.addChild(bomb);
        bomb.tl.scaleTo(5, 5, 0);
        // 爆発のアニメーション
        bomb.frame = [0, 1, 2, 3, 4, null];
        bomb.addEventListener(Event.ANIMATION_END, function(){
            // ゲームオーバーを表示させる
            var gameover = new ExSprite(147, 48);
            gameover.image = core.assets['images/title_gameover.png'];
            gameover.x = 320 / 2 - gameover.width/2;
            gameover.y = 480 / 2 - gameover.height/2;
            scene.addChild(gameover);
            // 少しずつ大きくさせてみよう
            gameover.scale(0.5, 0.5);
            gameover.tl.scaleTo(2.3, 2.3, 10);
            gameover.tl.then(function() {
                core.stop();
            });
        });
        // 戦闘機を消す
        soldier.remove();
        // 爆発する音を鳴らす
        var sound = core.assets['sounds/bomb_l.mp3'].clone();
        sound.play();
    });

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

function titleStart(){// タイトル画面
    var scene = gameManager.createTitleScene();
    core.replaceScene(scene); core.pause();
    scene.on(enchant.Event.TOUCH_START, function(){gameStart();});
}

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

おいも=3(音注意)^^(解説)

この後に出現する”ももちゃん”の基になったのがこれです。

シューティングの授業の時に、「隕石とぶつかった時の音をつけましょう」ということになって、あらかじめ用意されていたsoundsの中から音を探しているときに、愉快な音があったので、つけました。

そうしたら、親は異様にウケて、笑いが止まらなくなりました。
戦闘機が石とぶつかって、この音がするのがものすごく可笑しかったのです。笑いはギャップで起こると言われますが、こういうことなのかも知れません。

通りかかった先生も笑って、「この音いいでしょー!リアルな音を探したんですよ!!」とおっしゃってました。

そして、この音なら石よりもおいもが自然でしょうということになって、こうなりました。

 

var assets = [
    //背景
    'images/space.png',
    // 隕石
    'images/asteroid_1.png',
    // 戦闘機
    'images/soldier.png',
    // CodeFriendsタイトル
    "images/title.png",
    "images/b_left.png",
    "images/b_right.png",
    "images/bomb.png",
    "sounds/talk.mp3",
    "sounds/bomb.mp3",
    "images/joe_gass.png",
    "sounds/gass.mp3",
    "images/cf307/oimo.png",
    "images/back_sky.png",
    "images/cf307/oimo (3).png"
];

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

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

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

    // 左へ移動するボタン
    var button_left = new ExSprite(62, 55);
    button_left.image = core.assets["images/b_left.png"];
    button_left.x = 320/2 - 62;
    button_left.y = 480 - 55;
    scene.addChild(button_left);
    // 左ボタンタップ開始
    button_left.addEventListener(Event.TOUCH_START, function(){
    button_left.frame = 1;
    soldier.x += -20;
    });
    // 左ボタンタップ終了
    button_left.addEventListener(Event.TOUCH_END, function(){
       button_left.frame = 0;
    });

    // 右へ移動するボタン
    var button_right = new ExSprite(62, 55);
    button_right.image = core.assets["images/b_right.png"];
    button_right.x = 320/2 ;
    button_right.y = 480 - 55;
    scene.addChild(button_right);
    // 右ボタンタップ開始
    button_right.addEventListener(Event.TOUCH_START, function(){
        button_right.frame = 1;
        soldier.x += 20;
        //var sound = core.assets["sounds/talk.mp3"].clone();
        //sound.play();
    });
    // 右ボタンタップ終了
    button_right.addEventListener(Event.TOUCH_END, function(){
        button_right.frame = 0;
    });  
 
    // 戦闘機
    var soldier = new ExSprite(32, 32);
    soldier.image = core.assets["images/soldier.png"];
    soldier.x = 144;
    soldier.y = 360;
    scene.addChild(soldier);

    // 隕石(おいも)
    scene.tl.delay(20);
    scene.tl.then(function() {
        var asteroid = new ExSprite(32, 32);
        asteroid.image = core.assets["images/cf307/oimo (3).png"];
        asteroid.x = getRandom(0, 320 - 32);
        asteroid.y = 0;
        scene.addChild(asteroid);
        asteroid.tl.moveBy(0, 480, 100);
        asteroid.tl.then(function() {
            asteroid.remove();
        });
       soldier.addCollision(asteroid);
    });
    scene.tl.loop();

    soldier.addEventListener(Event.COLLISION, function(e) {
        var bomb = new ExSprite(32, 32);
        bomb.image = core.assets["images/joe_gass.png"];
        bomb.x = soldier.x;
        bomb.y = soldier.y + 32;
        scene.addChild(bomb);
        bomb.frame = [0, 1, 2, 3, 4, null];
        soldier.tl.fadeTo(0, 0);
        soldier.tl.fadeTo(0.5, 10); 
        soldier.tl.fadeTo(1, 10);
        var sound = core.assets["sounds/gass.mp3"].clone();
        sound.play(); 
    });

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

function titleStart(){// タイトル画面
    var scene = gameManager.createTitleScene();
    core.replaceScene(scene); core.pause();
    scene.on(enchant.Event.TOUCH_START, function(){gameStart();});
}

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

隕石(解説)

シューティングゲームの授業になって、初めてつくった試作品です。

猫とぶつかった時に、隕石とぶつかった時とは違う音にしたかったのですが、戦闘機と隕石の衝突について

soldier.addCollision(asteroid);
soldier.addEventListener(Event.COLLISION, function(e) { 

としたとき、単に、戦闘機と猫の衝突判定

soldier.addCollision(neko);

 を付け加えても、soldier.addEventListener(Event.COLLISION, function(e) { には、その相手を判別する命令までは含まれていないので、できません。

そのうちその方法も習うだろうとこの時は諦めました。

その後、タグ(tag)を使って相手を判別するという方法を習い、できたのでした。

詳しい解説とコード (一研究)隕石

花火(解説)

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

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

まず線と透明の花火(0フレーム目を透明にしておけばよい)を同じ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();
}

(解説)タッチしてちょんまげ

まげをタッチすると上下に動くというものを授業でやったので、それを基にして作りました。

くだものが落ちた後に元に戻すというのが難しくて、大変苦労しました。

左上に初期画面のたぬきが出たままなのは、当時どういう訳かこれを消そうとするとバグになってしまって解決できなかったので、そのままにしたものです。

一研究・コラムはこちら

(コラム)タッチしてちょんまげ

(一研究)タッチしてちょんまげ