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.

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