Pointer lock

lib/camera.coffee

@@ -12,19 +12,38 @@ class Controls
         @lookSpeed = 0.20
         @mouseX = 0
         @mouseY = 0
+        @deltaX = 0
+        @deltaY = 0
         @lat = 0
         @lon = 0
         @mouseDragOn = false
         @anchorx = null
         @anchory = null
+        @mouseLocked = false
         @defineBindings()
+        @enablePointerLock()
 
     defineBindings: ->
         $(@domElement).mousemove (e) => @onMouseMove e
         $(@domElement).mousedown (e) => @onMouseDown e
         $(@domElement).mouseup (e) => @onMouseUp e
         $(@domElement).mouseenter (e) => @onMouserEnter e
 
+    enablePointerLock: ->
+        @domElement.requestPointerLock ?=
+            @domElement.webkitRequestPointerLock or
+            @domElement.mozRequestPointerLock
+        $(document).bind 'pointerlockchange mozpointerlockchange webkitpointerlockchange', =>
+            d = document
+            @mouseLocked = (d.pointerLockElement or d.mozPointerLockElement or d.webkitPointerLockElement)?
+            if @mouseLocked then @showCrosshair() else @hideCrosshair()
+
+    lockPointer: ->
+        @domElement.requestPointerLock?()
+
+    showCrosshair: -> document.getElementById('cursor').style.display = 'block'
+    hideCrosshair: -> document.getElementById('cursor').style.display = 'none'
+
     onMouserEnter: (event) ->
         @onMouseUp(event) unless MouseEvent.isLeftButtonDown event
 
@@ -33,21 +52,31 @@ class Controls
         @domElement.focus() if @domElement isnt document
         @anchorx = event.pageX
         @anchory = event.pageY
-        @setMouse event
+        @setMouse @anchorx, @anchory
         @mouseDragOn = true
         return false
 
     onMouseUp: (event) ->
         @mouseDragOn = false
         return false
 
-    setMouse: (event) ->
-        @mouseX = event.pageX
-        @mouseY = event.pageY
+    setMouse: (x, y) ->
+        @mouseX = x
+        @mouseY = y
+        @setDelta x - @anchorx, y - @anchory
+
+    setDelta: (x, y) ->
+        @deltaX = x
+        @deltaY = y
 
     onMouseMove: (event) ->
-        return unless @mouseDragOn
-        @setMouse event
+        if @mouseDragOn
+            @setMouse event.pageX, event.pageY
+        else if @mouseLocked
+            e = event.originalEvent
+            x = e.movementX or e.mozMovementX or e.webkitMovementX
+            y = e.movementY or e.mozMovementY or e.webkitMovementY
+            @setDelta x, y
         return
 
     halfCircle:  Math.PI / 180
@@ -71,13 +100,22 @@ class Controls
         return
 
     update: ->
-        return unless @mouseDragOn
-        return if @mouseX is @anchorx and @mouseY is @anchory
+        return unless @mouseDragOn or @mouseLocked
+        return if @mouseDragOn and @mouseX is @anchorx and @mouseY is @anchory
         {max, min} = Math
-        @lon += (@mouseX - @anchorx) * @lookSpeed
-        @lat -= (@mouseY - @anchory) * @lookSpeed
-        @anchorx = @mouseX
-        @anchory = @mouseY
+        if @mouseLocked
+            return if @deltaX is @previousDeltaX and @deltaY is @previousDeltaY
+            @previousDeltaX = @deltaX
+            @previousDeltaY = @deltaY
+            @anchorx = window.innerWidth/2
+            @anchory = window.innerHeight/2
+        else if @mouseDragOn
+            return if @mouseX is @anchorx and @mouseY is @anchory
+            @anchorx = @mouseX
+            @anchory = @mouseY
+
+        @lon += @deltaX * @lookSpeed
+        @lat -= @deltaY * @lookSpeed
         @lat = max(-85, min(85, @lat))
         @updateLook()
         return

lib/minecraft.coffee

@@ -617,16 +617,16 @@ class Instructions
     img: (name) -> "<img src='./instructions/#{name}.png'/>"
 
 
-
-
 window.init_web_app = ->
+    game = null
     $("#blocks").hide()
     $('#instructions').hide()
     $(document).bind "contextmenu", -> false
+    $(document).bind "keydown", 'c', -> game?.controls.lockPointer()
     return Detector.addGetWebGLMessage() unless Detector.webgl
     startGame = ->
         game = new Game()
         new BlockSelection(game).insert()
         game.start()
+        return
     new Instructions(startGame).insert()
-

public/camera.js

@@ -1,4 +1,3 @@
-// Generated by CoffeeScript 1.3.3
 (function() {
   var Controls, MouseEvent;
 
@@ -23,12 +22,16 @@
       this.lookSpeed = 0.20;
       this.mouseX = 0;
       this.mouseY = 0;
+      this.deltaX = 0;
+      this.deltaY = 0;
       this.lat = 0;
       this.lon = 0;
       this.mouseDragOn = false;
       this.anchorx = null;
       this.anchory = null;
+      this.mouseLocked = false;
       this.defineBindings();
+      this.enablePointerLock();
     }
 
     Controls.prototype.defineBindings = function() {
@@ -47,22 +50,47 @@
       });
     };
 
