enchant.jsで
touchで線を描くとそこの上をオブジェクトが移動する、
ということを実現したいです。
1本指でなら成功するのですが、
2本以上の指になるとすべて同じ線と認識され、
オブジェクトが異なる線を移動してしまい、うまくいかなくなります。
2本指以上は線を描写しないようにするのが一番早いかな、と思いましたが、
enchant.Event
配下にもそのようなイベントがなく、やり方がわかりません。
2本指以上を認識する方法について、どなたかわかる方がいれば教えてください。
コードは必要部分のみ抜粋しています。
宜しくお願いします。
enchant();
window.onload = function() {
game = new Game(STAGE_WIDTH, STAGE_HEIGHT);
game.fps = FRAME;
game.preload(
CHARA_0_IMG
);
game.rootScene.backgroundColor = "white";
game.onload = function() {
var scene = new GamePlayScene();
// touch start
game.rootScene.on('touchstart', function(e){
drawFlg = true;
});
// touch move
game.rootScene.on('touchmove', function(e){
if (drawFlg === true) { // 描写できるとき
createCircle(e.x, e.y);
}
});
// touch end
game.rootScene.on('touchend', function(e){
drawFlg = false;
// 描写数のメモ
drawNo++;
});
}
game.start();
}
// 円の描写
function createCircle(x, y) {
var ball = new Sprite(10, 10);
var texture = new Surface(10, 10);
var context = texture.context;
context.fillStyle = "green";
context.strokeStyle = "green";
context.lineWidth = 2;
context.arc(5, 5, 4, 0, Math.PI * 2, false);
context.fill();
context.stroke();
ball.image = texture;
ball.moveBy(x, y);
ball.destroy = false;
game.rootScene.addChild(ball);
if (!circleList[drawNo]) {
circleList[drawNo] = [];
}
circleList[drawNo].push(ball);
drawList[drawNo] = false;
ball.addEventListener(Event.ENTER_FRAME, function() {
if (ball.destroy === true) {
game.rootScene.removeChild(ball);
}
});
}