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!
実行結果