-    Controls.prototype.onMouserEnter = function(event) {
-      if (!MouseEvent.isLeftButtonDown(event)) {
-        return this.onMouseUp(event);
+    Controls.prototype.enablePointerLock = function() {
+      var _base,
+        _this = this;
+      if ((_base = this.domElement).requestPointerLock == null) {
+        _base.requestPointerLock = this.domElement.webkitRequestPointerLock || this.domElement.mozRequestPointerLock;
       }
+      return $(document).bind('pointerlockchange mozpointerlockchange webkitpointerlockchange', function() {
+        var d;
+        d = document;
+        _this.mouseLocked = (d.pointerLockElement || d.mozPointerLockElement || d.webkitPointerLockElement) != null;
+        if (_this.mouseLocked) {
+          return _this.showCrosshair();
+        } else {
+          return _this.hideCrosshair();
+        }
+      });
+    };
+
+    Controls.prototype.lockPointer = function() {
+      var _base;
+      return typeof (_base = this.domElement).requestPointerLock === "function" ? _base.requestPointerLock() : void 0;
+    };
+
+    Controls.prototype.showCrosshair = function() {
+      return document.getElementById('cursor').style.display = 'block';
+    };
+
+    Controls.prototype.hideCrosshair = function() {
+      return document.getElementById('cursor').style.display = 'none';
+    };
+
+    Controls.prototype.onMouserEnter = function(event) {
+      if (!MouseEvent.isLeftButtonDown(event)) return this.onMouseUp(event);
     };
 
     Controls.prototype.onMouseDown = function(event) {
-      if (!MouseEvent.isLeftButton(event)) {
-        return;
-      }
-      if (this.domElement !== document) {
-        this.domElement.focus();
-      }
+      if (!MouseEvent.isLeftButton(event)) return;
+      if (this.domElement !== document) this.domElement.focus();
       this.anchorx = event.pageX;
       this.anchory = event.pageY;
-      this.setMouse(event);
+      this.setMouse(this.anchorx, this.anchory);
       this.mouseDragOn = true;
       return false;
     };
@@ -72,16 +100,27 @@
       return false;
     };
 
-    Controls.prototype.setMouse = function(event) {
-      this.mouseX = event.pageX;
-      return this.mouseY = event.pageY;
+    Controls.prototype.setMouse = function(x, y) {
+      this.mouseX = x;
+      this.mouseY = y;
+      return this.setDelta(x - this.anchorx, y - this.anchory);
+    };
+
+    Controls.prototype.setDelta = function(x, y) {
+      this.deltaX = x;
+      return this.deltaY = y;
     };
 
     Controls.prototype.onMouseMove = function(event) {
-      if (!this.mouseDragOn) {
-        return;
+      var e, x, y;
+      if (this.mouseDragOn) {
+        this.setMouse(event.pageX, event.pageY);
+      } else if (this.mouseLocked) {
+        e = event.originalEvent;
+        x = e.movementX || e.mozMovementX || e.webkitMovementX;
+        y = e.movementY || e.mozMovementY || e.webkitMovementY;
+        this.setDelta(x, y);
       }
-      this.setMouse(event);
     };
 
     Controls.prototype.halfCircle = Math.PI / 180;
@@ -111,17 +150,26 @@
 
     Controls.prototype.update = function() {
       var max, min;
-      if (!this.mouseDragOn) {
-        return;
-      }
-      if (this.mouseX === this.anchorx && this.mouseY === this.anchory) {
+      if (!(this.mouseDragOn || this.mouseLocked)) return;
+      if (this.mouseDragOn && this.mouseX === this.anchorx && this.mouseY === this.anchory) {
         return;
       }
       max = Math.max, min = Math.min;
-      this.lon += (this.mouseX - this.anchorx) * this.lookSpeed;
-      this.lat -= (this.mouseY - this.anchory) * this.lookSpeed;
-      this.anchorx = this.mouseX;
-      this.anchory = this.mouseY;
+      if (this.mouseLocked) {
+        if (this.deltaX === this.previousDeltaX && this.deltaY === this.previousDeltaY) {
+          return;
+        }
+        this.previousDeltaX = this.deltaX;
+        this.previousDeltaY = this.deltaY;
+        this.anchorx = window.innerWidth / 2;
+        this.anchory = window.innerHeight / 2;
+      } else if (this.mouseDragOn) {
+        if (this.mouseX === this.anchorx && this.mouseY === this.anchory) return;
+        this.anchorx = this.mouseX;
+        this.anchory = this.mouseY;
+      }
+      this.lon += this.deltaX * this.lookSpeed;
+      this.lat -= this.deltaY * this.lookSpeed;
       this.lat = max(-85, min(85, this.lat));
       this.updateLook();
     };

public/index.html

@@ -82,6 +82,22 @@
                 text-align: center;
             }
 
+            #cursor {
+                display:none;
+                position:absolute;
+                top:50%;
+                left:50%;
+                width:20px;
+                margin-left:-10px;
+                font-size:18px;
+                text-align:center;
+                color:#fff;
+                z-index:2;
+            }
+            #cursor::before {
+                content: '+'
+            }
+
             #oldie a { color:#fff }
 
             body {
@@ -94,6 +110,7 @@
     <body>
         <div id="instructions"></div>
         <div id="container"></div>
+        <div id="cursor"></div>
         <div id="blocks">
         </div>
     </body>