1./* 
"driving.js" is a simple driving simulator written to introduce students to

the basics of game programming.
Author: Bob Jones & Raven Lord
Date: October 10th 2016
Usage: This script is invoked by loading "driving.html" in a browser.
*/

   // Game Parameters
/* Note that ANIMDELTA should be a factor of BLOCKSIZE (1 for per-pixel
    animation, higher for performance, BLOCKSIZE for charm) */

const BLOCKSIZE = 20;          // Most dimensions are multiples of this
const ANIMDELTA = 20;          // Should be a factor of BLOCKSIZE (read above)
const DIFFICULTYPERIOD = 1000; // Period between difficulty increases in ms
const INITTIMEDELTA = 60;      // Initial delay between frames in ms
const MINTIMEDELTA = 5;        // Browser is highly unlikely to go any faster

const TITLE = "Driving Game";
const PAGEMARGIN = 20;
const PAGECOLOUR = "White";
const MAINFONTCOLOUR = "Black";
const HEADINGBGCOLOUR = "White";
const INSBGCOLOUR = "White";

const PLAYAREAWIDTH = 35 * BLOCKSIZE;
const PLAYAREAHEIGHT = 25 * BLOCKSIZE;
const PLAYAREACOLOUR = "OliveDrab";
const PLAYAREAZINDEX = "-5";

const ROADWIDTH = 11 * BLOCKSIZE;   // Best as odd number of blocks
const ROADCOLOUR = "Silver";
const ROADZINDEX = "-4";
const ROADINITPOS = Math.floor((PLAYAREAWIDTH - ROADWIDTH) / 2);  // halfway
const NUMROADPIECES = Math.floor(PLAYAREAHEIGHT/ANIMDELTA);
const ROADGOESLEFT = 0.4;     // roadDiceThrow < this value, road curves left
const ROADGOESRIGHT = 0.6;    // roadDiceThrow > this value, road curves right

const CARCOLOUR = "Yellow";
const CARZINDEX = "-3";
const CARINITPOS = Math.floor((PLAYAREAWIDTH - BLOCKSIZE) / 2);   // halfway

const FLASHCOLOUR = "Red"; // Colour used in death animation
const FLASHPERIOD = 50;    // Controls rate of flashing in death animation
const NUMFLASHES = 20;     // Control how long the death animation goes for

// Setup the page

document.body.style.margin = PAGEMARGIN + "px";
document.body.style.background = PAGECOLOUR;
document.body.style.textAlign = "center";

var pageTitle = document.createElement("title");
pageTitle.innerHTML = TITLE;
document.head.appendChild(pageTitle);

var pageHeading = document.createElement("div");
pageHeading.style.width = (PLAYAREAWIDTH - 20) + "px";
pageHeading.style.color = MAINFONTCOLOUR;
pageHeading.style.background = HEADINGBGCOLOUR;
pageHeading.style.textAlign = "center";
pageHeading.style.font = "bold 20px Verdana,Geneva,sans-serif";
pageHeading.style.margin = "0px auto 0px auto";
pageHeading.style.padding = "10px 10px 10px 10px";
pageHeading.innerHTML = TITLE;
document.body.appendChild(pageHeading);

var scoreBox = document.createElement("div");
scoreBox.style.width = (PLAYAREAWIDTH - 20) + "px";
scoreBox.style.color = MAINFONTCOLOUR;
scoreBox.style.background = HEADINGBGCOLOUR;
scoreBox.style.textAlign = "center";
scoreBox.style.font = "14px Verdana,Geneva,sans-serif";
scoreBox.style.margin = "0px auto 0px auto";
scoreBox.style.padding = "0px 10px 10px 10px";
scoreBox.innerHTML = "Score: 0";
document.body.appendChild(scoreBox);

// Create the playing area 

var playArea = document.createElement("div");
playArea.style.width = PLAYAREAWIDTH + "px";
playArea.style.height = PLAYAREAHEIGHT + "px";
playArea.style.margin = "0px auto 0px auto";
playArea.style.background = PLAYAREACOLOUR;
playArea.style.position = "relative";
playArea.style.zIndex = PLAYAREAZINDEX;
document.body.appendChild(playArea);

// Display the instructions

var instructions = document.createElement("div");
instructions.style.width = (PLAYAREAWIDTH - 14) + "px";
instructions.style.color = MAINFONTCOLOUR;
instructions.style.background = INSBGCOLOUR;
instructions.style.textAlign = "center";
instructions.style.font = "14px Verdana,Geneva,sans-serif";
instructions.style.margin = "0px auto 0px auto";
instructions.style.padding = "7px";
instructions.innerHTML = "<B>S</B> &nbsp;Start &nbsp; &nbsp; &#9664; &nbsp;Left &nbsp; &nbsp; &#9654; &nbsp;Right";
document.body.appendChild(instructions);

// Create the road

var roadPieces = []; // an array of the rectangles that make up the road
var roadPiece = 0;   // will serve as the index of the roadPieces array

