ゲームを作成しながらプログラミング勉強！enchant.js講座 #6

前回は”配列”と”繰り返し”を使って、敵キャラを複数表示させるプログラムを作りました。

しかし、敵キャラの位置が規則正しく並んでしまっていたので、ゲームっぽくランダムに出現させる”乱数”というテクニックを紹介します！

前回の記事

乱数を使って白クマをランダムに表示させる

前回は以下の書き方で配列と繰り返しを使って、白クマを出現させました。

        enemies = [];

        for (var i=0; i&lt;=20; i++) {
            //白クマくん
            enemies[i] = new Sprite(32, 32); 
            enemies[i].image = game.assets['chara1.gif']; 
            enemies[i].x=50+(i*10);
            enemies[i].y=20;
            enemies[i].frame=5;
            enemies[i].addEventListener('enterframe',function(){
                this.y++;});
            game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
        }

しかし、上のような書き方だと、クマがずらっと並んでしまうので、x座標y座標のセットを以下のように書き換えます。

            enemies[i].x=Math.random()*320;
            enemies[i].y=Math.random()*320;

実行すると以下のような結果になります。

（白クマの位置は毎回ランダム）

Math.random()という乱数を生成する命令を使っています。

これは、0以上1未満の間のランダムな数値を返すというものです。

ある時は0.3という数値になったり、ある時は0.8という数値になったりという感じです。

アスタリスクは掛け算という意味ですが、後ろに続く320という数値は、画面の幅や高さの値です。

例えば、乱数が0.3の時は、320*0.3=96となったり、乱数が0.8の時は、320*0.8=256となったりします。

つまり、ある時はx=96となったり、x=256となったり変化する為、白クマがバラバラな位置にセットされることになります。

白クマが画面上から出現するようにする

白クマが画面のどこかにランダムで配置されるようになりました。

次に、白クマが画面上からランダムに降ってくるように改造してみます。

以下のように修正して下さい。

            enemies[i].x=Math.random()*320;
            enemies[i].y=Math.random()*320 - 350;

enemies[i].yの値を-350するように修正しました。

マイナスする値は何でも良いですが、画面の高さが320なので、320以上マイナスにしておくと全ての白クマが画面より上に配置されることになります。

ランダムに出現するようになったことで、ゲーム性が出てきましたね！

完成コード

完成コードを用意したので、参考にして下さい！

enchant();
window.onload = function() {
    var game = new Game(320, 320);
    game.preload('chara1.gif'); // chara1.gifを読み込む
    game.onload = function() {

        bear = new Sprite(32, 32);
        bear.image = game.assets['chara1.gif'];
        game.rootScene.addChild(bear); //シーンに普通のクマを追加

        //rootSceneへのイベントは画面全体のイベントとなる
        game.rootScene.addEventListener('touchend', function(event) {
            bear.x = event.x; //event変数にタップされた座標が入る
            bear.y = event.y;
        });

        enemies = [];

        for (var i=0; i&lt;=20; i++) {
            //白クマくん
            enemies[i] = new Sprite(32, 32); 
            enemies[i].image = game.assets['chara1.gif']; 
            enemies[i].x=Math.random()*320;
            enemies[i].y=Math.random()*320 - 350;
            enemies[i].frame=5;
            enemies[i].addEventListener('enterframe',function(){
                this.y++;});
            game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
        }
    }
    game.start();
}