tringine.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. var _TrinGame;
  2. function Tringine(width, height, initialState, frameRate, screenWidth, screenHeight) {
  3. //Test local storage is avaiable
  4. try {
  5. TrinStorage.prototype.supportsStorage = 'localStorage' in window && window['localStorage'] !== null;
  6. } catch (e) {
  7. TrinStorage.prototype.supportsStorage = false;
  8. }
  9. //Overload parameters
  10. if (screenWidth === undefined) {
  11. screenWidth = 640;
  12. }
  13. if (screenHeight === undefined) {
  14. screenHeight = 712;
  15. }
  16. if (frameRate === undefined) {
  17. frameRate = 30;
  18. }
  19. //Set up game container
  20. var container = document.getElementById("GameContainer");
  21. container.style.position = "absolute";
  22. container.style.left = "50%";
  23. container.style.top = "50%";
  24. //Create canvas
  25. var canvas = document.createElement("Canvas");
  26. canvas.width = width;
  27. canvas.height = height;
  28. canvas.style.width = "100%";
  29. canvas.style.height = "100%";
  30. container.appendChild(canvas);
  31. //Init game engine
  32. this.width = width;
  33. this.height = height;
  34. this.screenWidth = screenWidth;
  35. this.screenHeight = screenHeight;
  36. this.frameRate = frameRate;
  37. this.scaleFactor = 1;
  38. this.gameContainer = container;
  39. this.canvas = canvas;
  40. this.context = canvas.getContext("2d");
  41. this.state = null;
  42. this.nextState = new initialState();
  43. this.mouse = new TrinMouse();
  44. this.isMobile = TrinUtil.prototype.detectmob();
  45. this.isAndroid = TrinUtil.prototype.isAndroid();
  46. this.isIDevice = TrinUtil.prototype.isIDevice();
  47. this.visibleArea = {left: 0, top: 0, right: this.screenWidth, bottom: this.screenHeight, width: this.screenWidth, height: this.screenHeight};
  48. this.widthToHeight = this.width / this.height;
  49. this.paused = false;
  50. this.SPIL_API = null;
  51. this.SPIL_SPLASH = {
  52. action: function() {
  53. if (GameAPI.IS_STANDALONE) {
  54. //window.open("http://play68.com", "_blank");
  55. } else {
  56. GameAPI.Branding.getSplashScreen().action();
  57. }
  58. }
  59. };
  60. this.SPIL_LOGO = {
  61. image: "img/a10Logo.png",
  62. action: function() {
  63. if (GameAPI.IS_STANDALONE) {
  64. //window.open("http://play68.com", "_blank");
  65. } else {
  66. GameAPI.Branding.getLogo().action();
  67. }
  68. }
  69. };
  70. this.SPIL_MOREGAMES = {
  71. action: function() {
  72. if (GameAPI.IS_STANDALONE) {
  73. //window.open("http://play68.com", "_blank");
  74. } else {
  75. //GameAPI.Branding.getLink("more_games").action();
  76. }
  77. }
  78. };
  79. _TrinGame = this;
  80. //Add mouse/touch event listeners
  81. if (this.isMobile) {
  82. window.addEventListener("touchstart", function() {
  83. });
  84. this.mouse.onTouchStart.mouse = this.mouse;
  85. this.mouse.onTouchEnd.mouse = this.mouse;
  86. this.canvas.addEventListener('touchmove', this.getMouseXY, false);
  87. this.canvas.addEventListener('touchstart', this.mouse.onTouchStart, false);
  88. this.canvas.addEventListener('touchend', this.mouse.onTouchEnd, false);
  89. } else {
  90. this.mouse.onMouseDown.mouse = this.mouse;
  91. this.mouse.onMouseUp.mouse = this.mouse;
  92. this.canvas.addEventListener('mousedown', this.mouse.onMouseDown, false);
  93. this.canvas.addEventListener('mouseup', this.mouse.onMouseUp, false);
  94. this.canvas.addEventListener('mousemove', this.getMouseXY, false);
  95. this.canvas.addEventListener('mouseout', this.mouse.onMouseUp, false);
  96. }
  97. //Add resize eventListeners
  98. window.addEventListener('resize', this.resizeGame, false);
  99. window.addEventListener('orientationchange', this.resizeGame, false);
  100. //Resizing game
  101. this.resizeGame();
  102. GameAPI.loadAPI(function(API) {
  103. var logoData = API.IS_STANDALONE ? {logo: "logo_A10_202x50.png", action: function() {window.open("http://play68.com/", "_blank");}} : API.Branding.getLogo();
  104. var splashScreenData = API.Branding.getSplashScreen();
  105. _TrinGame.SPIL_API = API;
  106. _TrinGame.start();
  107. });
  108. }
  109. Tringine.prototype = {
  110. state: null,
  111. update: function() {
  112. this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  113. this.canvas.width = this.canvas.width;
  114. if (this.state !== null && !this.paused) {
  115. this.state.update();
  116. this.state.draw(this.canvas.getContext("2d"));
  117. this.mouse.update();
  118. }
  119. //Switching states
  120. if (this.nextState !== null) {
  121. if (this.state !== null) {
  122. this.state.destroy();
  123. }
  124. this.mouse.reset();
  125. this.state = this.nextState;
  126. this.state.create();
  127. this.nextState = null;
  128. }
  129. },
  130. start: function() {
  131. //Add a main game cycle
  132. setInterval(function() {
  133. _TrinGame.update();
  134. }, 1000 / _TrinGame.frameRate);
  135. },
  136. switchState: function(newState) {
  137. this.nextState = newState;
  138. },
  139. getMouseXY: function(event) {
  140. event.preventDefault();
  141. var mx;
  142. var my;
  143. if (_TrinGame.isAndroid) {
  144. mx = (event.touches[0].pageX + event.layerX) / _TrinGame.scaleFactor;
  145. my = (event.touches[0].pageY + event.layerY) / _TrinGame.scaleFactor;
  146. } else {
  147. if (event.offsetX === undefined) {
  148. mx = event.layerX / _TrinGame.scaleFactor;
  149. my = event.layerY / _TrinGame.scaleFactor;
  150. } else {
  151. mx = event.offsetX / _TrinGame.scaleFactor;
  152. my = event.offsetY / _TrinGame.scaleFactor;
  153. }
  154. }
  155. _TrinGame.mouse.rawX = mx;
  156. _TrinGame.mouse.rawY = my;
  157. return false;
  158. },
  159. log: function(msg) {
  160. if (detectmob()) {
  161. document.getElementById("info").innerHTML = msg;
  162. } else {
  163. console.log(msg);
  164. }
  165. },
  166. resizeGame: function() {
  167. //Calculate new size
  168. var innerWidth = window.innerWidth;
  169. var innerHeight = window.innerHeight;
  170. var newWidth = innerWidth + (_TrinGame.width - _TrinGame.screenWidth) * (innerWidth / _TrinGame.screenWidth);
  171. var newHeight = innerHeight + (_TrinGame.height - _TrinGame.screenHeight) * (innerHeight / _TrinGame.screenHeight);
  172. var newWidthToHeight = newWidth / newHeight;
  173. if (newWidthToHeight > _TrinGame.widthToHeight) {
  174. newWidth = newHeight * _TrinGame.widthToHeight;
  175. } else {
  176. newHeight = newWidth / _TrinGame.widthToHeight;
  177. }
  178. //Change container size
  179. _TrinGame.gameContainer.style.width = newWidth + "px";
  180. _TrinGame.gameContainer.style.height = newHeight + "px";
  181. _TrinGame.gameContainer.style.marginTop = (-newHeight / 2) + 'px';
  182. _TrinGame.gameContainer.style.marginLeft = (-newWidth / 2) + 'px';
  183. _TrinGame.gameContainer.style.fontSize = Math.floor(newWidth / _TrinGame.width) + "em";
  184. _TrinGame.scaleFactor = newWidth / _TrinGame.width;
  185. //Calculate visible area.
  186. var vw = Math.min(innerWidth, newWidth) / _TrinGame.scaleFactor;
  187. var vh = Math.min(innerHeight, newHeight) / _TrinGame.scaleFactor;
  188. _TrinGame.visibleArea.width = vw;
  189. _TrinGame.visibleArea.height = vh;
  190. _TrinGame.visibleArea.left = (_TrinGame.width / 2) - vw / 2;
  191. _TrinGame.visibleArea.top = (_TrinGame.height / 2) - vh / 2;
  192. _TrinGame.visibleArea.right = _TrinGame.visibleArea.left + vw;
  193. _TrinGame.visibleArea.bottom = _TrinGame.visibleArea.top + vh;
  194. //Call sate resize function
  195. if (_TrinGame.state !== null) {
  196. _TrinGame.state.resized();
  197. }
  198. },
  199. globalPause: function() {
  200. this.paused = true;
  201. },
  202. globalResume: function() {
  203. this.paused = false;
  204. }
  205. };