enchant.js: Step3 – タッチに反応させてみよう!
ここでは, タッチに反応させてみます. スプライトをタッチするとスプライトが消えます.
SAMPLE
サンプルはこちらで見るこができます.
CODE
ゲームインスタンスを取得
// ゲームインスタンスを取得 var game = Game.instance;
エレメントを削除
var scene = game.rootScene; // 自身を削除 scene.removeChild(this);
コード全体
前回のStepから追加, 修正した箇所は太字になっています.
// enchant 初期化(global 領域に enchant を追加) enchant(); /** * ロード */ window.onload = function() { // ゲームクラスを生成 var game = new Game(320, 320); game.onload = function(){ // エネミーを生成 for (var i=0; i<8; ++i) { var enemy = new EnemySprite(); enemy.x = Math.random()*320; enemy.y = Math.random()*320; game.rootScene.addChild(enemy); } } // 背景表示 game.rootScene.backgroundColor = 'rgb(240, 255, 255)'; game.start(); } /** * @scope ArcSprite.prototype */ var ArcSprite = Class.create(Sprite, { /** * 円弧スプライトクラス * @memo enchant の Sprite クラスを継承 */ initialize : function(radius){ // 親のコンストラクタを呼び出す Sprite.call(this, radius*2, radius*2); // サーフィスを生成 var surface = new Surface(radius*2, radius*2); var c = surface.context // サーフィスに円を描画 c.fillStyle = "rgb(255, 0, 0)"; c.beginPath(); c.arc(radius, radius, radius, 0, Math.PI*2, true); c.fill(); // スプライトにサーフィスをイメージとして登録 this.image = surface; } }); /** * @scope EnemySprite.prototype */ var EnemySprite = Class.create(ArcSprite, { /** * エネミースプライトクラス */ initialize : function(){ // 親のコンストラクタを呼び出す ArcSprite.call(this, EnemySprite.RADIUS); // タッチイベントを登録 this.addEventListener(Event.TOUCH_START, this.onTouch); // フレームイベントを登録 this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame); // 移動する向きを設定(360度ランダムな方向に ENEMY_SPEED ずつ進む) var rad = Math.random()*360 * Math.PI/180; this.vx = Math.cos(rad) * EnemySprite.SPEED; this.vy =-Math.sin(rad) * EnemySprite.SPEED; // エフェクトと重複した際にタッチがきかなくなるので手前に表示するよう修正 this._element.style.zIndex = 4; }, onTouch : function(e){ // ゲームインスタンスを取得 var game = Game.instance; var scene = game.rootScene; // 自身を削除 scene.removeChild(this); // 新たな敵を生成 var enemy = new EnemySprite(); enemy.x = Math.random()*320; enemy.y = Math.random()*320; scene.addChild(enemy); }, onEnterFrame : function(){ var scene = this.parentNode; // 移動 this.moveBy(this.vx, this.vy); // スプライトの上下左右位置 var left = this.x; var right = this.x + this.width; var top = this.y; var bottom = this.y + this.height; // はみ出た際の処理 if (left < 0) { this.x = 0; this.vx*=-1; } if (top < 0) { this.y = 0; this.vy*=-1; } if (right > scene.width) { this.x = scene.width -this.width; this.vx*=-1; } if (bottom > scene.height){ this.y = scene.height-this.height; this.vy*=-1; } } }); // static EnemySprite.RADIUS = 16; EnemySprite.SPEED = 2;