Simple website with some JavaScript games.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

353 lines
9.4 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. <script>
  2. //5-25-17
  3. window.addEventListener("keydown", function(e)
  4. {
  5. // space and arrow keys
  6. if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1)
  7. {
  8. e.preventDefault();
  9. }
  10. }, false);
  11. window.onload = function()
  12. {
  13. var canvas = document.getElementById("canvas");
  14. var c = canvas.getContext('2d');
  15. c.fillStyle= "black";
  16. c.fillRect(0,0, canvas.width, canvas.height);
  17. };
  18. //entire game
  19. function playBF()
  20. {
  21. var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback)
  22. {
  23. window.setTimeout(callback, 1000 / 60)
  24. };
  25. var canvas = document.getElementById("canvas");
  26. var width = 800;
  27. var height = 800;
  28. canvas.style.textAligh = 'center';
  29. var context = canvas.getContext('2d');
  30. var keysDown = {};
  31. //player variables;
  32. var score = 0;
  33. var alive = true;
  34. //usefull function
  35. function getRandomIntInclusive(min, max)
  36. {
  37. min = Math.ceil(min);
  38. max = Math.floor(max);
  39. return Math.floor(Math.random() * (max - min + 1)) + min;
  40. }
  41. //objects
  42. var Player = function(x,y)
  43. {
  44. this.x = width/2;
  45. this.y = height/2;
  46. this.width = 10;
  47. this.height = 10;
  48. this.speed = 4;
  49. this.facing = 40;
  50. this.updateDirection = function(key)
  51. {
  52. facing = key;
  53. }
  54. this.render = function()
  55. {
  56. context.fillStyle = "rgba(255, 255, 255, 1)"; //white
  57. context.fillRect(this.x, this.y, this.width, this.height);
  58. }
  59. this.move = function()
  60. {
  61. for (var key in keysDown)
  62. {
  63. var value = Number(key);
  64. if(value == 37) //left
  65. {
  66. this.x = this.x - this.speed;
  67. }
  68. else if(value == 39)
  69. {
  70. this.x = this.x + this.speed;
  71. }
  72. }
  73. //collisions
  74. for(i = 0; i < astroids.length; i++)
  75. {
  76. if(astroids[i] != -1)
  77. {
  78. bb = astroids[i];
  79. //if(Math.abs(bb.x - p.x) <= bb.width)
  80. if(p.x > bb.x && p.x < bb.x + bb.width || p.x + p.width < bb.x + bb.width && p.x + p.width > bb.x)
  81. {
  82. if(p.y > bb.y && p.y < bb.y + bb.height || p.y + p.height < bb.y + bb.height && p.y + p.height > bb.y)
  83. {
  84. alive = false;
  85. bb = -1;
  86. }
  87. }
  88. }
  89. }
  90. if(this.x < 0)
  91. {
  92. this.x += this.speed;
  93. }
  94. else if(this.x > width)
  95. {
  96. this.x -= this.speed;
  97. }
  98. }
  99. }
  100. //player object
  101. var p = new Player(350, 850);
  102. //object that falls from the sky
  103. var Astroid = function(size)
  104. {
  105. this.width = 15;
  106. this.height = 15;
  107. this.dir = 2 * Math.PI * Math.random()
  108. this.size = size;
  109. var temp = getRandomIntInclusive(0, width);
  110. var temp2 = getRandomIntInclusive(1, 4);
  111. if(temp2 == 1)
  112. {
  113. this.x = temp;
  114. this.y = 0;
  115. }
  116. else if(temp2 == 2)
  117. {
  118. this.x = width;
  119. this.y = temp;
  120. }
  121. else if(temp2 == 3)
  122. {
  123. this.y = height;
  124. this.x = temp;
  125. }
  126. else
  127. {
  128. this.y = temp;
  129. this.x = 0;
  130. }
  131. this.speed = 2;
  132. this.render = function()
  133. {
  134. context.fillStyle = "rgba(255, 255, 255 , 1)"; //green
  135. context.beginPath();
  136. context.arc(this.x,this.y,this.width,0,2*Math.PI);
  137. context.fill();
  138. }
  139. this.move = function()
  140. {
  141. this.y += this.speed * Math.sin(this.dir);
  142. this.x += this.speed *Math.cos(this.dir);
  143. //collision
  144. if(this.y> height)
  145. {
  146. //remove bamboo from array
  147. score++;
  148. return true;
  149. }
  150. if()
  151. {
  152. }
  153. }
  154. }
  155. var astroids = [];
  156. //draws all the objects
  157. var render = function()
  158. {
  159. context.fillStyle = "rgba(0, 0,0 ,1)";
  160. context.fillRect(0,0, width, height);
  161. context.fillStyle = "rgba(255, 255,255 ,1)";
  162. context.font = "20px Georgia";
  163. context.fillText("Score: " + score, 10, 25);
  164. p.render();
  165. for(i= 0; i < astroids.length; i++)
  166. {
  167. if(astroids[i] != -1)
  168. {
  169. astroids[i].render();
  170. }
  171. }
  172. //console.log('render was called');
  173. //context.fillStyle = "rgba(0, 128, 0 ,1)"; //green
  174. //context.fillRect(0, 0, 700, 700);
  175. //console.log(context);
  176. }
  177. var update = function()
  178. {
  179. addAstroid();
  180. p.move();
  181. for (i = 0; i< astroids.length; i++)
  182. {
  183. if(astroids[i] != -1)
  184. {
  185. if(astroids[i].move())
  186. {
  187. astroids[i] = -1;
  188. }
  189. }
  190. }
  191. }
  192. var count = 0;
  193. var limit = 25;
  194. var addAstroid = function()
  195. {
  196. count++;
  197. if(count == limit)
  198. {
  199. count = 0;
  200. var bnew = true;
  201. for(i = 0; i < astroids.length; i++)
  202. {
  203. if(astroids[i] == -1)
  204. {
  205. astroids[i] = new Astroid();
  206. bnew = false;
  207. }
  208. }
  209. if(bnew)
  210. {
  211. astroids.push(new Astroid());
  212. }
  213. if(limit > 10)
  214. {
  215. limit --;
  216. }
  217. }
  218. }
  219. var sent;
  220. var tic = function()
  221. {
  222. //console.log('tic was called');
  223. if(alive)
  224. {
  225. update();
  226. render();
  227. }
  228. else
  229. {
  230. if(!sent)
  231. {
  232. context.fillStyle = "rgba(0, 0,0 ,1)";
  233. context.fillRect(0,0, width, height);
  234. context.fillStyle = "rgba(255, 255,255 ,1)";
  235. context.font = "20px Georgia";
  236. context.fillText("You died with a score of: " + score, 250, 325);
  237. //document.body.innerHTML += '<form id="dynForm" action="insertScore.php" method="post"><input type="hidden" name="game_new_score" value=true><input type="hidden" name="game" value=1><input type="hidden" name="user_id_score" value=<?php echo $_SESSION['user_id']; ?>><input type="hidden" name="score_validate" value=' + score + '></form>';
  238. //document.getElementById("dynForm").submit();
  239. //sent = true;
  240. }
  241. }
  242. animate(tic);
  243. }
  244. window.addEventListener("keydown", function (event)
  245. {
  246. if(event.keyCode >=37 && event.keyCode <=40)
  247. {
  248. p.facing = event.keyCode;
  249. }
  250. keysDown[event.keyCode] = true;
  251. });
  252. window.addEventListener("keyup", function (event)
  253. {
  254. delete keysDown[event.keyCode];
  255. });
  256. //tic();
  257. animate(tic);
  258. }
  259. </script>
  260. <div><canvas id="canvas" width="700" height="700"></canvas></div>
  261. <div><input type="submit" name="play" value="Play Game" onclick="this.blur();playBF()"/></div>