Step 7 : Move forward/backward

We want to move forward and backward in the 3D environment.

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.


			//Table of Distances from the player to the walls.
			var nbangles=this.width;
			this.distancesToWalls=new Array(nbangles);
			
			//The coordinates of the player in the unit coordinates
			//system
			this.xunitplayer;
			this.yunitplayer;
			//The point of view in radian of the player
			this.POVrad;
			
			//Player step in pixels 
			//The size of one step
			//The speed of the player
			this.PlayerStep = 4;
			
			//The size of the wall in the mini map
			this.playersize=8
	
			//Keyboard variables
			//Key to go up
			this.fKeyUp=false;

Let us start the Game


		var gameWindow=new GameWindow(canvas);
		gameWindow.start();

The start function

Here we set the listeners to handle when a key is pressed and released

We also animate the canvas thanks to a function call "update"

We also do some initialization.


		start : function() 
			{
				this.init();
				this.update();
				
				window.addEventListener("keydown", this.handleKeyDown.bind(this), false);
				window.addEventListener("keyup", this.handleKeyUp.bind(this), false);
		
				this.animationFrameID = requestAnimationFrame(this.update.bind(this));
			},

The init function

Here Load and draw the map and draw the player at a given location


		init : function() 
			{
				this.xunitplayer=this.width/2;
				this.yunitplayer=this.MAP_HEIGHT*this.wallsize-2*this.wallsize;
				cssColor="red";
				
				this.drawBorder();
				this.loadMap();
				this.drawMap();
				this.drawPlayer(cssColor,this.playersize);
				
				
				var POVdegree=90;
				this.POVrad=this.degreeToRad(POVdegree);
				
				
				this.ComputeBestWallIntersections(this.xunitplayer,this.yunitplayer,this.POVrad,this.debug,this.draw);
				
				this.drawWalls(this.xunitplayer,this.yunitplayer,this.POVrad,this.shading);
				
			},

We catch some event

A key input is pressed

if it is a "up" key then we set this.fKeyUp=true;


			handleKeyDown : function(e) 
			{

				if (!e)
					e = window.event;

				// UP keypad
				if (e.keyCode == '38'  || String.fromCharCode(e.keyCode)=='W') 
				{
					this.fKeyUp=true;
					//console.log("up");
				}
				
				
			},

We catch some event

A key input has been released

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


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

				// UP keypad
				if (e.keyCode == '38'  || String.fromCharCode(e.keyCode)=='W') 
				{
					this.fKeyUp=false;
					//console.log("up");
				}
				
				
			},

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 "up" is pressed then this.fKeyUp=true then we change the Y coordinate of the player according to step size of the player.

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);
				
			
				// move forward
				if (this.fKeyUp)
				{
					console.log("up");
					//Math.round(playerXDir*this.fPlayerSpeed);
					this.yunitplayer-=this.PlayerStep;
				}
				
				var object=this;
			
				// Render next frame
				setTimeout(function() 
				{
					object.animationFrameID = requestAnimationFrame(object.update.bind(object));
				}, 1000 / this.frameRate);
				
			},

Horrible : the Fishbowl effect

As we get closer to the wall the wall gets weird and becomes a bit circular..... We will counter strike this effect just after.

Next: Step 8: fishbowl effect.

step8 .html

Back: Step 6

step6.html