Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
160 lines (140 sloc) 3.67 KB
<html>
<head>
<title></title>
<script type="text/javascript" src="gamepad.js"></script>
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
body {
background: #999;
}
section {
position:absolute;
border-width: 1px;
border-style: solid;
}
#cursor {
z-index: 2;
width: 60px;
height : 60px;
font-size: 20px;
line-height: 60px;
text-align: center;
color: red;
font-weight: bold;
opacity: 0.4;
border-color: red;
}
#work {
width: 500;
height: 400;
border-color: black;
background: #F0F0F0;
}
#info {
right : 10px;
top:10px;
padding: 10px;
font-family: verdana;
background: white;
line-height: 12px;
}
</style>
</head>
<body>
<section id="info">
<p>X: <span class="x">0</span></p>
<!--p>Y: <span class="y">0</span></p>
<p>Z: <span class="z">0</span></p-->
</section>
<section id="cursor">+</section>
<section id="work"></section>
<script type="text/javascript">
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
}
var
cursor = document.getElementById('cursor'),
w = 500,
h = 400,
pos = {
x : 0,
y : 0,
z : 0
},
info = {
x : document.getElementsByClassName('x')[0],
y : document.getElementsByClassName('y')[0],
z : document.getElementsByClassName('z')[0],
},
ppos,
changed = false,
padIndex = null,
socket = io.connect(window.location.protocol + '//' +
window.location.hostname + ':' +
window.location.port);
toNormal = function() {
return {
x : new Number(pos.x).toFixed(4),
y : new Number(pos.y).toFixed(4),
spindle : pos.spindle
}
},
update = function() {
window.requestAnimationFrame(update);
cursor.style.left = pos.x*10;
cursor.style.top = pos.y*10;
var n = toNormal();
info.x.innerHTML = n.x;
var pads = Gamepad.getStates();
if (!padIndex) {
for (var i = 0; i<pads.length; i++) {
if(pads[i] && pads[i].name.indexOf('Logitech') > -1) {
console.log(pads[i]);
console.log('found!')
padIndex = i;
break;
}
}
// stop short
if (!padIndex) { return; }
ppos = JSON.parse(JSON.stringify(pads[padIndex]));
}
var x = pos.x, y = pos.y, spindle = pos.spindle;
if (Math.abs(pads[padIndex].leftStickX) > .2) {
x -= pads[padIndex].leftStickX * 20;
if (x > 400) { x = 400; }
if (x < 0 || isNaN(x)) { x = 0; }
}
if (Math.abs(pads[padIndex].leftStickY) > .2) {
y -= pads[padIndex].leftStickY * 20;
if (y > 170) { y = 170; }
if (y < 0) { y = 0; }
}
if (pads[padIndex].faceButton0) {
spindle = true;
} else {
spindle = false;
}
changed = changed || (!(x === pos.x && y === pos.y && spindle === pos.spindle));
pos.x = x;
pos.y = y;
pos.spindle = spindle;
};
setInterval(function() {
if (changed) {
socket.emit('movement', toNormal());
changed = false;
}
}, 200);
update();
</script>
</body>
</html>
Something went wrong with that request. Please try again.