Canvas を使ってみんなもお手軽に弾幕作ろうぜ！！ - 其の肆 -

はじめに

とやってきて第4回目になります。今回はマルチタッチの実装をしたいと思います。

タッチイベント

第3回までの内容にタッチを盛り込むには以下のコードを書けばOKです。

var Touch = {
	start : function(e) {
		var touches = e.originalEvent.targetTouches;
		if (touches.length > Players.array.length) {
			var touch = touches[touches.length-1];
			var pos = Canvas.calcPosFromPageXY(touch.pageX, touch.pageY);
			Players.add(new Player({x: pos.x, y: pos.y}));
		}
	},
	move  : function(e) {
		e.preventDefault();
		if (Players.array.length === 0) return;

		var touches = e.originalEvent.targetTouches;
		for (var i = 0; i < Players.array.length; ++i) {
			if (touches.length < i) break;
			var player = Players.array[i];
			var touch = touches[i];
			var pos = Canvas.calcPosFromPageXY(touch.pageX, touch.pageY);
			player.x = pos.x;
			player.y = pos.y;
		}
	}
};

$('#canvas').bind({
	mousedown  : Mouse.down,
	mousemove  : Mouse.move,
	touchstart : Touch.start,
	touchmove  : Touch.move
});