Skip to content

Instantly share code, notes, and snippets.

@ysugimoto
Created Feb 16, 2013
Embed
What would you like to do?
gamepad API sample ( for webkit only )
(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);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment