このエントリーをはてなブックマークに追加
Facebook にシェア
[`evernote` not found]
LINEで送る

enchant.jsも慣れてきたのでゲームっぽいのを作ってみようかと思います。
使用する画像が増えたのでchara1.gifとchara3.gifとicon.gifをフォルダにコピーして使っています。


*上下に移動する敵を作る。

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
enchant();
window.onload = function() {
    var game = new Game(320, 320);
    game.preload('chara3.gif','chara1.gif');
 
         
    game.onload = function() {
        var player = new Sprite(32, 32);
        player.image = game.assets['chara3.gif'];
        player.frame = 12;
        player.x = 20;
        player.y = 80;
 
        var enemy = new Sprite(26, 24);    
        enemy.image = game.assets['chara1.gif'];
        enemy.x = 160;
        enemy.y = 50;
        spd=3;
        enemy.direction = 1*spd;       
        game.rootScene.addChild(player);
        game.rootScene.addChild(enemy);
         
        game.x =200;
        game.rootScene.addChild(enemy);
        var enemy2 = enemy;
        enemy2.x = 200;
        game.rootScene.addChild(enemy2);
         
        enemy.addEventListener('enterframe', function(e) {
                this.y += this.direction;
                if(this.y > 200){this.direction = -1*spd;}
                if(this.y < 30){this.direction = 1*spd;}
        });
    }
    game.start();
}

game.preload(‘chara3.gif’,’chara1.gif’);
今回は画像を２枚使うので、プレロードに２枚選択します。

enemy.addEventListener(‘enterframe’, function(e) {
this.y += this.direction;
if(this.y > 200){this.direction = -1*spd;}
if(this.y < 30){this.direction = 1*spd;} }); キャラクターが下にいったら方向を転換します。上に行ったときも転換します。 では上を参考に、敵部分の作成ルーチンを関数化して、複数の敵を出現させましょう。 *敵の作成を関数化して、複数の敵を制作する。 [php] enchant(); window.onload = function() { var game = new Game(320, 320); game.preload('chara3.gif','chara1.gif'); var enemys = []; //エネミーの初期設定 game.onload = function() { //プレイヤーキャラクターの設定 var player = new Sprite(32, 32); player.image = game.assets['chara3.gif']; player.frame = 12; player.x = 20; player.y = 80; game.rootScene.addChild(player); //エネミー作成関数 var create_enemy = function(e){ var enemy = new Sprite(26, 24); enemy.image = game.assets['chara1.gif']; var enemy_index = enemys.length - 1; //エネミーのインデックスを作成0～ enemy.x = 160 + enemy_index * 30; //エネミーのインデックスを基準に配置箇所を設定(X座標) enemy.y = 50 + enemy_index * 30; //エネミーのインデックスを基準に配置箇所を設定(Y座標) spd=enemy_index+1; //エネミーのスピードを場所に依って変動 enemy.direction = 1*spd; enemy.addEventListener('enterframe', function(e) { this.y += this.direction; if(this.y > 200){this.direction = -1*spd;} if(this.y < 30){this.direction = 1*spd;} }); return enemy; } for (var i = 0; i < 3; i++) { //エネミー表示準備。３匹作成する。 var enemy = create_enemy(); enemys.push(enemy); game.rootScene.addChild(enemy); } } game.start(); } [/php] 同じタイプのオブジェクトを複数配置する方法は 落ちてくるクマさんをぶっ飛ばすゲーム – enchant.jsの練習 @fkoji
このサイトのソースが参考になりました。

では次に弾を作成しましょう。弾はスペースキーで発射できて、右方向に画面端まで移動して、画面端に到達したら消滅します。
弾は最大３発まで表示するようにして、敵にあたった場合敵が消滅します。
また、弾は一度撃つと一定時間発射できないようにします。

*弾を作る。弾と敵が当たった場合は敵が消滅する。

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
74
75
76
77
78
79
enchant();
window.onload = function() {
    var game = new Game(320, 320);
    game.preload('chara3.gif','chara1.gif','icon.gif');
    var enemys = [];        //エネミーの初期設定
    var shots = [];         //弾の初期設定；
    var max_shot = 3; //弾の最大発射数
    var now_shot = 0;
    var shot_lag = 10; //一度打った後次の弾が撃てるようになるまでのフレーム数。
    var shot_frame = 0;
    game.keybind(32, 'space');      //キーバインドの設定
    game.onload = function() {
        //プレイヤーキャラクターの設定
        var player = new Sprite(32, 32);
        player.image = game.assets['chara3.gif'];
        player.frame = 12;
        player.x = 20;
        player.y = 80;
        game.rootScene.addChild(player);
 
        //エネミー作成関数
        var create_enemy = function(e){
            var enemy = new Sprite(26, 24);
            enemy.image = game.assets['chara1.gif'];
            var enemy_index = enemys.length - 1;    //エネミーのインデックスを作成0～
            enemy.x = 160 + enemy_index * 30;       //エネミーのインデックスを基準に配置箇所を設定(X座標)
            enemy.y = 50  + enemy_index * 30;       //エネミーのインデックスを基準に配置箇所を設定(Y座標)
            spd=enemy_index+1;                      //エネミーのスピードを場所に依って変動
            enemy.direction = 1*spd;
            enemy.addEventListener('enterframe', function(e) {
                this.y += this.direction;
                if(this.y > 200){this.direction = -1*spd;}
                if(this.y < 30){this.direction = 1*spd;}
            });
            return enemy;
        }
         
        //自分の弾を作成
        var craete_shot = function(e){
            var shot = new Sprite(16, 16);
            shot_frame = game.frame;
            now_shot++;
            shot.speed = 3;
            shot.x = player.x + 26;
            shot.y = player.y + 8;
            shot.image = game.assets['icon.gif'];
            shot.frame = 30;
            shot.addEventListener('enterframe', function(e) {
                this.x += shot.speed;
                if(this.x > 320){game.rootScene.removeChild(this);now_shot--;}
                 
                for (var i = 0; i < 3; i++) {
                    if(this.intersect(enemys[i])){
                        game.rootScene.removeChild(enemys[i]);
                    }
                }
            });
            return shot;
        }
         
         for (var i = 0; i < 3; i++) {
         //エネミー表示準備。３匹作成する。
            var enemy = create_enemy();
            enemys.push(enemy);
            game.rootScene.addChild(enemy);
        }
         
        game.addEventListener('spacebuttondown', function() {
            if(shot_frame + shot_lag < game.frame){
                if(max_shot > now_shot){
                    var shot = craete_shot();
                    game.rootScene.addChild(shot);
                }
            }
        });
 
    }
    game.start();
}

これにスコアと、敵を自動で増やすとゲームっぽくなりそうですね。