API tools faq
paste
Advertisement
Guest User

html + css

a guest
Feb 20th, 2019
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body, canvas {
  6. margin: 0;
  7. padding: 0;
  8. overflow: hidden;
  9. }
  10. </style>
  11. </head>
  12. <body onload="init()">
  13. <canvas id="canvas-id"/>
  14. <script src="game.js"></script>
  15. <script>
  16. if(endlessCanvas == undefined){
  17. var endlessCanvas = false;
  18. }
  19. var canvas = document.getElementById("canvas-id");
  20. if(endlessCanvas){
  21. canvas.width = window.innerWidth;
  22. canvas.height = window.innerHeight;
  23.  
  24. window.onresize = function (){
  25. canvas.width = window.innerWidth;
  26. canvas.height = window.innerHeight;
  27. };
  28. }
  29. else
  30. {
  31. canvas.width = 800;
  32. canvas.height = 600;
  33. }
  34. var context = canvas.getContext("2d");
  35. context.fillStyle = "#0000ff";
  36. // global variables with mouse coordinates
  37. var mouseX = 0;
  38. var mouseY = 0;
  39.  
  40. // some keycodes
  41. var key_left = 37;
  42. var key_up = 38;
  43. var key_right = 39;
  44. var key_down = 40;
  45. var key_a = 65;
  46. var key_z = 90;
  47.  
  48. var isKeyPressed = [];
  49. for (i = 0; i < 256; ++i) {
  50. isKeyPressed.push(0);
  51. }
  52.  
  53. // gridSize = 50; // uncomment or add to game.js if you want a grid
  54.  
  55. var reqAnimationFrame =
  56. window.requestAnimationFrame ||
  57. window.mozRequestAnimationFrame ||
  58. window.webkitRequestAnimationFrame ||
  59. window.msRequestAnimationFrame ||
  60. function (callback) {
  61. setTimeout(callback, 1000 / 30);
  62. };
  63.  
  64. function redraw() {
  65. context.clearRect(0, 0, canvas.width, canvas.height);
  66. context.globalAlpha = 1;
  67.  
  68. // draw grid
  69. //context.fillStyle = "#FF0000";
  70. context.font = "10px Arial";
  71. if (typeof gridSize != "undefined" && gridSize >= 25) {
  72. context.fillText(0, 4, 10);
  73. context.beginPath();
  74. for (i = gridSize; i < canvas.width; i += gridSize) {
  75. context.moveTo(i, 0);
  76. context.lineTo(i, canvas.height);
  77. context.fillText(i, i + 4, 10);
  78. }
  79. for (i = gridSize; i < canvas.height; i += gridSize) {
  80. context.moveTo(0, i);
  81. context.lineTo(canvas.width, i);
  82. context.fillText(i, 4, i + 10);
  83. }
  84. context.stroke();
  85. }
  86.  
  87. draw(); // call progammer's draw() function
  88.  
  89. reqAnimationFrame(redraw);
  90. };
  91.  
  92. function callupdate() {
  93. update(); // call programmer's update() function
  94. setTimeout(callupdate, 10); // and 10 ms after that ...
  95. };
  96.  
  97. function areColliding(Ax, Ay, Awidth, Aheight, Bx, By, Bwidth, Bheight) {
  98. if (Bx <= Ax + Awidth) {
  99. if (Ax <= Bx + Bwidth) {
  100. if (By <= Ay + Aheight) {
  101. if (Ay <= By + Bheight) {
  102. return 1;
  103. }
  104. }
  105. }
  106. }
  107. return 0;
  108. };
  109.  
  110. function init() {
  111. if ('ontouchstart' in window || navigator.maxTouchPoints) {
  112. isMobile = true;
  113. window.addEventListener("touchstart", function (e) {
  114. var touchobj = e.changedTouches[0];
  115. mouseX = parseInt(touchobj.pageX - canvas.offsetLeft);
  116. mouseY = parseInt(touchobj.pageY - canvas.offsetTop);
  117. mousedown();
  118. });
  119.  
  120. window.addEventListener("touchend", function (e) {
  121. var touchobj = e.changedTouches[0];
  122. mouseX = parseInt(touchobj.pageX - canvas.offsetLeft);
  123. mouseY = parseInt(touchobj.pageY - canvas.offsetTop);
  124. mouseup();
  125. });
  126. window.addEventListener("touchmove", function (e) {
  127. var touchobj = e.changedTouches[0];
  128. mouseX = parseInt(touchobj.pageX - canvas.offsetLeft);
  129. mouseY = parseInt(touchobj.pageY - canvas.offsetTop);
  130. });
  131. } else {
  132. window.addEventListener("mousemove", function (e) {
  133. mouseX = e.pageX - canvas.offsetLeft;
  134. mouseY = e.pageY - canvas.offsetTop;
  135. });
  136.  
  137. if (typeof mousemove != "undefined") {
  138. window.addEventListener("mousemove", mousemove);
  139. }
  140. if (typeof mouseup != "undefined") {
  141. window.addEventListener("mouseup", mouseup);
  142. }
  143. if (typeof mousedown != "undefined") {
  144. window.addEventListener("mousedown", mousedown);
  145. }
  146.  
  147. if (typeof keydown != "undefined") {
  148. window.addEventListener("keydown", function (e) {
  149. isKeyPressed[e.keyCode] = 1;
  150. keydown(e.keyCode);
  151. });
  152. } else {
  153. window.addEventListener("keydown", function (e) {
  154. isKeyPressed[e.keyCode] = 1;
  155. });
  156. }
  157. if (typeof keyup != "undefined") {
  158. window.addEventListener("keyup", function (e) {
  159. isKeyPressed[e.keyCode] = 0;
  160. keyup(e.keyCode);
  161. });
  162. } else {
  163. window.addEventListener("keyup", function (e) {
  164. isKeyPressed[e.keyCode] = 0;
  165. });
  166. }
  167. }
  168. if (typeof draw == "undefined") {
  169. redraw = function () {
  170. context.clearRect(0, 0, canvas.width, canvas.height);
  171. context.globalAlpha = 1;
  172. context.fillStyle = "#FF0000";
  173. context.font = "20px Arial";
  174. context.fillText("Press <F12> for error info!", 40, 40);
  175. };
  176. }
  177. redraw();
  178. callupdate();
  179. };
  180.  
  181. </script>
  182. </body>
  183. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!