libro
www.tuyano.com
初心者のためのenchant.jsゲームプログラミング入門

たくさんのキャラクタを操作しよう (3/3)

作成:2012-09-30 15:53
更新:2012-09-30 15:53

■敵キャラから逃げまわるミニゲーム！

では、接触判定を使って、実際に簡単なゲームを作ってみましょう。ここで作るのは、先に作った２つのサンプルを合体させたようなものです。

３×３の自キャラと、３個の敵キャラが現れます。敵キャラはランダムな方向に動き続けます。それに当たらないように９個の自キャラをうまく避け続けて下さい。自キャラは、矢印キーですべて一斉に上下左右へと動きます。

ここでは、それぞれのキャラクタのSpriteに以下のようにイベント設定をしています。以下に整理しておきましょう。

●自キャラのSprite
game.inputのup/down/left/rightの値をチェックし、上下左右に移動します。その後、繰り返しを使い、敵キャラすべてについてwithinで衝突判定を行います。もし結果がtrueならば（つまり接触しているなら）、自身をシーンから取り除きます。そしてシーンに組み込まれているSpriteが敵キャラの３個だけになったらゲームを終了します。

・シーンからSpriteを取り除くには？
ここでは、シーンはgame.rootSceneを利用していますね。シーンはSceneオブジェクトというもので管理されています。このSceneにaddChildで組み込んだオブジェクトを取り除くには、「removeChild」メソッドを使います。
《Scene》.removeChild(《Sprite》);
Sceneは、game.rootSceneを直接指定してもいいのですが、thisの「parentNode」を参照することで、thisが組み込まれているオブジェクトを得ることができます。ここからremoveChildでthisを削除すればいいわけです。

・シーンに組み込まれているSpriteの数は？
これは、シーンにaddChildで組み込まれているオブジェクトを「childNodes」というプロパティで管理しています。このプロパティではコレクションのオブジェクトが設定されており、そこに組み込まれているオブジェクト数は「length」プロパティで得ることができます。

●敵キャラのSprite
自身にあるcounterプロパティの値を１減らし、ゼロ以下になっていたら、counterとdx/dyの値を再設定します。

それから、自身のx/yの値にdx/dyの値を足し、新しい位置に設定します。その位置がゼロ未満だったり右端下端から切れて表示されるようだったりしたら、dx/dyの値に-1をかけてプラスマイナスを反転させています。


――ざっと、この程度の処理を実装するだけで、ごく単純なゲームの骨格ぐらいはできるようになりました。サンプルを書き換えていろいろ応用作品を考えてみると面白いでしょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

*program list*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
enchant();
var char_arr = new Array(new Array(),new Array(),new Array());
var enemy_arr = new Array();
 
window.onload = function(){
    var game = new Game(1000, 700);
    game.preload("character.png", "enemy.png");
    game.fps = 20;
    game.rootScene.backgroundColor = "#ffaaaa";
     
    game.onload = function(){
     
    // 敵キャラ
        for(var i = 0;i < 3;i++){
            var enemy = new Sprite(50, 50);
            enemy.image = game.assets["enemy.png"];
            enemy.x = game.width - 50;
            enemy.y = game.height - 50;
            enemy.counter = Math.floor(Math.random() * 100) + 100;
            enemy.dx = Math.floor(Math.random() * 10);
            enemy.dy = Math.floor(Math.random() * 10);
            enemy.addEventListener(enchant.Event.ENTER_FRAME, function(){
                this.counter--;
                if (this.counter <= 0){
                    this.counter = Math.floor(Math.random() * 100) + 100;
                    this.dx = Math.floor(Math.random() * 10);
                    this.dy = Math.floor(Math.random() * 10);
                }
                this.x += this.dx;
                this.y += this.dy;
                if (this.x < 0 || this.x > game.width - 50){
                    this.dx *= -1;
                }
                if (this.y < 0 || this.y > game.height - 50){
                    this.dy *= -1;
                }
            });
            game.rootScene.addChild(enemy);
            enemy_arr[i] = enemy;
        }
         
        //操作するキャラ
        for(var i = 0;i < 3;i++){
            for(var j = 0;j < 3;j++){
                var char1 = new Sprite(100, 100);
                char1.image = game.assets["character.png"];
                char1.x = i * 100;
                char1.y = j * 100;
                char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
                    this.frame = this.age % 2;
                    if (game.input.up){ this.moveBy(0, -5); }
                    if (game.input.down){ this.moveBy(0, 5); }
                    if (game.input.left){ this.moveBy(-5, 0); }
                    if (game.input.right){ this.moveBy(5, 0); }
                    for(var i = 0;i < 3;i++){
                        if (this.within(enemy_arr[i],50)){
                            var parent = this.parentNode;
                            parent.removeChild(this);
                            if (parent.childNodes.length == 3){
                                game.stop();
                                alert("GAME OVER");
                            }
                        }
                    }
                });
                game.rootScene.addChild(char1);
                char_arr[i][j] = char1;
            }
        }
    };
 
    game.start();
};
※関連コンテンツ

「初心者のためのenchant.jsゲームプログラミング入門」に戻る