Untitled

SUBMITTED BY: Guest

DATE: Oct. 25, 2016, 3:33 a.m.

FORMAT: Text only

SIZE: 7.2 kB

Raw Download

HITS: 1030

Report
  1. document.body.style.margin = PAGEMARGIN + "px";
  2. document.body.style.background = PAGECOLOUR;
  3. document.body.style.textAlign = "center";
  5. var pageTitle = document.createElement("title");
  6. pageTitle.innerHTML = TITLE;
  7. document.head.appendChild(pageTitle);
  9. var pageHeading = document.createElement("div");
  10. pageHeading.style.width = (PLAYAREAWIDTH - 20) + "px";
  11. pageHeading.style.color = MAINFONTCOLOUR;
  12. pageHeading.style.background = HEADINGBGCOLOUR;
  13. pageHeading.style.textAlign = "center";
  14. pageHeading.style.font = "bold 20px Verdana,Geneva,sans-serif";
  15. pageHeading.style.margin = "0px auto 0px auto";
  16. pageHeading.style.padding = "10px 10px 10px 10px";
  17. pageHeading.innerHTML = TITLE;
  18. document.body.appendChild(pageHeading);
  20. var scoreBox = document.createElement("div");
  21. scoreBox.style.width = (PLAYAREAWIDTH - 20) + "px";
  22. scoreBox.style.color = MAINFONTCOLOUR;
  23. scoreBox.style.background = HEADINGBGCOLOUR;
  24. scoreBox.style.textAlign = "center";
  25. scoreBox.style.font = "14px Verdana,Geneva,sans-serif";
  26. scoreBox.style.margin = "0px auto 0px auto";
  27. scoreBox.style.padding = "0px 10px 10px 10px";
  28. scoreBox.innerHTML = "Score: 0";
  29. document.body.appendChild(scoreBox);
  31. // Create the playing area
  33. var playArea = document.createElement("div");
  34. playArea.style.width = PLAYAREAWIDTH + "px";
  35. playArea.style.height = PLAYAREAHEIGHT + "px";
  36. playArea.style.margin = "0px auto 0px auto";
  37. playArea.style.background = PLAYAREACOLOUR;
  38. playArea.style.position = "relative";
  39. playArea.style.zIndex = PLAYAREAZINDEX;
  40. document.body.appendChild(playArea);
  42. // Display the instructions
  44. var instructions = document.createElement("div");
  45. instructions.style.width = (PLAYAREAWIDTH - 14) + "px";
  46. instructions.style.color = MAINFONTCOLOUR;
  47. instructions.style.background = INSBGCOLOUR;
  48. instructions.style.textAlign = "center";
  49. instructions.style.font = "14px Verdana,Geneva,sans-serif";
  50. instructions.style.margin = "0px auto 0px auto";
  51. instructions.style.padding = "7px";
  52. instructions.innerHTML = "<B>S</B> &nbsp;Start &nbsp; &nbsp; &#9664; &nbsp;Left &nbsp; &nbsp; &#9654; &nbsp;Right";
  53. document.body.appendChild(instructions);
  55. // Create the road
  57. var roadPieces = []; // an array of the rectangles that make up the road
  58. var roadPiece = 0; // will serve as the index of the roadPieces array
  60. for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
  61. {
  62. roadPieces[roadPiece] = document.createElement("div");
  63. roadPieces[roadPiece].style.width = ROADWIDTH + "px";
  64. roadPieces[roadPiece].style.height = ANIMDELTA + "px";
  65. roadPieces[roadPiece].style.background = ROADCOLOUR;
  66. roadPieces[roadPiece].style.position = "absolute";
  67. roadPieces[roadPiece].style.zIndex = ROADZINDEX;
  68. roadPieces[roadPiece].style.left = ROADINITPOS + "px";
  69. roadPieces[roadPiece].style.top = (roadPiece * ANIMDELTA) + "px";
  70. playArea.appendChild(roadPieces[roadPiece]);
  72. }
  73. var carOnPiece = Math.floor(3/4*NUMROADPIECES); // constant in this version
  75. // Create the car (the manipulation below results in a triangle)
  77. var car = document.createElement("div");
  78. car.style.width = BLOCKSIZE + "px";
  79. car.style.height = BLOCKSIZE + "px";
  80. car.style.background = CARCOLOUR;
  81. car.style.position = "absolute";
  82. car.style.zIndex = CARZINDEX;
  83. car.style.left = CARINITPOS + "px";
  84. car.style.top = roadPieces[carOnPiece].style.top;
  85. playArea.appendChild(car);
  87. // Listen for key presses
  89. var gameIsRunning = false;
  90. var changeInCarPos = 0; // used for steering
  92. document.onkeydown = checkDown;
  93. function checkDown(e)
  94. {
  95. if (e.keyCode === 37) changeInCarPos = -ANIMDELTA; // 37 left cursor
  96. else if (e.keyCode === 39) changeInCarPos = ANIMDELTA; // 39 right cursor
  97. else if (e.keyCode === 83 && !gameIsRunning) // 83 is S
  98. {
  99. gameIsRunning = true;
  100. runGame();
  101. }
  103. }
  105. document.onkeyup = checkLift;
  106. function checkLift(e)
  107. {
  108. if
  109. (
  110. (e.keyCode === 37 && changeInCarPos < 0) || // 37 left cursor
  111. (e.keyCode === 39 && changeInCarPos > 0) // 39 right cursor
  112. )
  113. changeInCarPos = 0;
  114. }
  116. // The game loop
  118. function runGame()
  119. {
  120. var score = 0; // The score
  121. var timeDelta = INITTIMEDELTA; // Initial delay between each frame
  122. var flashNumber = NUMFLASHES; // Flashes left on death animation
  124. var carLeftEdge = CARINITPOS;
  125. var roadLeftEdges = [];
  126. for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
  127. roadLeftEdges[roadPiece] = ROADINITPOS;
  128. var changedLeftRoadEdge = ROADINITPOS;
  129. var roadDiceThrow = 0;
  130. var changeInRoadPos = 0; // note: changeInCarPos is defined above
  132. // reset positions of the road and car
  134. render();
  136. // start difficulty timer
  138. var difficultyTimer = setTimeout(increaseDifficulty, DIFFICULTYPERIOD);
  140. function increaseDifficulty()
  141. {
  142. if (gameIsRunning)
  143. {
  144. if (timeDelta > MINTIMEDELTA) timeDelta--;
  145. difficultyTimer = setTimeout(increaseDifficulty, DIFFICULTYPERIOD);
  146. }
  147. }
  149. // start the game loop
  151. var frame = setTimeout(gameLoop, timeDelta);
  153. function gameLoop()
  154. {
  156. // calculate movement
  158. carLeftEdge += changeInCarPos;
  159. if (carLeftEdge < 0)
  160. carLeftEdge = 0;
  161. else if (carLeftEdge > (PLAYAREAWIDTH - BLOCKSIZE))
  162. carLeftEdge = PLAYAREAWIDTH - BLOCKSIZE;
  164. roadDiceThrow = Math.random();
  165. if (roadDiceThrow < ROADGOESLEFT) changeInRoadPos = -ANIMDELTA;
  166. else if (roadDiceThrow >= ROADGOESRIGHT) changeInRoadPos = ANIMDELTA;
  167. else changeInRoadPos = 0;
  169. changedLeftRoadEdge += changeInRoadPos;
  170. if (changedLeftRoadEdge < 0)
  171. changedLeftRoadEdge = 0;
  172. else if (changedLeftRoadEdge > (PLAYAREAWIDTH - ROADWIDTH))
  173. changedLeftRoadEdge = PLAYAREAWIDTH - ROADWIDTH;
  175. for (roadPiece = NUMROADPIECES - 1; roadPiece >= 1; roadPiece--)
  176. roadLeftEdges[roadPiece] = roadLeftEdges[roadPiece - 1];
  177. roadLeftEdges[0] = changedLeftRoadEdge;
  179. // render new physical state
  181. render();
  183. // collision detection
  185. if (
  186. (carLeftEdge < roadLeftEdges[carOnPiece]) ||
  187. (carLeftEdge + BLOCKSIZE > roadLeftEdges[carOnPiece] + ROADWIDTH)
  188. )
  189. {
  190. gameIsRunning = false;
  191. frame = setTimeout(deathAnimation, FLASHPERIOD);
  192. }
  194. // scoring
  196. score++;
  198. // loop again if the game is still going
  200. if (gameIsRunning) frame = setTimeout(gameLoop, timeDelta);
  201. }
  203. function render()
  204. {
  205. for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
  206. roadPieces[roadPiece].style.left = roadLeftEdges[roadPiece] + "px";
  207. car.style.left = carLeftEdge + "px";
  208. //scoreBox.innerHTML = "Score: " + score + " (" + timeDelta + ")";
  209. scoreBox.innerHTML = "Score: " + score;
  210. }
  212. function deathAnimation()
  213. {
  214. if (flashNumber % 2 == 0)
  215. car.style.background = FLASHCOLOUR;
  216. else
  217. car.style.background = CARCOLOUR;
  219. flashNumber--;
  221. if (flashNumber > 0 && !gameIsRunning)
  222. frame = setTimeout(deathAnimation, FLASHPERIOD);
  223. else
  224. car.style.background = CARCOLOUR;
  225. }
  226. }
comments powered by Disqus