Advertisement
Guest User

Untitled

a guest
Apr 1st, 2015
200
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.11 KB | None | 0 0
  1. var canvas = document.getElementById("gameCanvas");
  2. var context = canvas.getContext("2d")
  3.  
  4. window.addEventListener('keydown', function(evt) { onKeyDown(evt); }, false);
  5. window.addEventListener('keyup', function(evt) { onKeyUp(evt); }, false);
  6.  
  7. var startFrameMillis = Date.now();
  8. var endFrameMillis = Date.now();
  9. function getDeltaTime()
  10. {
  11. endFrameMillis = startFrameMillis;
  12. startFrameMillis = Date.now();
  13. var deltaTime = (startFrameMillis - endFrameMillis) * 0.001;
  14. if (deltaTime > 1)
  15. {
  16. deltaTime = 1;
  17. }
  18. return deltaTime;
  19. }
  20.  
  21. var grass = document.createElement("img");
  22. grass.src = "grass.png";
  23.  
  24. var background = [];
  25.  
  26. for(var y=0; y<15; y++)
  27. {
  28. background[y] = [];
  29. for(var x=0; x<20; x++)
  30. background[y][x] = grass;
  31. }
  32.  
  33. var SCREEN_WIDTH = canvas.width;
  34. var SCREEN_HEIGHT = canvas.height;
  35.  
  36. var ASTEROID_SPEED = 0.8;
  37. var PLAYER_SPEED = 1;
  38. var PLAYER_TURN_SPEED = 0.04;
  39. var BULLET_SPEED = 1.5;
  40.  
  41. var player = {
  42. image: document.createElement("img"),
  43. x: SCREEN_WIDTH/2,
  44. y: SCREEN_HEIGHT/2,
  45. width: 93,
  46. height: 80,
  47. directionX: 0,
  48. directionY: 0,
  49. angularDirection: 0,
  50. rotation: 0
  51. };
  52.  
  53. player.image.src = "ship.png";
  54.  
  55. var spawnTimer = 0;
  56. var asteroids = [];
  57.  
  58. function rand(floor, ceil)
  59. {
  60. return Math.floor( (Math.random()* (ceil-floor)) +floor );
  61. }
  62.  
  63. function spawnAsteroid()
  64. {
  65. var type = rand(0, 3);
  66.  
  67. var asteroid = {};
  68.  
  69. asteroid.image = document.createElement("img");
  70. asteroid.image.src = "rock_large.png";
  71. asteroid.width = 69;
  72. asteroid.height = 75;
  73.  
  74. var x = SCREEN_WIDTH/2;
  75. var y = SCREEN_HEIGHT/2;
  76.  
  77. var dirX = rand(-10, 10);
  78. var dirY = rand(-10, 10);
  79.  
  80. var magnitude = (dirX * dirX) + (dirY * dirY);
  81. if(magnitude != 0)
  82. {
  83. var oneOverMag = 1 / Math.sqrt(magnitude);
  84. dirX *= oneOverMag;
  85. dirY *= oneOverMag;
  86. }
  87.  
  88. var movX = dirX * SCREEN_WIDTH;
  89. var movY = dirY * SCREEN_HEIGHT;
  90.  
  91. asteroid.x = x + movX;
  92. asteroid.y = y + movY;
  93.  
  94. asteroid.velocityX = -dirX * ASTEROID_SPEED;
  95. asteroid.velocityY = -dirY * ASTEROID_SPEED;
  96.  
  97. asteroids.push(asteroid);
  98. }
  99.  
  100. var bullets = [];
  101.  
  102. function playerShoot()
  103. {
  104. var bullet = {
  105. image: document.createElement("img"),
  106. x: player.x,
  107. y: player.y,
  108. width: 5,
  109. height: 5,
  110. velocityX: 0,
  111. velocityY: 0
  112. };
  113.  
  114. bullet.image.src = "bullet.png";
  115.  
  116. var velX = 0;
  117. var velY = 1;
  118.  
  119. var s = Math.sin(player.rotation);
  120. var c = Math.cos(player.rotation);
  121.  
  122. var xVel = (velX * c) - (velY * s);
  123. var yVel = (velY * s) + (velY * c);
  124.  
  125. bullet.velocityX = xVel * BULLET_SPEED;
  126. bullet.velocityY = yVel * BULLET_SPEED;
  127.  
  128. bullets.push(bullet);
  129. }
  130.  
  131. var KEY_SPACE = 32;
  132. var KEY_LEFT = 37;
  133. var KEY_UP = 38;
  134. var KEY_RIGHT = 39;
  135. var KEY_DOWN = 40;
  136.  
  137. var shootTimer = 0;
  138. function onKeyDown(event)
  139. {
  140. if(event.keyCode == KEY_UP)
  141. {
  142. player.directionY = 1;
  143. }
  144. if(event.keyCode == KEY_DOWN)
  145. {
  146. player.directionY = -1;
  147. }
  148. if(event.keyCode == KEY_LEFT)
  149. {
  150. player.angularDirection = -1;
  151. }
  152. if(event.keyCode == KEY_RIGHT)
  153. {
  154. player.angularDirection = 1;
  155. }
  156. if(event.keyCode == KEY_SPACE && shootTimer <= 0)
  157. {
  158. shootTimer += 0.3;
  159. playerShoot();
  160. }
  161. }
  162.  
  163. function onKeyUp(event)
  164. {
  165. if(event.keyCode == KEY_UP)
  166. {
  167. player.directionY = 0;
  168. }
  169. if(event.keyCode == KEY_DOWN)
  170. {
  171. player.directionY = 0;
  172. }
  173. if(event.keyCode == KEY_LEFT)
  174. {
  175. player.angularDirection = 0;
  176. }
  177. if(event.keyCode == KEY_RIGHT)
  178. {
  179. player.angularDirection = 0;
  180. }
  181. }
  182.  
  183. function intersects(x1, y1, w1, h1, x2, y2, w2, h2)
  184. {
  185. if(y2 + h2 < y1 ||
  186. x2 + w2 < x1 ||
  187. x2 > x1 + w1 ||
  188. y2 > y1 + h1)
  189. {
  190. return false;
  191. }
  192. return true;
  193. }
  194.  
  195. function run()
  196. {
  197. context.fillStyle = "#6495ED";
  198. context.fillRect(0, 0, canvas.width, canvas.height);
  199.  
  200. var deltaTime = getDeltaTime();
  201.  
  202. for(var y=0; y<15; y++)
  203. {
  204. for(var x=0; x<20; x++)
  205. {
  206. context.drawImage(background[y][x], x*32, y*32);
  207. }
  208. }
  209.  
  210. if(shootTimer >0)
  211. shootTimer -= deltaTime;
  212.  
  213. for(var i=0; i<bullets.length; i++)
  214. {
  215. bullets[i].x += bullets[i].velocityX;
  216. bullets[i].y += bullets[i].velocityY;
  217. }
  218.  
  219. for (var i=0; i<bullets.length; i++)
  220. {
  221. if(bullets[i].x < -bullets[i].width ||
  222. bullets[i].x > SCREEN_WIDTH ||
  223. bullets[i].y < -bullets[i].height ||
  224. bullets[i].y > SCREEN_HEIGHT)
  225. {
  226. bullets.splice(i, 1);
  227. break;
  228. }
  229. }
  230.  
  231. for(var i=0; i<bullets.length; i++)
  232. {
  233. context.drawImage(bullets[i].image,
  234. bullets[i].x - bullets[i].width/2,
  235. bullets[i].y - bullets[i].height/2);
  236. }
  237.  
  238. var s = Math.sin(player.rotation);
  239. var c = Math.cos(player.rotation);
  240.  
  241. var xDir = (player.directionX * c) - (player.directionY * s);
  242. var yDir = (player.directionX * s) + (player.directionY * c);
  243. var xVel = xDir * PLAYER_SPEED;
  244. var yVel = yDir * PLAYER_SPEED;
  245.  
  246. player.x += xVel;
  247. player.y += yVel;
  248.  
  249. player.rotation += player.angularDirection * PLAYER_TURN_SPEED;
  250.  
  251. context.save();
  252. context.translate(player.x, player.y);
  253. context.rotate(player.rotation);
  254. context.drawImage(
  255. player.image, -player.width/2, -player.height/2);
  256. context.restore();
  257.  
  258. //var velocityX = asteroid.directionX * ASTEROID_SPEED;
  259. //var velocityY = asteroid.directionY * ASTEROID_SPEED;
  260. //asteroid.x += velocityX;
  261. //asteroid.y += velocityY;
  262. //context.drawImage(asteroid.image,
  263. //asteroid.x - asteroid.width/2,
  264. //asteroid.y - asteroid.height/2);
  265.  
  266. if ( player.x > SCREEN_WIDTH)
  267. {
  268. context.save();
  269. context.translate( player.x = 0, player.y)
  270. context.restore();
  271. }
  272. if ( player.x < 0)
  273. {
  274. context.save();
  275. context.translate( player.x = SCREEN_WIDTH, player.y)
  276. context.restore();
  277. }
  278. if ( player.y > SCREEN_HEIGHT)
  279. {
  280. context.save();
  281. context.translate( player.x, player.y = 0)
  282. context.restore();
  283. }
  284. if ( player.y < 0)
  285. {
  286. context.save();
  287. context.translate( player.x, player.y = SCREEN_HEIGHT)
  288. context.restore();
  289. }
  290.  
  291. for(var i=0; i<asteroids.length; i++)
  292. {
  293. //deltaTime - TODO
  294. asteroids[i].x = asteroids[i].x + asteroids[i].velocityX * deltaTime;
  295. asteroids[i].y = asteroids[i].y + asteroids[i].velocityY * deltaTime;
  296.  
  297. //Wrapping goes here
  298. if ( asteroids[i].x > SCREEN_WIDTH)
  299. {
  300. context.save();
  301. context.translate( asteroids[i].x = 0, asteroids[i].y)
  302. context.restore();
  303. }
  304. if ( asteroids[i].x < 0)
  305. {
  306. context.save();
  307. context.translate( asteroids[i].x = SCREEN_WIDTH, asteroids[i].y)
  308. context.restore();
  309. }
  310. if ( asteroids[i].y > SCREEN_HEIGHT)
  311. {
  312. context.save();
  313. context.translate( asteroids[i].x, asteroids[i].y = 0)
  314. context.restore();
  315. }
  316. if ( asteroids[i].y < 0)
  317. {
  318. context.save();
  319. context.translate( asteroids[i].x, asteroids[i].y = SCREEN_HEIGHT)
  320. context.restore();
  321. }
  322. }
  323.  
  324. for(var i=0; i<asteroids.length; i++)
  325. {
  326. context.drawImage(asteroids[i].image, asteroids[i].x, asteroids[i].y);
  327. }
  328.  
  329. spawnTimer -= deltaTime;
  330. if(spawnTimer <= 0)
  331. {
  332. spawnTimer = 1;
  333. spawnAsteroid();
  334. }
  335.  
  336. for(var i=0; i<asteroids.length; i++)
  337. {
  338. for(var j=0; j<bullets.length; j++)
  339. {
  340. if(intersects(
  341. bullets[j].x, bullets[j].y,
  342. bullets[j].width, bullets[j].height,
  343. asteroids[i].x, asteroids[i].y,
  344. asteroids[i].width, asteroids[i].height) == true)
  345. {
  346. asteroids.splice(i, 1);
  347. bullets.splice(j, 1);
  348. break;
  349. }
  350. }
  351. }
  352. }
  353.  
  354. (function() {
  355. var onEachFrame;
  356. if (window.requestAnimationFrame) {
  357. onEachFrame = function(cb) {
  358. var _cb = function() { cb(); window.requestAnimationFrame(_cb); }
  359. _cb();
  360. };
  361. } else if (window.mozRequestAnimationFrame) {
  362. onEachFrame = function(cb) {
  363. var _cb = function() { cb();
  364. window.mozRequestAnimationFrame(_cb); }
  365. _cb();
  366. };
  367. } else {
  368. onEachFrame = function(cb) {
  369. setInterval(cb, 1000 / 60);
  370. }
  371. }
  372.  
  373. window.onEachFrame = onEachFrame;
  374. })();
  375.  
  376. window.onEachFrame(run);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement