gamepad API sample ( for webkit only )

gamepad.js

(function() {
	var pointerMatrix = [
		[1,3,5,7,9,11,13,15,17,19,21,23],
		[49,51,53,55,57,59,61,63,65,67,69,71],
		[97,99,101,103,105,107,109,111,113,115,117],
		[145,147,149,151,153,155,157,159,161,163,165],
		[193,195,197,199,201,203,205,207,209,211,213],
		[241,243,245,247,249,251,253,255,257,259,261]
	];
	var rubMap = {
		107: '＜', 109: '＜', 111: '＜', 113: '＜', 115: '＜',
		155: '＜', 157: '＜', 159: '＜', 161: '＜', 163: '＜',
		203: '＜', 205: '＜', 207: '＜', 209: '＜', 211: '＜',
		251: '＞', 253: '＞', 255: '＞', 257: '＞', 259: '＞'
	};
	var rubData = {
		107: 'が', 109: 'ぎ', 111: 'ぐ', 113: 'げ', 115: 'ご',
		155: 'ざ', 157: 'じ', 159: 'ず', 161: 'ぜ', 163: 'ぞ',
		203: 'ば', 205: 'び', 207: 'ぶ', 209: 'べ', 211: 'ぼ',
		251: 'ぱ', 253: 'ぴ', 255: 'ぷ', 257: 'ぺ', 259: 'ぽ'
	};
	var doc = document;
	var C;
	
	var audio = new Audio();
	var se    = new Audio();
	var canPlay = false;
	
	audio.addEventListener('canplay', function() {
		canPlay = true;
		audio.loop = true;
		audio.play();
	}, false);
	
	audio.src = './dq2-lovesong.mp3';
	audio.addEventListener('ended', function() {
		audio.currentTime = 0;
	}, false);
	
	se.src = './cursor.mp3';
	se.addEventListener('ended', function() {
		se.currentTime = 0;
	}, false);
	
	function Controller() {
		this.x = 0;
		this.y = 0;
		this.w = 1;
		this.locked = false;
		this.lastTimeStamp = 0;
		this.InputThredshold = 100;
		this.currentNode = doc.querySelector('span[data-pointer="' + pointerMatrix[this.y][this.x] + '"]');
		this.currentInput = doc.querySelector('span[data-wid="' + this.w + '"]');
		
		this.currentNode.firstChild.nodeValue = '｝';
		this.currentInput.setAttribute('data-tmp', this.currentInput.firstChild.nodeValue);
		this.currentInput.firstChild.nodeValue = '＊';
	}
	
	Controller.start = function() {
		C = new Controller();
	};
	
	Controller.prototype = {
		up: function() {
			if ( ! pointerMatrix[this.y - 1] ) {
				return;
			}
			
			if ( ! pointerMatrix[this.y - 1][this.x] ) {
				this.setCursor(-1, -1);
			} else {
				this.setCursor(0, -1);
			}
		},
		down: function() {
			if ( ! pointerMatrix[this.y + 1] ) {
				return;
			}
			
			if ( ! pointerMatrix[this.y + 1][this.x] ) {
				this.setCursor(-1, 1);
			} else {
				this.setCursor(0, 1);
			}
		},
		left: function() {
			if ( ! pointerMatrix[this.y][this.x - 1] ) {
				return;
			}
			this.setCursor(-1, 0);
		},
		right: function() {
			if ( ! pointerMatrix[this.y][this.x + 1] ) {
				return;
			}
			this.setCursor(1, 0);
		},
		setCursor : function(x, y) {
			var n;
			
			this.y += y;
			this.x += x;
			
			n = doc.querySelector('span[data-pointer="' + pointerMatrix[this.y][this.x] + '"]');
			n.firstChild.nodeValue = '｝';
			

			this.currentNode.firstChild.nodeValue = '　';
			this.currentNode = n;
		},
		input: function() {
			var act = this.currentNode.getAttribute('data-action');
			var p   = this.currentNode.getAttribute('data-pointer');
			var r;
			
			se.play();
			
			if ( act && this[act] ) {
				return this[act]();
			}
			
			this.currentInput.setAttribute('data-tmp', this.currentNode.nextElementSibling.firstChild.nodeValue);
			if ( p in rubMap ) {
				r = doc.querySelector('span[data-block="' + (this.currentInput.getAttribute('data-block') - 20) + '"]');
				r.firstChild.nodeValue = rubMap[p];
				r.setAttribute('data-rub', p);
			}
			this.forward();
		},
		back: function() {
			if ( ! doc.querySelector('span[data-wid="' + (this.w - 1) + '"]') ) {
				return;
			}
			this.currentInput.firstChild.nodeValue = this.currentInput.getAttribute('data-tmp');
			this.currentInput = doc.querySelector('span[data-wid="' + --this.w + '"]');
			this.currentInput.setAttribute('data-tmp', this.currentInput.firstChild.nodeValue);
			this.currentInput.firstChild.nodeValue = '＊';
		},
		forward: function() {
			if ( ! doc.querySelector('span[data-wid="' + (this.w + 1) + '"]') ) {
				return;
			}
			this.currentInput.firstChild.nodeValue = this.currentInput.getAttribute('data-tmp');
			this.currentInput = doc.querySelector('span[data-wid="' + ++this.w + '"]');
			this.currentInput.setAttribute('data-tmp', this.currentInput.firstChild.nodeValue);
			this.currentInput.firstChild.nodeValue = '＊';
		},
		erase: function() {
			var r;
			
			this.currentInput.setAttribute('data-tmp', '　');
			r = doc.querySelector('span[data-block="' + (this.currentInput.getAttribute('data-block') - 20) + '"]');
			r.firstChild.nodeValue = '　';
			r.removeAttribute('data-rub');
			this.back();
		},
		end: function() {
			var inputs = doc.querySelectorAll('span[data-wid]'),
			    ind    = -1,
			    di     = -1,
			    data   = [],
			    rub;
			    
			while( inputs[++ind] ) {
				rub = doc.querySelector('span[data-block="' + (inputs[ind].getAttribute('data-block') - 20) + '"]');
				if ( rub.getAttribute('data-rub') in rubData ) {
					data[++di] = rubData[rub.getAttribute('data-rub')];
				} else if ( inputs[ind].getAttribute('data-tmp')
				            && inputs[ind].getAttribute('data-tmp') !== '　' ) {
					data[++di] = inputs[ind].getAttribute('data-tmp');
				}
			}
			
			if ( data.join('') === 'ざおりく' ) {
				createNotification();
			}
			
		},
		gamepadControl: function(gamepad) {
			var t = (new Date()).getTime();
			
			if ( t - this.lastTimeStamp > this.InputThredshold ) {
				
				if ( doc.getElementById('kanchigai') ) {
					if ( gamepad.buttons[1] > 0 ) {
						doc.getElementById('kanchigai').style.display = 'none';
					}
					if ( C.locked === false ) {
						setTimeout(function() {
							doc.body.removeChild(doc.getElementById('kanchigai'));
							C.locked = false;
						}, 2000);
						C.locked = true;
					}
					return;
				}
				
				if ( gamepad.axes[0] === -1 ) {
					this.left();
				} else if ( gamepad.axes[0] === 1 ) {
					this.right();
				} else if ( gamepad.axes[1] === -1 ) {
					this.up();
				} else if ( gamepad.axes[1] === 1 ) {
					this.down();
				}
				
				if ( gamepad.buttons[1] > 0 ) {
					this.input();
				} else if ( gamepad.buttons[2] > 0 ) {
					this.erase();
				}
				this.lastTimeStamp = t;
			}
		}
		
	};
	
	window.Controller = Controller;
	
	function createNotification() {
		var d = doc.createElement('div'),
		    html;
		
		html = [
		  '＆＃＃＃＃＃＃＃＃＃＃＃＃＃’<br>',
		  '”　　　　＜　　　　　　　　＄<br>',
		  '”　かんちかい　しています　＄<br>',
		  '”　　　　　　　　　　　　　＄<br>',
		  '）％％％％％％％％％％％％％（<br>'
		];
		
		d.id = 'kanchigai';
		d.innerHTML = html.join('');
		d.style.top = window.innerHeight / 4 + 80 + 'px';
		doc.body.appendChild(d);
	}
	
	function loop() {
		var gamepad = navigator.webkitGetGamepads(),
			i = 0;
			
		for ( ; i < 4; ++i ) {
			if ( ! gamepad[i]) {
				continue;
			}
			C.gamepadControl(gamepad[i]);
			break;
		}
		
		webkitRequestAnimationFrame(loop);
	}
	
	doc.addEventListener('DOMContentLoaded', function() {
		var b = document.getElementById('sound');
		
		b.addEventListener('click', function() {
			if ( ! canPlay ) {
				return;
			}
			( audio.paused ) ? audio.play() : audio.pause();
		}, false);
		
		Controller.start();
		loop();
	}, false);
})();