hello, I made a sight.js to hide the cursor, to make it more looks like miecraft

.gitignore

@@ -0,0 +1,3 @@
+
+.vs/slnx.sqlite
+.vs/WebCraft/v15/.suo

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

js/fullScreen.js

@@ -0,0 +1,17 @@
+class FullScreen
+{
+	static requestFullScreen() {
+		var element = document.body;
+		// Supports most browsers and their versions.
+		var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+
+		if (requestMethod) { // Native full screen.
+			requestMethod.call(element);
+		} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
+			var wscript = new ActiveXObject("WScript.Shell");
+			if (wscript !== null) {
+				wscript.SendKeys("{F11}");
+			}else{console.log("Full Screen unavailable");}
+		}else{console.log("Full Screen unavailable");}
+	}
+}

js/player.js

@@ -33,6 +33,8 @@ Player.prototype.setWorld = function( world )
 	this.keys = {};
 	this.buildMaterial = BLOCK.DIRT;
 	this.eventHandlers = {};
+	this.targetPitch = 0;
+	this.targetYaw = 0;
 }
 
 // setClient( client )
@@ -55,9 +57,13 @@ Player.prototype.setInputCanvas = function( id )
 	var t = this;
 	document.onkeydown = function( e ) { if ( e.target.tagName != "INPUT" ) { t.onKeyEvent( e.keyCode, true ); return false; } }
 	document.onkeyup = function( e ) { if ( e.target.tagName != "INPUT" ) { t.onKeyEvent( e.keyCode, false ); return false; } }
-	canvas.onmousedown = function( e ) { t.onMouseEvent( e.clientX, e.clientY, MOUSE.DOWN, e.which == 3 ); return false; }
-	canvas.onmouseup = function( e ) { t.onMouseEvent( e.clientX, e.clientY, MOUSE.UP, e.which == 3 ); return false; }
-	canvas.onmousemove = function( e ) { t.onMouseEvent( e.clientX, e.clientY, MOUSE.MOVE, e.which == 3 ); return false; }
+	//canvas.onmousedown = function( e ) { t.onMouseEvent( e.clientX, e.clientY, MOUSE.DOWN, e.which == 3 ); return false; }
+	//canvas.onmouseup = function( e ) { t.onMouseEvent( e.clientX, e.clientY, MOUSE.UP, e.which == 3 ); return false; }
+	//canvas.onmousemove = function (e) {t.onMouseEvent(e.clientX, e.clientY, MOUSE.MOVE, e.which == 3); return false;}
+
+    // Hook mouse move events
+	document.addEventListener("mousemove", function (e) {t.onMouseEvent(e.movementX, e.movementY, MOUSE.MOVE, e.which == 3);return false;}, false);                                
+    document.addEventListener("click",  function( e ) { t.onMouseEvent( window.innerWidth/2, window.innerHeight/2, MOUSE.UP, e.which == 3 ); });
 }
 
 // setMaterialSelector( id )
