Posted By

jcsawyer on 06/14/17


Tagged


Versions (?)

Fingermaze.js


 / Published in: JavaScript
 

Example of basic beginning of game in JS/HTML5

  1. window.onload = function () {
  2. var game = new FingerMaze();
  3. game.Initialize();
  4. };
  5.  
  6. window.requestAnimationFrame = (function () {
  7. return window.requestAnimationFrame ||
  8. window.webkitRequestAnimationFrame ||
  9. window.mozRequestAnimationFrame ||
  10. window.requestAnimFrame ||
  11. function (callback) {
  12. window.setTimeout(callback, 1000 / GLobals.FPS_TARGET);
  13. };
  14. })();
  15.  
  16. Globals = {
  17. DEBUG: true,
  18. FPS_TARGET: 60,
  19. SCREEN_WIDTH: window.innerWidth,
  20. SCREEN_HEIGHT: window.innerHeight,
  21. TARGET_WIDTH: 1280,
  22. TARGET_HEIGHT: 720
  23. };
  24.  
  25. FingerMaze = function () {
  26. FrameBufferElement = null, FrameBufferContext = null;
  27. CanvasElement = null, CanvasContext = null;
  28.  
  29. difficulty = new Slider(document.getElementById('slider-difficulty'), 50); // TEMPORARY CODE
  30.  
  31. this.Initialize = function () {
  32. FrameBufferElement = document.createElement('canvas');
  33. FrameBufferElement.width = Globals.TARGET_WIDTH;
  34. FrameBufferElement.height = Globals.TARGET_HEIGHT;
  35. FrameBufferContext = FrameBufferElement.getContext('2d');
  36.  
  37. CanvasElement = document.getElementById('game-canvas');
  38. CanvasElement.style.width = Globals.SCREEN_WIDTH + 'px';
  39. CanvasElement.style.height = Globals.SCREEN_HEIGHT + 'px';
  40. CanvasContext = CanvasElement.getContext('2d');
  41.  
  42. TouchHandler.initialize();
  43.  
  44. difficulty.initialize(); // TEMPORARY CODE
  45. difficulty.width = 180;
  46. difficulty.x = (Globals.TARGET_WIDTH / 2) - (difficulty.width / 2);
  47. difficulty.y = (Globals.TARGET_HEIGHT - difficulty.constants.BAR_SIZE.y) - ((difficulty.fontSize + 15) * (Globals.TARGET_HEIGHT / Globals.SCREEN_HEIGHT));
  48.  
  49.  
  50. ContentManager.queue('tile-white', './img/tiles/white.png');
  51. ContentManager.load(main);
  52. };
  53.  
  54. main = function () {
  55. window.requestAnimationFrame(main);
  56.  
  57. update();
  58. draw();
  59. };
  60.  
  61. update = function () {
  62. PerformanceMonitor.update();
  63. // Game logic here
  64.  
  65. difficulty.update(TouchHandler.touches); // TEMPORARY CODE
  66. };
  67.  
  68. draw = function () {
  69. PerformanceMonitor.draw();
  70. TouchHandler.draw();
  71.  
  72. //FrameBufferContext.clearRect(0, 0, Globals.TARGET_WIDTH, Globals.TARGET_HEIGHT);
  73. // Canvas drawing here
  74. FrameBufferContext.fillStyle = '#FFF';
  75. for (var i = 0; i < Globals.TARGET_WIDTH / 20; i++) {
  76. for (var j = 0; j < 12; j++) {
  77. if (PerformanceMonitor.objects < (Globals.TARGET_WIDTH / 20) * 12) PerformanceMonitor.objects++;
  78. FrameBufferContext.fillRect(i * 20, (j * 20) + (Globals.TARGET_HEIGHT / 2) - (20 * 6), 20, 20);
  79. };
  80. };
  81.  
  82. difficulty.draw(FrameBufferContext); // TEMPORARY CODE
  83.  
  84. CanvasContext.drawImage(FrameBufferElement, 0, 0);
  85. };
  86.  
  87. ContentManager = {
  88. successful: 0,
  89. failed: 0,
  90. _queue: [],
  91. _cache: {},
  92. queue: function (name, path) {
  93. this._queue.push({ name: name, path: path })
  94. },
  95. load: function (callback) {
  96. if (this._queue.length === 0) {
  97. callback();
  98. };
  99. for (var i = 0; i < this._queue.length; i++) {
  100. name = this._queue[i].name;
  101. path = this._queue[i].path;
  102. img = new Image();
  103. _this = this;
  104. img.addEventListener('load', function () {
  105. this.successful += 1;
  106. if (_this.isDone) {
  107. callback();
  108. };
  109. }, false);
  110. img.addEventListener('error', function () {
  111. this.failed++;
  112. if (_this.isDone) {
  113. callback();
  114. };
  115. }, false);
  116. img.src = path;
  117. this._cache[name] = img;
  118. };
  119. },
  120. get: function (name) {
  121. return this._cache[name];
  122. },
  123. isDone: function () {
  124. return this._queue.length == this.successful + this.failed;
  125. }
  126. };
  127.  
  128. TouchHandler = {
  129. touches: [],
  130. previous: [],
  131. initialize: function () {
  132. document.addEventListener('touchstart', this, false);
  133. document.addEventListener('mousedown', this, false);
  134. },
  135. handleEvent: function (event) {
  136. event.preventDefault();
  137. switch (event.type) {
  138. case 'mousedown':
  139. this.previous = this.touches.slice();
  140. this.touches = [];
  141. this.touches.push({ x: event.clientX, y: event.clientY, type: 'mousedown' });
  142. document.addEventListener('mousemove', this, false);
  143. document.addEventListener('mouseup', this, false);
  144. break;
  145. case 'touchstart':
  146. if (event.touches.length == 1) {
  147. this.previous = this.touches.slice();
  148. this.touches = [];
  149. this.touches.push({ x: event.touches[0].clientX, y: event.touches[0].clientY, type: 'touchstart' });
  150. document.addEventListener('touchmove', this, false);
  151. document.addEventListener('touchend', this, false);
  152. };
  153. break;
  154. case 'mousemove':
  155. if (this.touches[0].x != event.clientX && this.touches[0].y != event.clientY) {
  156. this.previous = this.touches.slice();
  157. this.touches = [];
  158. this.touches.push({ x: event.clientX, y: event.clientY, type: 'mousemove' });
  159. };
  160. break;
  161. case 'touchmove':
  162. if (event.touches.length == 1) {
  163. if (this.touches[0].x != event.touches[0].clientX && this.touches[0].y != event.touches[0].clientY) {
  164. this.previous = this.touches.slice();
  165. this.touches = [];
  166. this.touches.push({ x: event.touches[0].clientX, y: event.touches[0].clientY, type: 'touchmove' });
  167. };
  168. };
  169. break;
  170. case 'mouseup':
  171. this.previous = this.touches.slice();
  172. this.touches = [];
  173. this.touches.push({ x: event.clientX, y: event.clientY, type: 'mouseup' });
  174. document.removeEventListener('mousemove', this, false);
  175. break;
  176. case 'touchend':
  177. if (event.changedTouches.length == 1) {
  178. this.previous = this.touches.slice();
  179. this.touches = [];
  180. this.touches.push({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY, type: 'touchend' });
  181. document.removeEventListener('touchend', this, false);
  182. };
  183. break;
  184. }
  185. },
  186. _debugElem: document.getElementById('debug-touch-collection'),
  187. _debugPreviousElem: document.getElementById('debug-touch-collection-previous'),
  188. draw: function () {
  189. if (this.touches.length > 0) {
  190. this._debugElem.innerHTML = '';
  191. };
  192. if (this.previous.length > 0) {
  193. this._debugPreviousElem.innerHTML = '';
  194. };
  195. for (var i = 0; i < this.touches.length; i++) {
  196. this._debugElem.innerHTML = this._debugElem.innerHTML + '[' + i + '] X: ' + this.touches[i].x + ', Y: ' + this.touches[i].y + ' (' + this.touches[i].type + ')' + (i + 1 == this.touches.length ? '' : '<br />');
  197. };
  198. for (var i = 0; i < this.previous.length; i++) {
  199. this._debugPreviousElem.innerHTML = this._debugPreviousElem.innerHTML + '[' + i + '] X: ' + this.previous[i].x + ', Y: ' + this.previous[i].y + ' (' + this.previous[i].type + ')' + (i + 1 == this.previous.length ? '' : '<br />');
  200. };
  201. },
  202. _copyTouch: function (touch) {
  203. return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
  204. }
  205. };
  206.  
  207. PerformanceMonitor = {
  208. objects: 0,
  209. images: 0,
  210. _debugFPSElem: document.getElementById('debug-performance-fps'),
  211. _debugObjectsElem: document.getElementById('debug-performance-objects'),
  212. fps: 0,
  213. _counter: 0,
  214. _now: 0,
  215. _start: new Date().getTime(),
  216. update: function () {
  217. this._now = new Date().getTime();
  218. if ((this._now - this._start) >= 1000) {
  219. this._start = new Date().getTime();
  220. this.fps = this._counter;
  221. this._counter = 0;
  222. };
  223. },
  224. draw: function () {
  225. this._counter++;
  226. this._debugFPSElem.innerHTML = this.fps;
  227. this._debugObjectsElem.innerHTML = this.objects + ' Objects<br />' + this.images + ' Images';
  228. }
  229. };
  230. };
  231.  
  232. Slider = function (elem, value) {
  233. this.constants = {
  234. BAR_SIZE: { x: 10, y: 25, spacing: 5 },
  235. };
  236. this._elem = elem;
  237. this._isInteracting = false;
  238. this.value = value;
  239. this.x;
  240. this.y;
  241. this.width;
  242. this.height;
  243. this.fontSize = parseInt(window.getComputedStyle(this._elem).fontSize.replace('px', '')) * (Globals.SCREEN_HEIGHT / Globals.TARGET_HEIGHT);
  244.  
  245. this.initialize = function () {
  246. this._elem.style.fontSize = this.fontSize + 'px';
  247. };
  248.  
  249. this.update = function (touches) {
  250. if (touches.length == 1) {
  251. if (new Rect(touches[0].x, touches[0].y, 1, 1).intersects(new Rect(this.x * (Globals.SCREEN_WIDTH / Globals.TARGET_WIDTH), this.y * (Globals.SCREEN_HEIGHT / Globals.TARGET_HEIGHT), this.width * (Globals.SCREEN_WIDTH / Globals.TARGET_WIDTH), this.height * (Globals.SCREEN_HEIGHT / Globals.TARGET_HEIGHT)))) {
  252. if (touches[0].type == 'mousedown' || touches[0].type == 'touchstart') {
  253. this._isInteracting = true;
  254. };
  255. };
  256. if (touches[0].type == 'mouseup' || touches[0].type == 'touchstop') {
  257. this._isInteracting = false;
  258. };
  259. };
  260.  
  261. if (this._isInteracting) {
  262. this.value = ((TouchHandler.touches[0].x - (this.x * (Globals.SCREEN_WIDTH / Globals.TARGET_WIDTH))) / this.width) * 100;
  263. if (this.value > 100) {
  264. this.value = 100;
  265. };
  266. if (this.value < 0) {
  267. this.value = 0;
  268. };
  269. };
  270. };
  271.  
  272. this.draw = function (context) {
  273. this._elem.innerHTML = this.value.toPrecision(8) + '%';
  274. context.clearRect(this.x, this.y - 5, this.width, this.constants.BAR_SIZE.y + 10);
  275. context.fillStyle = '#FFF';
  276. for (var i = 0; i < this._numberOfBars() ; i++) {
  277. //console.log((i / this._numberOfBars()).toFixed(1) + ', ' + Math.floor(this.value) + ', ' + (Math.floor(this.value) / 100).toFixed(1));
  278. if ((i / this._numberOfBars()).toFixed(1) == (Math.floor(this.value) / 100).toFixed(1)) {
  279. context.fillRect(parseInt(this.x + (i * (this.constants.BAR_SIZE.x + this.constants.BAR_SIZE.spacing))), this.y - 5, this.constants.BAR_SIZE.x, this.constants.BAR_SIZE.y + 10);
  280. } else {
  281. context.fillRect(parseInt(this.x + (i * (this.constants.BAR_SIZE.x + this.constants.BAR_SIZE.spacing))), this.y, this.constants.BAR_SIZE.x, this.constants.BAR_SIZE.y);
  282. };
  283. };
  284. };
  285.  
  286. this._numberOfBars = function () {
  287. result = this.width / (this.constants.BAR_SIZE.x + this.constants.BAR_SIZE.spacing);
  288. if (result < 1) {
  289. return 0;
  290. };
  291. return parseInt(result);
  292. };
  293. };
  294.  
  295.  
  296.  
  297.  
  298.  
  299.  
  300. Rect = function (x, y, width, height) {
  301. this.x = x;
  302. this.y = y;
  303. this.width = width;
  304. this.height = height;
  305.  
  306. this.intersects = function (rect) {
  307. return !(rect.x > this.x + this.width ||
  308. rect.x + rect.width < this.x ||
  309. rect.y > this.y + this.height ||
  310. rect.y + rect.height < this.y)
  311. };
  312. };

Report this snippet  

You need to login to post a comment.