Game
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.

game.js 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. var keymap = {
  2. 32: "jump",
  3. touch: "jump"
  4. };
  5. /*
  6. * Collision box
  7. */
  8. function Box(width, height, pos) {
  9. pos = pos || {};
  10. this.width = width;
  11. this.height = height;
  12. this.pos = new Vec2(pos.x, pos.y);
  13. }
  14. Box.prototype.collidesWith = function(box, ent1pos, ent2pos) {
  15. var x1 = ent1pos.x + this.pos.x;
  16. var x2 = ent2pos.x + box.pos.x;
  17. var y1 = ent1pos.y + this.pos.y;
  18. var y2 = ent2pos.y + box.pos.y;
  19. var w1 = this.width;
  20. var w2 = box.width;
  21. var h1 = this.height;
  22. var h2 = box.height;
  23. return ((x1 + w1 >= x2 && x1 <= x2 + w2) &&
  24. (y1 + h1 >= y2 && y1 <= y2 + h2));
  25. }
  26. Box.prototype.trace = function(ctx) {
  27. ctx.beginPath();
  28. ctx.moveTo(this.pos.x, this.pos.y);
  29. ctx.lineTo(this.pos.x, this.pos.y + this.height);
  30. ctx.lineTo(this.pos.x + this.width, this.pos.y + this.height);
  31. ctx.lineTo(this.pos.x + this.width, this.pos.y);
  32. ctx.closePath();
  33. }
  34. /*
  35. * Collision shape
  36. */
  37. function Shape(ent) {
  38. this.ent = ent;
  39. this.boxes = [];
  40. this._height = -1;
  41. this._width = -1;
  42. }
  43. Shape.prototype.push = function(box) {
  44. this._height = -1;
  45. this._width = -1;
  46. this.boxes.push(box);
  47. }
  48. Shape.prototype.pop = function() {
  49. this._height = -1;
  50. this._width = -1;
  51. return this.boxes.pop();
  52. }
  53. Shape.prototype.draw = function(ctx) {
  54. for (var i = 0; i < this.boxes.length; ++i) {
  55. var box = this.boxes[i];
  56. box.trace(ctx);
  57. ctx.stroke();
  58. ctx.fill();
  59. }
  60. }
  61. Shape.prototype.collidesWith = function(shape) {
  62. for (var i = 0; i < this.boxes.length; ++i) {
  63. var box = this.boxes[i];
  64. for (var j = 0; j < shape.boxes.length; ++j) {
  65. var otherBox = shape.boxes[j];
  66. if (box.collidesWith(otherBox, this.ent.pos, shape.ent.pos))
  67. return true;
  68. }
  69. }
  70. return false;
  71. }
  72. Shape.prototype.width = function() {
  73. if (this._width !== -1)
  74. return this._width;
  75. var minX = 0;
  76. var maxX = 0;
  77. this.boxes.forEach(function(box) {
  78. if (box.pos.x < minX)
  79. minX = box.pos.x;
  80. if (box.pos.x + box.width > maxX)
  81. maxX = box.pos.x + box.width;
  82. });
  83. this._width = Math.abs(maxX - minX);
  84. return this._width;
  85. }
  86. Shape.prototype.height = function() {
  87. if (this._height !== -1)
  88. return this._height;
  89. var minY = 0;
  90. var maxY = 0;
  91. this.boxes.forEach(function(box) {
  92. if (box.pos.y < minY)
  93. minY = box.pos.y;
  94. if (box.pos.y + box.height > maxY)
  95. maxY = box.pos.y + box.height;
  96. });
  97. this._height = Math.abs(maxY - minY);
  98. return this._height;
  99. }
  100. // Make entity from object
  101. function makeEnt(obj, game, mass, id) {
  102. obj.pos = new Vec2();
  103. obj.vel = new Vec2();
  104. obj.force = new Vec2();
  105. obj.game = game;
  106. obj.shape = new Shape(obj);
  107. obj.moves = false;
  108. obj.dead = false;
  109. obj.inputListener = false;
  110. obj.collude = true;
  111. obj.layer = 0;
  112. obj.mass = mass || 0;
  113. obj.forceScalar = 1 / obj.mass;
  114. if (id) {
  115. game.ids[id] = obj;
  116. }
  117. }
  118. /*
  119. * Game
  120. */
  121. function Game(canvas) {
  122. this.canvas = canvas;
  123. this.ctx = canvas.getContext("2d");
  124. this.raf = null;
  125. this.prevTime = null;
  126. this.stopped = true;
  127. this.camera = new Vec2();
  128. this.worldgen = null;
  129. this.entities = [];
  130. this.ids = {};
  131. this.layers = [];
  132. this.inputListeners = [];
  133. this.keys = {};
  134. this.onkey = function onkey(evt) {
  135. var down = (evt.type === "keydown" || evt.type === "touchstart");
  136. var code = evt.keyCode || "touch";
  137. var name = keymap[code];
  138. if (name) {
  139. this.keys[name] = down;
  140. for (var i = 0; i < this.inputListeners.length; ++i) {
  141. var ent = this.inputListeners[i];
  142. if (ent === null) {
  143. continue;
  144. } else if (ent.dead) {
  145. delete this.inputListeners[i];
  146. continue;
  147. }
  148. this.inputListeners[i].onInput(name, down);
  149. }
  150. }
  151. }.bind(this);
  152. }
  153. Game.prototype.start = function(worldgen) {
  154. window.addEventListener("keydown", this.onkey);
  155. window.addEventListener("keyup", this.onkey);
  156. window.addEventListener("touchstart", this.onkey);
  157. window.addEventListener("touchend", this.onkey);
  158. this.prevTime = new Date().getTime();
  159. this.stopped = false;
  160. this.worldgen = worldgen;
  161. this.update();
  162. }
  163. Game.prototype.spawn = function(ent) {
  164. this.entities.push(ent);
  165. if (!this.layers[ent.layer])
  166. this.layers[ent.layer] = [];
  167. this.layers[ent.layer].push(ent);
  168. if (ent.inputListener)
  169. this.inputListeners.push(ent);
  170. }
  171. Game.prototype.update = function() {
  172. var time = new Date().getTime();
  173. var dt = time - this.prevTime;
  174. if (this.stopped)
  175. return;
  176. // Go through and update
  177. var xRatio = 1 / (1 + (dt * 0.005));
  178. for (var i = 0; i < this.entities.length; ++i) {
  179. var ent = this.entities[i];
  180. // Remove dead entities, replace them with the last entity
  181. if (ent.dead) {
  182. if (i + 1 === this.entities.length) {
  183. this.entities.pop();
  184. continue;
  185. } else {
  186. this.entities[i] = this.entities.pop();
  187. ent = this.entities[i];
  188. }
  189. }
  190. if (ent.update)
  191. ent.update();
  192. if (ent.moves) {
  193. ent.force.scale(ent.forceScalar * dt);
  194. ent.vel.add(ent.force);
  195. ent.force.set({ x: 0, y: 0 });
  196. ent.vel.scale(xRatio);
  197. ent.pos.add(ent.vel.clone().scale(dt));
  198. }
  199. if (ent.move)
  200. ent.move();
  201. }
  202. // Exit if stopped
  203. if (this.stopped)
  204. return;
  205. // Tick worldgen
  206. this.worldgen.update();
  207. // Go through and draw
  208. this.canvas.width = this.canvas.width;
  209. for (var i = 0; i < this.layers.length; ++i) {
  210. var layer = this.layers[i];
  211. for (var j = 0; j < layer.length; ++j) {
  212. var ent = layer[j];
  213. // Remove dead entities, replace them with the last entity
  214. if (ent.dead) {
  215. if (i + 1 === layer.length) {
  216. layer.pop();
  217. continue;
  218. } else {
  219. layer[j] = layer.pop();
  220. ent = layer[j];
  221. }
  222. }
  223. ent.drawn = false;
  224. if (ent.collude && ent.pos.x + ent.shape.width() < this.camera.x)
  225. continue;
  226. if (ent.collude && ent.pos.x > this.camera.x + this.canvas.width)
  227. continue;
  228. ent.drawn = true;
  229. this.ctx.save();
  230. this.ctx.translate(
  231. ent.pos.x - this.camera.x,
  232. ent.pos.y - this.camera.y);
  233. ent.draw(this.ctx);
  234. this.ctx.restore();
  235. }
  236. }
  237. // Go through and draw overlap
  238. for (var i = 0; i < this.layers.length; ++i) {
  239. var layer = this.layers[i];
  240. for (var j = 0; j < layer.length; ++j) {
  241. var ent = layer[j];
  242. if (!ent.drawn)
  243. continue;
  244. if (!ent.drawOverlay)
  245. continue;
  246. this.ctx.save();
  247. this.ctx.translate(
  248. ent.pos.x - this.camera.x,
  249. ent.pos.y - this.camera.y);
  250. ent.drawOverlay(this.ctx);
  251. this.ctx.restore();
  252. }
  253. }
  254. // Clear presses
  255. for (var i in this.presses) {
  256. this.presses[i] = false;
  257. }
  258. this.prevTime = time;
  259. if (!this.stopped)
  260. this.raf = reqAnimFrame(this.update.bind(this));
  261. }
  262. Game.prototype.stop = function(score) {
  263. this.stopped = true;
  264. cancelAnimFrame(this.raf);
  265. window.removeEventListener("keyup", this.onkey);
  266. window.removeEventListener("keydown", this.onkey);
  267. if (this.onstop)
  268. this.onstop(Math.floor(score));
  269. }