カウンターとインクリメント

条件やイベントに応じて、数をカウントさせる。

例:0から始まって、○○をタッチする度に1ずつ増やしたい場合

// カウンター
var counter = 0;//ここの数字はカウンターの初期値を入れる
○○.addEventListener(Event.TOUCH_START, function(){
    counter++;
});

++:値を1だけ増やす(インクリメント)

– -:値を1だけ減らす(デクリメント)

これと、ラベルを組み合わせれば、カウンターの値を表示させることができる。

// カウンター
var counter = 0;// カウンターの初期値
// ラベル
var label = new Label("0");// 表示の初期値を0にする場合
label.x = 160 - 16;
label.y = 380 - 90;
label.color = "white";
label.font = "32px Arial";
scene.addChild(label);
hand.addEventListener(Event.TOUCH_START, function(){ 
    counter++;// インクリメント
    label.text = counter;// ラベルの表示をカウントされた値に更新する
});

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

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

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

この時に、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();
};

ラベル(文字列)の表示

var ○○(ラベルの名前) = new Label("文字列の中身・後から指定してもよい"); 
○○.x = x座標の位置;
○○.y = y座標の位置; 
○○.color = “色";
○○.font = “文字の大きさ(ピクセル) 字体"; 
○○.text = counter; ←文字列の中身の指定
scene.addChild(○○);

new Label();のところは、テキストの中身になるので、new Label(“あ”);(テキストは””で囲む)とすれば、「あ」と表示されるが、後から指定することもできる。

例えば得点表示にする場合は、テキスト部分を得点(counterの値)として変化させたいので、ここは
var ○○ = new Label();
とだけしておいて、カウンターを作って、
○○.text = counter;
とすればよい。

おいも=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();
};

コアストップ

// アニメーション終了後ゲーム終了 
kuru.addEventListener(Event.ANIMATION_END, function(){
    // ゲームオーバーを表示
    var gameover = new ExSprite(147, 48);
    gameover.image = core.assets['images/title_gameover.png']; 
    gameover.x = scene.width / 2 - gameover.width/2;
    gameover.y = scene.height / 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.addCollision(asteroid);
soldier.addEventListener(Event.COLLISION, function(e) { 

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

soldier.addCollision(neko);

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

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

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

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