定番
新着
履歴

enchant.js ゲームやアプリ作りの入門

enchant.js ゲームやアプリ作りの入門

enchant.jsはJavaScriptベースでゲームなどが作れるフレームワークです。

まず、enchant.jsを読み込みます。

<script src="/js/enchant/enchant.js"></script>

本家サイトに記載されているサンプルを実行してみましょう。JavaScriptはこんな内容です。

    enchant(); // initialize
    var game = new Core(280, 280); // game stage
    game.preload('/js/enchant/images/chara1.png'); // preload image
    game.fps = 20;

    game.onload = function(){
        var bear = new Sprite(32, 32);
        bear.image = game.assets['/js/enchant/images/chara1.png'];
        game.rootScene.addChild(bear);
        bear.frame = [6, 6, 7, 7];   // select sprite frame
        
        bear.tl.moveBy(248, 0, 90)   // move right
            .scaleTo(-1, 1, 10)      // turn left
            .moveBy(-248, 0, 90)     // move left
            .scaleTo(1, 1, 10)       // turn right
            .loop();                 // loop it
    };

    game.start(); // start your game!

実行結果

くまさんが行き来しています。

次のサンプルは発展形

    enchant(); // initialize
    var game = new Core(280, 280);
    game.preload('/js/enchant/images/chara1.png', '/js/enchant/images/icon0.png'); // preload image
    game.fps = 20;

    game.onload = function(){
        var bear = new Sprite(32, 32);
        bear.image = game.assets['/js/enchant/images/chara1.png'];
        bear.frame = 5;
        game.rootScene.addChild(bear);

        // add event listener (called when click/touch started)
        game.rootScene.on('touchstart', function(evt){
            var apple = new Sprite(16, 16);     // generate new sprite
            apple.image = game.assets['/js/enchant/images/icon0.png']; // set image
            apple.moveTo(16, bear.y + 8);       // move to the position
            apple.tl.moveBy(280, 0, 30);        // set movement
            apple.frame = 15;                   // set image data
            game.rootScene.addChild(apple);     // add to canvas
        });

        // add event listener (called when click/touch moved)
        game.rootScene.on('touchmove', function(evt){
            bear.y = evt.localY;    // set position to touch-y position
        });
    };

    game.start(); // start your game!

実行結果

クリックすると弾が飛びます。ドラッグするとくまさんが移動します。一気にゲームらしくなりましたね。

次のサンプルはこちら

    enchant(); // initialize
    var game = new Core(320, 320);
    game.preload('/js/enchant/images/chara1.png', '/js/enchant/images/icon0.png'); // preload image
    game.fps = 20;

    game.onload = function(){
        // make new class for player
        var Player = enchant.Class.create(enchant.Sprite, {
            initialize: function(){
                enchant.Sprite.call(this, 32, 32);
                this.image = game.assets['/js/enchant/images/chara1.png'];
                this.frame = 5;                   // set image data
                game.rootScene.addChild(this);     // add to canvas
            }
        });

        // make new class for apple
        var Apple = enchant.Class.create(enchant.Sprite, {
            initialize: function(){
                enchant.Sprite.call(this, 16, 16);
                this.image = game.assets['/js/enchant/images/icon0.png']; // set image
                this.moveTo(16, player.y + 8);       // move to the position
                this.tl.moveBy(320, 0, 30);        // set movement
                this.frame = 15;                   // set image data
                game.rootScene.addChild(this);     // add to canvas
            }
        });

        // make new class for enemy
        var Enemy = enchant.Class.create(enchant.Sprite, {
            initialize: function(){
                enchant.Sprite.call(this, 32, 32);
                this.image = game.assets['/js/enchant/images/chara1.png']; // set image
                this.moveTo(320, Math.floor(Math.random() * 320)); // set position
                this.scaleX = -1;
                this.tl.moveBy(-360, 0, 160);      // set movement
                game.rootScene.addChild(this);     // canvas
            }
        });

        var player = new Player();

        // generate enemy every 60 frames
        game.rootScene.tl.then(function() {
            var enemy = new Enemy();
        }).delay(30).loop();                    // wait 60 frames and loop it!

        // add event listener (called when click/touch started)
        game.rootScene.on('touchstart', function(evt){
            player.y = evt.localY;    // set position to touch-y position
            var apple = new Apple();
        });

        // add event listener (called when click/touch moved)
        game.rootScene.on('touchmove', function(evt){
            player.y = evt.localY;    // set position to touch-y position
        });
    };

    game.start(); // start your game!

実行結果

右から敵のくまさんが登場します。白くまさんが歩いたりすれば右に進んでいるように見えますね。もうほぼシューティングゲームです。

次はこのシューティングにルールを追加して、当たり判定やゲームオーバーを追加します。

  enchant(); // initialize
    var game = new Core(320, 320);
    game.preload('/js/enchant/images/chara1.png', '/js/enchant/images/icon0.png'); // preload image
    game.fps = 20;

    game.onload = function(){
        // make new class for player
        var Player = enchant.Class.create(enchant.Sprite, {
            initialize: function(){
                enchant.Sprite.call(this, 32, 32);
                this.image = game.assets['/js/enchant/images/chara1.png'];
                this.frame = 5;                   // set image data
                game.rootScene.addChild(this);     // add to canvas
            }
        });

        // make new class for apple
        var Apple = enchant.Class.create(enchant.Sprite, {
            initialize: function(){
                enchant.Sprite.call(this, 16, 16);
                this.image = game.assets['/js/enchant/images/icon0.png']; // set image
                this.moveTo(16, player.y + 8);       // move to the position
                this.tl.moveBy(320, 0, 30);        // set movement
                this.frame = 15;                   // set image data
                game.rootScene.addChild(this);     // add to canvas
            }
        });

        // make new class for enemy
        var Enemy = enchant.Class.create(enchant.Sprite, {
            initialize: function(){
                enchant.Sprite.call(this, 32, 32);
                this.image = game.assets['/js/enchant/images/chara1.png']; // set image
                this.moveTo(320, Math.floor(Math.random() * 320)); // set position
                this.scaleX = -1;
                this.tl.moveBy(-360, 0, 160);      // set movement
                game.rootScene.addChild(this);     // canvas
            }
        });

        var player = new Player();

        // generate enemy every 60 frames
        game.rootScene.tl.then(function() {
            var enemy = new Enemy();
        }).delay(30).loop();                    // wait 60 frames and loop it!

        // add event listener (called when click/touch started)
        game.rootScene.on('touchstart', function(evt){
            player.y = evt.localY;    // set position to touch-y position
            var apple = new Apple();
        });

        // add event listener (called when click/touch moved)
        game.rootScene.on('touchmove', function(evt){
            player.y = evt.localY;    // set position to touch-y position
        });
        
        var score = 0;
        
        game.rootScene.on('enterframe', function(){
            var hits = Apple.intersect(Enemy);
            for(var i = 0, len = hits.length; i < len; i++){
                game.rootScene.removeChild(hits[i][0]);
                game.rootScene.removeChild(hits[i][1]);
                score ++;
            }
        });
        
        player.tl.delay(game.fps * 10).then(function(){
            alert('game over! score: ' + score);
            game.stop();
        });
    };

    game.start(); // start your game!

実行結果

2016-06-22 00:34:38
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top