(ゲームイメージ)

別窓表示

自分の環境に持ってくる

  1. enchant.js HPで Live Sample(Shooting) * URL として公開されているプログラムをコピーします。といっても、code.9leap.net にコピー&ペーストするのは、<script>〜</script>の中だけです。
  2. おそらくこれまでのenchant.jsを使ったコードは全て window.onload = function(){ }; という大枠のなかで書いていたと思います。ですので、今回もその形式に合わせていこうと思います。ちなみに今回コピー元にはこの部分がないのは…理屈はまあいいです。
    • 理屈の有無に関わらず、jsファイルの中に書いたほうがすっきりすると思います。
    • 1行目「enchant();」の次の行に「window.onload = function(){」を、
    • 80行目あたりの「game.start(); // start your game!」の次の行に「};」を
    • それぞれ加えます
  3. 画像のリソースを追加します。「Add Resource」ボタンから「chara1.png」と「icon0.png」を読み込みます
  4. この時点で一回「Run」を押して、enchant.jsのHPのものと同じ状態になっているか、確認します
  5. 問題なければ「Finish」ボタンを押して、一回終了します

(コピーするソースコード *enchant.jsサイトより引用, 一部コメント追加)

enchant(); // initialize
// main.jsにコピーする場合、次の行のコメントを外す(//を消す)
// window.onload = function(){
var game = new Core(320, 320);
game.preload('chara1.png', '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['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['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['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!

// main.jsにコピーする場合、次の行のコメントを外す(//を消す)
//};