diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..af075637 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ + +.vs/slnx.sqlite +.vs/WebCraft/v15/.suo diff --git a/_config.yml b/_config.yml new file mode 100644 index 00000000..c4192631 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/js/fullScreen.js b/js/fullScreen.js new file mode 100644 index 00000000..3ccb5454 --- /dev/null +++ b/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");} + } +} \ No newline at end of file diff --git a/js/player.js b/js/player.js index 90144b62..4658cf79 100644 --- a/js/player.js +++ b/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; diff --git a/js/sight.js b/js/sight.js new file mode 100644 index 00000000..3768c0dc --- /dev/null +++ b/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 =` +
+ +
+ Click to play +
+ (W, A, S, D = Move, left click to destroy block, right click to place block) +
+ +
+ +
+ +
+
+ + `; + //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 ); + } +} diff --git a/singleplayer.html b/singleplayer.html index 609a1006..83cb1221 100644 --- a/singleplayer.html +++ b/singleplayer.html @@ -17,6 +17,8 @@ + + @@ -29,7 +31,11 @@ -