Step 9 : Turn around

We want to turn the 3D environment in order to change the Point Of View (POV).

Listeners

We must capture the keyboard input. The HTML canvas should listen to the keyboard events.

We need to define some global fields for the class GameWindow.


	
			//Keyboard variables
			//Go Left
			this.fKeyLeft=false;

We catch some event

A key input is pressed

if it is a "Left" key then we set this.fKeyLeft=true;


			handleKeyDown : function(e) 
			{

				if (!e)
					e = window.event;

				// LEFT keypad
				if (e.keyCode == '37'  || String.fromCharCode(e.keyCode)=='A') 
				{
				   this.fKeyLeft=true;
				}
				
				
			},

We catch some event

A key input has been released

if it is a "up" key then we set this.fKeyLeft=false;


			handleKeyUp : function(e) 
			{
				if (!e)
					e = window.event;

				// LEFT keypad
				if (e.keyCode == '37'  || String.fromCharCode(e.keyCode)=='A') 
				{
				   this.fKeyLeft=false;
				}
				
				
			},

We update the Canvas

we draw the background

we draw the map

we compute the distances to the walls

we draw the walls

if the "left" is pressed then this.fKeyLeft=true then we change the Point of View and the coordinates of the player according.

We set a timer to call the update function every 1000 miliseconds.


			// This function is called every certain interval (see this.frameRate) to handle input and render the screen
			update : function() 
			{
				this.drawBackground();
				this.drawMap();
				this.drawPlayer(cssColor,this.playersize);
				
				
				this.ComputeBestWallIntersections(this.xunitplayer,this.yunitplayer,this.POVrad,this.debug,this.draw);
				
				this.drawWalls(this.xunitplayer,this.yunitplayer,this.POVrad,this.shading);
				
				this.UpdatePov();
				this.UpdatePlayerCoordinates();
				
				var object=this;
			
				// Render next frame
				setTimeout(function() 
				{
					object.animationFrameID = requestAnimationFrame(object.update.bind(object));
				}, 1000 / this.frameRate);
				
			},

A focus on the Update of the Point of View

We change the POV if we rotate to the left : this.POVrad+=this.anglestepplayer;

We change the POV if we rotate to the right : this.POVrad-=this.anglestepplayer;

Angles are Circular data so !!!!!!

Becareful if the POV gets bigger than 2*PI then this.POVrad-=2*Math.PI;

Becareful if the POV gets negative then this.POVrad+=2*Math.PI;


				UpdatePov : function (){
				// rotate left
				if (this.fKeyLeft)
				{
					this.POVrad+=this.anglestepplayer;
					if (this.POVrad>=2*Math.PI){
						this.POVrad-=2*Math.PI;
					}
					
				}
				 // rotate right
				else if (this.fKeyRight)
				{
					this.POVrad-=this.anglestepplayer;
					if (this.POVrad<0){
						this.POVrad+=2*Math.PI;
					}
				}
			},

A focus on the Update the Player's coordinates

The new player's coordinates depend on the POV

The new player's coordinates depend also on its speed or step size

Trigonometry formula gives us the new coordinates.

Pxgap=Math.cos(this.POVrad)*the step size

Pygap=Math.sin(this.POVrad)*the step size

Move forward

Px=Px+Pxgap

Py=Py-Pygap --> Minus sign because the Y coordinate goes decreasing to go up !!!


			UpdatePlayerCoordinates : function (){
			
					//  _____     _
				// |\ arc     |
				// |  \       y
				// |    \     |
				//            -
				// |--x--|  
				//
				//  sin(arc)=y/diagonal
				//  cos(arc)=x/diagonal   where diagonal=speed
				var playerXDir=Math.cos(this.POVrad);
				var playerYDir=Math.sin(this.POVrad);;

				// move forward
				if (this.fKeyUp)
				{
					this.xunitplayer+=Math.round(playerXDir*this.PlayerStep);
					this.yunitplayer-=Math.round(playerYDir*this.PlayerStep);
				}
				// move backward
				else if (this.fKeyDown)
				{
					
					this.xunitplayer-=Math.round(playerXDir*this.PlayerStep);
					this.yunitplayer+=Math.round(playerYDir*this.PlayerStep);
				}
			
			},

Next: Step 10: POV and angle tricks

step10.html

Back: Step 8

step8.html