読者です 読者をやめる 読者になる 読者になる

凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

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

JavaScript HTML5

タッチイベント

第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
});

iPad などで preventDefault をしないで動作させると画面端でビヨーンと引っ張られるようなUIが動作してしまいます。

preventDefault するとこれがキャンセルされて動作しなくなります。
また、jQuery でタッチ系の取り方は、以下のサイトを参考にさせて頂きました。

これで完了!さっくり終わりますね。

たくさんタッチするとこんなんになります。

デモ


次回

次回が最終回で、何か弾幕を作ってみようと思います。