@@ -127,25 +133,21 @@ Player.prototype.onKeyEvent = function( keyCode, down )
 
 Player.prototype.onMouseEvent = function( x, y, type, rmb )
 {
-	if ( type == MOUSE.DOWN ) {
-		this.dragStart = { x: x, y: y };
-		this.mouseDown = true;
-		this.yawStart = this.targetYaw = this.angles[1];
-		this.pitchStart = this.targetPitch = this.angles[0];
-	} else if ( type == MOUSE.UP ) {
-		if ( Math.abs( this.dragStart.x - x ) + Math.abs( this.dragStart.y - y ) < 4 )	
-			this.doBlockAction( x, y, !rmb );
-
+	if ( type == MOUSE.UP ) {
+		this.doBlockAction( x, y, !rmb );
 		this.dragging = false;
-		this.mouseDown = false;
-		this.canvas.style.cursor = "default";
-	} else if ( type == MOUSE.MOVE && this.mouseDown ) {
-		this.dragging = true;
-		this.targetPitch = this.pitchStart - ( y - this.dragStart.y ) / 200;
-		this.targetYaw = this.yawStart + ( x - this.dragStart.x ) / 200;
-
-		this.canvas.style.cursor = "move";
 	}
+	else if (type == MOUSE.MOVE) {
+        this.dragging = true;
+
+		//check if is not look upward or downward, before apply
+        var result = this.targetPitch - y / 1000;
+        if(result < Math.PI/2 && result > -Math.PI/2)
+        {
+            this.targetPitch -= y / 1000;
+        }
+        this.targetYaw += x / 1000;
+    }
 }
 
 // doBlockAction( x, y )
@@ -156,7 +158,7 @@ Player.prototype.doBlockAction = function( x, y, destroy )
 {
 	var bPos = new Vector( Math.floor( this.pos.x ), Math.floor( this.pos.y ), Math.floor( this.pos.z ) );
 	var block = this.canvas.renderer.pickAt( new Vector( bPos.x - 4, bPos.y - 4, bPos.z - 4 ), new Vector( bPos.x + 4, bPos.y + 4, bPos.z + 4 ), x, y );
-	
+
 	if ( block != false )
 	{
 		var obj = this.client ? this.client : this.world;

js/sight.js

@@ -0,0 +1,104 @@
+// this class managed to display the cross in the middle of the screen and the #instructions
+//author: Jim Chen
+class Sight
+{	
+	//initialization
+	static init()
+	{
+		//add some html code 
+		var a =`
+			<div id="blocker">
+
+				<div id="instructions">
+					<span style="font-size:40px">Click to play</span>
+					<br />
+					(W, A, S, D = Move, left click to destroy block, right click to place block)
+					<br />
+					<button id="FullScreen">Full Screen </button>
+				</div>
+
+			</div>
+
+		<div id= 'sight1'></div>
+		<div id= 'sight2'></div>
+
+		`;
+		//wirte the html code above
+		document.write(a);
+
+		//get the html element
+
+		var blocker = document.getElementById( 'blocker' );//the dark background
+		var instructions = document.getElementById( 'instructions' );//the "Click to play" laber
+
+		//this two div element is the crosshair on the center of screen
+		var sight1 = document.getElementById( 'sight1' );//horiztal
+		var sight2 = document.getElementById( 'sight2' );//vertial
+
+		var FullScreenBtn = document.getElementById( 'FullScreen' );//Full Screen Button
+
+		//hide the crosshair
+		blocker.style.display = 'block';
+		sight1.style.display = 'none';
+		sight2.style.display = 'none';
+		// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
+
+		//check if brower support Pointer Lock API
+		var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
+
+		//appear warning and return if brower not support Pointer Lock API
+		if ( !havePointerLock ) 
+		{
+			instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
+			return null;
+		}
+
+		var element = document.body;
+		//create pointerlockchange event
+		var pointerlockchange = function ( event ) 
+		{
+			if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) 
+			{//hide the instructions and show the crosshair
+				blocker.style.display = 'none';
+				sight1.style.display = 'block';
+				sight2.style.display = 'block';
+			} else {//show the instructions and hide the crosshair
+				blocker.style.display = 'block';
+				sight1.style.display = 'none';
+				sight2.style.display = 'none';
+				instructions.style.display = '';
+			}
+		};
+
+		//create pointerlockerror event
+		var pointerlockerror = function ( event ) 
+		{
+			instructions.style.display = '';
+
+		};
+
+		// Hook pointer lock state change events
+		document.addEventListener( 'pointerlockchange', pointerlockchange, false );
+		document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
+		document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
+
+		document.addEventListener( 'pointerlockerror', pointerlockerror, false );
+		document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
+		document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
+
+		instructions.addEventListener( 'click', function ( event ) 
+		{
+			instructions.style.display = 'none';
+
+			// Ask the browser to lock the pointer
+			element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
+			element.requestPointerLock();
+
+		}, false );
+
+		FullScreenBtn.addEventListener( 'click', function ( event ) 
+		{
+			FullScreen.requestFullScreen();
+		}, false );
+	}
+}

singleplayer.html

@@ -17,6 +17,8 @@
 		<script src="js/render.js" type="text/javascript"></script>
 		<script src="js/physics.js" type="text/javascript"></script>
 		<script src="js/player.js" type="text/javascript"></script>
+        <script src="js/sight.js" type="text/javascript"></script>
+        <script src="js/fullScreen.js" type="text/javascript"></script>
 	</head>
 
 	<body oncontextmenu="return false">
@@ -29,7 +31,11 @@
 		</table>
 
 		<!-- Initialisation code -->
-		<script type="text/javascript">			
+		<script type="text/javascript">		
+
+            //init sight script
+            Sight.init();	
+
 			// Create a new flat world
 			var world = new World( 16, 16, 16 );
 			world.createFlatWorld( 6 );

style/main.css

@@ -146,4 +146,73 @@ body {
 	color: white;
 	font-family: minecraftia;
 	font-size: 16px;
+}
+
+/*the dark background of the instructions*/
+#blocker {
+
+	position: absolute;
+
+	width: 100%;
+	height: 100%;
+
+	background-color: rgba(0,0,0,0.5);
+	z-index : 3;
+}
+
+/*the "Click to play" instructions*/
+#instructions {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+
+	display: -webkit-box;
+	display: -moz-box;
+	display: box;
+
+	-webkit-box-orient: horizontal;
+	-moz-box-orient: horizontal;
+	box-orient: horizontal;
+
+	-webkit-box-pack: center;
+	-moz-box-pack: center;
+	box-pack: center;
+
+	-webkit-box-align: center;
+	-moz-box-align: center;
+	box-align: center;
+
+	color: #ffffff;
+	text-align: center;
+
+	cursor: pointer;
+	z-index : 3;
+}
+
+/*the crosshair (horizontal)*/
+#sight1
+{
+	background-color: black;
+	height: 2px;
+	width: 15px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+	z-index : 3;
+}
+
+/*the crosshair (vertical)*/
+#sight2
+{
+	background-color: black;
+	height: 15px;
+	width: 2px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+	z-index : 3;
 }