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