geotheory · February 21, 2021 22:17
diff --git a/mouse-and-touch-gestures.html b/mouse-and-touch-gestures.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script> -->
 </head>
 <body>
 <div id="game-area"></div>
 <h1 style="left: 20px; top: 20px; position:absolute;">Mouse</h1>
 <h1 id = 'mouse-report' style="left: 20px; top: 100px; position:absolute;">mouse report</h1>
 <h1 style="left: 400px; top: 20px; position:absolute;">Touch</h1>
 <h1 id = 'touch-report' style="left: 400px; top: 100px; position:absolute;">touch report</h1>

 <script>

 var config = {
    parent: 'game-area', type: Phaser.AUTO, width: 800, height: 600,
    backgroundColor: '#aaa', scene: { create: create, update: update }
 }

 var player;

 function create () {
    var light_wall_graphics = this.add.graphics({ fillStyle: { color: 0xffff00 } });
    player = new Phaser.Geom.Rectangle( 400, 300, 50, 50 );
    player = light_wall_graphics.fillRectShape(player);
 }

 function update () {

    if ( Math.abs(d.x) > 10 ) {
        player.x += Math.sign(d.x) * 10;
        d = {x: 0, y: 0 };  // reset
    }

    if ( Math.abs(d.y) > 10 ) {
        player.y += Math.sign(d.y) * 10;
        d = {x: 0, y: 0 };
    }
 }

 var game = new Phaser.Game(config, 'game-area');

 var p = { x: 0, y: 0 },
    d = { x: 0, y: 0 },
    mouse_down = false,
    target = document.getElementById('game-area'),
    mouse_report = document.getElementById('mouse-report'),
    touch_report = document.getElementById('touch-report');

 document.body.addEventListener('mousedown',function(e){ mouse_down = true;})
 document.body.addEventListener('mouseup',function(e){ mouse_down = false;})

 function gesture(x, y){
    d.x += x - p.x;
    d.y += y - p.y;
    p.x = x;
    p.y = y;
 }

 document.body.addEventListener('mousemove',function(e){
    if(mouse_down){
        gesture(e.x, e.y);
        mouse_report.innerText = d.x + ' ' + d.y;
    }
 })

 document.body.addEventListener('touchmove',function(e){
    var touch = e.touches[0];
    gesture(touch.pageX, touch.pageY);
    touch_report.innerText = d.x + ' ' + d.y;
 })

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script> -->
	</head>
	<body>
	<div id="game-area"></div>
	<h1 style="left: 20px; top: 20px; position:absolute;">Mouse</h1>
	<h1 id = 'mouse-report' style="left: 20px; top: 100px; position:absolute;">mouse report</h1>
	<h1 style="left: 400px; top: 20px; position:absolute;">Touch</h1>
	<h1 id = 'touch-report' style="left: 400px; top: 100px; position:absolute;">touch report</h1>

	<script>

	var config = {
	parent: 'game-area', type: Phaser.AUTO, width: 800, height: 600,
	backgroundColor: '#aaa', scene: { create: create, update: update }
	}

	var player;

	function create () {
	var light_wall_graphics = this.add.graphics({ fillStyle: { color: 0xffff00 } });
	player = new Phaser.Geom.Rectangle( 400, 300, 50, 50 );
	player = light_wall_graphics.fillRectShape(player);
	}

	function update () {

	if ( Math.abs(d.x) > 10 ) {
	player.x += Math.sign(d.x) * 10;
	d = {x: 0, y: 0 }; // reset
	}

	if ( Math.abs(d.y) > 10 ) {
	player.y += Math.sign(d.y) * 10;
	d = {x: 0, y: 0 };
	}
	}

	var game = new Phaser.Game(config, 'game-area');

	var p = { x: 0, y: 0 },
	d = { x: 0, y: 0 },
	mouse_down = false,
	target = document.getElementById('game-area'),
	mouse_report = document.getElementById('mouse-report'),
	touch_report = document.getElementById('touch-report');

	document.body.addEventListener('mousedown',function(e){ mouse_down = true;})
	document.body.addEventListener('mouseup',function(e){ mouse_down = false;})

	function gesture(x, y){
	d.x += x - p.x;
	d.y += y - p.y;
	p.x = x;
	p.y = y;
	}

	document.body.addEventListener('mousemove',function(e){
	if(mouse_down){
	gesture(e.x, e.y);
	mouse_report.innerText = d.x + ' ' + d.y;
	}
	})

	document.body.addEventListener('touchmove',function(e){
	var touch = e.touches[0];
	gesture(touch.pageX, touch.pageY);
	touch_report.innerText = d.x + ' ' + d.y;
	})

	</script>
	</body>
	</html>