14-pointer-look.html
<!DOCTYPE html>
<html>
<head>
<title>Non-PointerLock vs PointerLock</title>
<script src="../frameworks/jquery-2.0.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td style="text-align: center;font-weight: bold;font-size: large;">
Sin usar el API de bloqueo del ratón
</td>
<td style="text-align: center;font-weight: bold;font-size: large;">
Usando el API de bloqueo del ratón
</td>
</tr>
<tr>
<td>
<canvas id="noPointerLock" width="400" height="400" style="background: #101039; cursor: none;"></canvas>
</td>
<td>
<canvas id="pointerLock" width="400" height="400" style="background: #101039;"></canvas>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
setupPointerLock();
setupNoPointerLock()
})
function setupPointerLock() {
document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
$("#pointerLock").click(function () {
var canvas = $("#pointerLock").get()[0];
canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock ||
canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
});
}
function changeCallback(e) {
var canvas = $("#pointerLock").get()[0];
if (document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas ||
document.webkitPointerLockElement === canvas) {
document.addEventListener("mousemove", moveCallback, false);
} else {
document.removeEventListener("mousemove", moveCallback, false);
entryCoordinates = {x:-1, y:-1};
}
};
var entryCoordinates = {x:-1, y:-1};
function moveCallback(e) {
var canvas = $("#pointerLock").get()[0];
var ctx = canvas.getContext('2d');
if (entryCoordinates.x == -1) {
entryCoordinates = getPosition(canvas, e);
}
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0;
var movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0;
entryCoordinates.x = entryCoordinates.x + movementX;
entryCoordinates.y = entryCoordinates.y + movementY;
if (entryCoordinates.x > $('#pointerLock').width() -65) {
entryCoordinates.x = $('#pointerLock').width()-65;
} else if (entryCoordinates.x < 0) {
entryCoordinates.x = 0;
}
if (entryCoordinates.y > $('#pointerLock').height() - 85) {
entryCoordinates.y = $('#pointerLock').height() - 85;
} else if (entryCoordinates.y < 0) {
entryCoordinates.y = 0;
}
var direction = 0;
if (movementX > 0) {
direction = 1;
} else if (movementX < 0) {
direction = -1;
}
ctx.clearRect(0,0,400,400);
generateStars(ctx);
showShip(entryCoordinates.x, entryCoordinates.y, direction,ctx);
}
function setupNoPointerLock() {
var canvas2 = $("#noPointerLock").get()[0];
var context2 = canvas2.getContext('2d');
var entryCoordinates2 = {x:-1,y:-1};
canvas2.addEventListener('mousemove', function(evt) {
if (entryCoordinates2.x == -1) {
entryCoordinates2 = getPosition(canvas2,evt);
}
var newPos = getPosition(canvas2, evt);
movementX = newPos.x - entryCoordinates2.x;
var direction = 0;
if (movementX > 0) {
direction = 1;
} else if (movementX < 0) {
direction = -1;
}
context2.clearRect(0,0,400,400);
generateStars(context2);
showShip(newPos.x-32, newPos.y-42, direction, context2);
entryCoordinates2 = newPos;
});
}
sprites = new Image();
sprites.src = '..\\data\\graphics\\sprites\\ship.png';
function showShip(ship_x, ship_y, direction, ctx) {
if (direction == -1) {
srcX = 156;
} else if (direction == 1) {
srcX = 83;
} else if (direction == 0) {
srcX = 10;
}
srcY = 0;
ship_w = 65;
ship_h = 85;
ctx.drawImage(sprites, srcX, srcY, ship_w, ship_h, ship_x, ship_y, ship_w, ship_h);
}
function generateStars(ctx) {
for (var i = 0; i < 50; i++) {
x = Math.random() * 400;
y = Math.random() * 400;
radius = Math.random() * 3;
ctx.fillStyle = "#FFF";
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
}
function getPosition(canvas, event) {
var x = new Number();
var y = new Number();
if (event.x != undefined && event.y != undefined) {
x = event.x;
y = event.y;
}
else
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
return {x:x, y:y};
}
</script>
</body>
</html>