for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
{
   roadPieces[roadPiece] = document.createElement("div");
   roadPieces[roadPiece].style.width = ROADWIDTH + "px";
   roadPieces[roadPiece].style.height = ANIMDELTA + "px";
   roadPieces[roadPiece].style.background = ROADCOLOUR;
   roadPieces[roadPiece].style.position = "absolute";
   roadPieces[roadPiece].style.zIndex = ROADZINDEX;
   roadPieces[roadPiece].style.left = ROADINITPOS + "px";
   roadPieces[roadPiece].style.top = (roadPiece * ANIMDELTA) + "px";
   playArea.appendChild(roadPieces[roadPiece]);
   
}
var carOnPiece = Math.floor(3/4*NUMROADPIECES); // constant in this version

// Create the car (the manipulation below results in a triangle)

var car = document.createElement("div");
car.style.width = BLOCKSIZE + "px";
car.style.height = BLOCKSIZE + "px";
car.style.background = CARCOLOUR;
car.style.position = "absolute";
car.style.zIndex = CARZINDEX;
car.style.left = CARINITPOS + "px";
car.style.top = roadPieces[carOnPiece].style.top;
playArea.appendChild(car);

// Listen for key presses

var gameIsRunning = false;
var changeInCarPos = 0; // used for steering

document.onkeydown = checkDown;
function checkDown(e)
{
   if(e.keyCode === 37) changeInCarPos = -ANIMDELTA; // left cursor
   else if(e.keyCode === 39) changeInCarPos = ANIMDELTA; // right cursor
   else if(e.keyCode === 83 && !gameIsRunning) // S key
   {
      gameIsRunning = true;
      runGame();
   }
}

document.onkeyup = checkLift;
function checkLift(e)
{
   if (
         (e.keyCode === 37 && changeInCarPos < 0) ||  // left
         (e.keyCode === 39 && changeInCarPos > 0)     // right
      )
      changeInCarPos = 0;
}

// The game loop

function runGame()
{
   var score = 0;                   // The score
   var timeDelta = INITTIMEDELTA;   // Initial delay between each frame
   var flashNumber = NUMFLASHES;    // Flashes left on death animation
   
   var carLeftEdge = CARINITPOS;
   var roadLeftEdges = [];
   for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
      roadLeftEdges[roadPiece] = ROADINITPOS;
   var changedLeftRoadEdge = ROADINITPOS;
   var roadDiceThrow = 0;
   var changeInRoadPos = 0;   // note: changeInCarPos is defined above
   
   // reset positions of the road and car
   
   render();
   
   // start difficulty timer
   
   var difficultyTimer = setTimeout(increaseDifficulty, DIFFICULTYPERIOD);
   
   function increaseDifficulty()
   {
      if (gameIsRunning)
      {
         if (timeDelta > MINTIMEDELTA) timeDelta--;
         difficultyTimer = setTimeout(increaseDifficulty, DIFFICULTYPERIOD);
      }
   }

   // start the game loop
   
   var frame = setTimeout(gameLoop, timeDelta);    
   
   function gameLoop()
   {
      
      // calculate movement
      
      carLeftEdge += changeInCarPos;
      if (carLeftEdge < 0)
         carLeftEdge = 0;
      else if (carLeftEdge > (PLAYAREAWIDTH - BLOCKSIZE))
         carLeftEdge = PLAYAREAWIDTH - BLOCKSIZE;
      
      roadDiceThrow = Math.random();
      if (roadDiceThrow < ROADGOESLEFT) changeInRoadPos = -ANIMDELTA;
      else if (roadDiceThrow >= ROADGOESRIGHT) changeInRoadPos = ANIMDELTA;
      else changeInRoadPos = 0;
      
      changedLeftRoadEdge += changeInRoadPos;
	  if (changedLeftRoadEdge < 0)
		  changedLeftRoadEdge = 0;
	  else if (changedLeftRoadEdge > (PLAYAREAWIDTH - ROADWIDTH))
		  changedLeftRoadEdge = PLAYAREAWIDTH - ROADWIDTH;
	  
	  for (roadPiece = NUMROADPIECES - 1; roadPiece >= 1; roadPiece --)
		  roadLeftEdges[roadPiece] = roadLeftEdges[roadPiece -1];
	  roadLeftEdges[0] = changedLeftRoadEdge;
	  
       
      // render new physical state
	  
	  render();
      
      // collision detection
      
	  if(
			(carLeftEdge < roadLeftEdges [carOnPiece]) ||
			(carLeftEdge + BLOCKSIZE > roadLeftEdges[carOnPiece] + ROADWIDTH) 
		)
		
	{
		gameIsRunning = false;
		frame = setTimeout(deathAnimation, FLASHPERIOD);
	}
      
      // scoring
      
      score++;
      
      // loop again if the game is still going
	  
	  if (gameIsRunning) frame = setTimeout (gameLoop, timeDelta);

   }
   
   function render()
   {
      for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
         roadPieces[roadPiece].style.left = roadLeftEdges[roadPiece] + "px";
      car.style.left = carLeftEdge + "px";
      //scoreBox.innerHTML = "Score: " + score + " (" + timeDelta + ")";
      scoreBox.innerHTML = "Score: " + score;
   }
   
   function deathAnimation()
   {
      if (flashNumber % 2 == 0)
         car.style.background = FLASHCOLOUR;
      else
         car.style.background = CARCOLOUR;

      flashNumber--;
      
      if (flashNumber > 0 && !gameIsRunning)
         frame = setTimeout(deathAnimation, FLASHPERIOD);
      else
         car.style.background = CARCOLOUR;
   }
}