HTML5-JavaScript-Gamepad-Controller-Library/index.html at master · kallaspriit/HTML5-JavaScript-Gamepad-Controller-Library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
	<title>GamePad Library Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="gamepad.js"></script>
</head>
<body>
	<ul id="gamepads"></ul>
	<p id="connect-notice">Connect your controller and press any button.</p>
	<script>

	$(document).ready(function() {
		// Attach it to the window so it can be inspected at the console.
		window.gamepad = new Gamepad();

		gamepad.bind(Gamepad.Event.CONNECTED, function(device) {
			console.log('Connected', device);

			$('#gamepads').append('<li id="gamepad-' + device.index + '"><h1>Gamepad #' + device.index + ': &quot;' + device.id + '&quot;</h1></li>');

			var mainWrap = $('#gamepad-' + device.index),
				statesWrap,
				logWrap,
				control,
				value,
				i;

			mainWrap.append('<strong>State</strong><ul id="states-' + device.index + '"></ul>');
			mainWrap.append('<strong>Events</strong><ul id="log-' + device.index + '"></ul>');

			statesWrap = $('#states-' + device.index)
			logWrap = $('#log-' + device.index)

			for (control in device.state) {
				value = device.state[control];

				statesWrap.append('<li>' + control + ': <span id="state-' + device.index + '-' + control + '">' + value + '</span></li>');
			}
			for (i = 0; i < device.buttons.length; i++) {
				value = device.buttons[i];
				statesWrap.append('<li>Raw Button ' + i + ': <span id="button-' + device.index + '-' + i + '">' + value + '</span></li>');
			}
			for (i = 0; i < device.axes.length; i++) {
				value = device.axes[i];
				statesWrap.append('<li>Raw Axis ' + i + ': <span id="axis-' + device.index + '-' + i + '">' + value + '</span></li>');
			}

			$('#connect-notice').hide();
		});

		gamepad.bind(Gamepad.Event.DISCONNECTED, function(device) {
			console.log('Disconnected', device);

			$('#gamepad-' + device.index).remove();

			if (gamepad.count() == 0) {
				$('#connect-notice').show();
			}
		});

		gamepad.bind(Gamepad.Event.TICK, function(gamepads) {
			var gamepad,
				wrap,
				control,
				value,
				i,
				j;

			for (i = 0; i < gamepads.length; i++) {
				gamepad = gamepads[i];
				wrap = $('#gamepad-' + i);

				if (gamepad) {
					for (control in gamepad.state) {
						value = gamepad.state[control];

						$('#state-' + gamepad.index + '-' + control + '').html(value);
					}
					for (j = 0; j < gamepad.buttons.length; j++) {
						value = gamepad.buttons[j];

						$('#button-' + gamepad.index + '-' + j + '').html(value);
					}
					for (j = 0; j < gamepad.axes.length; j++) {
						value = gamepad.axes[j];

						$('#axis-' + gamepad.index + '-' + j + '').html(value);
					}
				}
			}
		});

		gamepad.bind(Gamepad.Event.BUTTON_DOWN, function(e) {
			$('#log-' + e.gamepad.index).append('<li>' + e.control + ' down</li>');
		});

		gamepad.bind(Gamepad.Event.BUTTON_UP, function(e) {
			$('#log-' + e.gamepad.index).append('<li>' + e.control + ' up</li>');
		});

		gamepad.bind(Gamepad.Event.AXIS_CHANGED, function(e) {
			$('#log-' + e.gamepad.index).append('<li>' + e.axis + ' changed to ' + e.value + '</li>');
		});

		if (!gamepad.init()) {
			alert('Your browser does not support gamepads, get the latest Google Chrome or Firefox.');
		}
	});

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