SHARE
TWEET

html + css

a guest Feb 20th, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
 
Top