API tools faq
paste
Advertisement
Alex_ADEdge

JS13K 2025 - Input v0.1

Alex_ADEdge
Jun 17th, 2025 (edited)
228
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.25 KB | None | 0 0
raw download clone embed print report
  1. <!-- JS13K, 2025, By AlexDeltaDev twitter.com/Alex_ADEdge -->
  2. <!-- Based on this mapping by XEM: https://xem.github.io/articles/jsgamesinputs.html -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.     <head>
  6.         <meta charset="UTF-8">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <title>JS13K-Warmup-Template</title>
  9.         <style>
  10.             html, body {
  11.                 width: 100%;
  12.                 height: 100%;
  13.                 touch-action: none;
  14.                 overflow: hidden;
  15.                 display: flex;
  16.                 justify-content: center;
  17.                 align-items: center;  
  18.                 background-color: #272744;
  19.             }
  20.             #title {
  21.                 position: absolute;
  22.                 bottom: 3px;
  23.                 left: 25px;
  24.                 color: aliceblue;
  25.                 font-family: "Lucida Console", "Courier New", monospace;
  26.             }
  27.             #title2 {
  28.                 position: absolute;
  29.                 bottom: 24px;
  30.                 left: 25px;
  31.                 color: aliceblue;
  32.                 font-family: "Lucida Console", "Courier New", monospace;
  33.             }
  34.             canvas {
  35.                 display: block;
  36.                 margin: auto;
  37.                 /* cursor: none; */
  38.                 background-color: #111111;
  39.             }
  40.             @media only screen and (min-device-width: 320px) and (max-device-width: 768px) and (orientation: portrait) {
  41.                 canvas {
  42.                     transform: rotate(90deg);
  43.                     transform-origin: center center;
  44.                 }
  45.             }
  46.         </style>
  47.         <!-- <link rel="stylesheet" href="style.css"> -->
  48.         <!-- <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> -->
  49.         <!-- <script type="module" src="./src/main.js"></script> -->
  50.         <script>      
  51.             var up = false, right = false, down = false, left = false; // keyboard values
  52.             var c_up = false, c_right = false, c_down = false, c_left = false; // controller values
  53.             // Baseline variables
  54.             var mobile, app, cvs, cx, w, h, asp, asp2, rect, rng, seed, mouseX, mouseY;
  55.             // Scalings
  56.             var w2 = 960; var h2 = 540;
  57.             // Toggles
  58.             var debug = true;
  59.             var webGL = true;
  60.             //GamePad
  61.             var gp = navigator.getGamepads()[0];
  62.  
  63.             // App Setup
  64.             window.onload = function()
  65.             {
  66.                 initSetup();
  67.             }
  68.  
  69.             function initSetup()
  70.             {
  71.                 console.log("Initilizing...");
  72.                 cvs = document.getElementById('cvs');
  73.                 cx = cvs.getContext("2d");
  74.                 w = cvs.clientWidth;
  75.                 h = cvs.clientHeight;
  76.                 asp = w/h; // Aspect ratio of window
  77.                 asp2 = w2/h2; // Aspect ratio of inner cvs
  78.                
  79.                 cx.imageSmoothingEnabled = false; // gritty
  80.                
  81.                 // setup listeners, check for game controller
  82.                 setupEventListeners(cvs);
  83.                 if (!gp) { console.log("Gamepad not found (press a button on the controller to connect)"); }
  84.  
  85.                 tick();
  86.             }
  87.  
  88.             function tick(timestamp)
  89.             {
  90.                 cx.clearRect(0, 0, w, h);
  91.                
  92.                 // Update gamepad state every loop
  93.                 gp = navigator.getGamepads()[0];
  94.                 if (gp) {
  95.                     checkGamePad();
  96.                 }
  97.  
  98.                 // Draw debug outputs to cavans
  99.                 cx.font = '16px monospace';
  100.                 cx.fillStyle = '#fff';
  101.                 if(up || c_up) { cx.fillStyle = '#3f3'; }
  102.                 cx.fillText('Up: ' + (up || c_up), 10, 30);
  103.  
  104.                 cx.fillStyle = '#fff';
  105.                 if(down || c_down) { cx.fillStyle = '#3f3'; }
  106.                 cx.fillText('Down: ' + (down || c_down), 10, 50);
  107.  
  108.                 cx.fillStyle = '#fff';
  109.                 if(left || c_left) { cx.fillStyle = '#3f3'; }
  110.                 cx.fillText('Left: ' + (left || c_left), 10, 70);
  111.  
  112.                 cx.fillStyle = '#fff';
  113.                 if(right || c_right) { cx.fillStyle = '#3f3'; }
  114.                 cx.fillText('Right: ' + (right || c_right), 10, 90);
  115.  
  116.                 // Request next frame, ie r loop
  117.                 requestAnimationFrame(tick);
  118.             }
  119.  
  120.             // Keydown listener
  121.             onkeydown = (e) => {
  122.                 const k = e.key.toLowerCase();
  123.                 // Up (up / W / Z)
  124.                 if (k === "arrowup" || k === "w" || k === "z") up = true;
  125.                 // Right (right / D)
  126.                 if (k === "arrowright" || k === "d") right = true;
  127.                 // Down (down / S)
  128.                 if (k === "arrowdown" || k === "s") down = true;
  129.                 // Left (left / A / Q)
  130.                 if (k === "arrowleft" || k === "a" ||k === "q") left = true;
  131.                 // console.log("E: " + e.key);
  132.             }
  133.  
  134.             // Keyup listener
  135.             onkeyup = (e) => {
  136.                 const k = e.key.toLowerCase();
  137.                 // Up
  138.                 if (k === "arrowup" || k === "w" || k === "z") up = false;
  139.                 // Right
  140.                 if (k === "arrowright" || k === "d") right = false;
  141.                 // Down
  142.                 if (k === "arrowdown" || k === "s") down = false;
  143.                 // Left
  144.                 if(k === "arrowleft" || k === "a" || k === "q") left = false;
  145.                 // console.log("UP: " + up);
  146.             }
  147.  
  148.             function checkGamePad() {
  149.                 const b = gp.buttons;
  150.                 //debug all buttons
  151.                 // console.log(JSON.stringify(gp.buttons.map(b => b.value), null, 2));
  152.                 // b.forEach((btn, index) => {
  153.                 //     if (btn.pressed) console.log("Button pressed:", index);
  154.                 // });
  155.  
  156.                 // D-Pad buttons
  157.                 c_up    = b[12]?.pressed;
  158.                 c_down  = b[13]?.pressed;
  159.                 c_left  = b[14]?.pressed;
  160.                 c_right = b[15]?.pressed;
  161.        
  162.                 // Left stick test
  163.                 const lx = gp.axes[0], ly = gp.axes[1];
  164.                 if (lx < -0.5) c_left = true;
  165.                 if (lx >  0.5) c_right = true;
  166.                 if (ly < -0.5) c_up = true;
  167.                 if (ly >  0.5) c_down = true;
  168.             }
  169.  
  170.             function setupEventListeners(c) {
  171.                 // Keyboard (WASD/ZQSD/Arrows) Events
  172.                 c.addEventListener('keydown', onkeydown);
  173.                 c.addEventListener('keyup', onkeyup);
  174.  
  175.                 // Gamepad/Controller Events
  176.                 window.addEventListener("gamepadconnected", (e) => {
  177.                     // console.log("Gamepad connected:", e.gamepad);
  178.                     console.log(
  179.                         "Gamepad connected at index %d: %s. %d buttons, %d axes.",
  180.                         e.gamepad.index,
  181.                         e.gamepad.id,
  182.                         e.gamepad.buttons.length,
  183.                         e.gamepad.axes.length,
  184.                     );
  185.                     gp = navigator.getGamepads()[0];
  186.                 });
  187.                 window.addEventListener("gamepaddisconnected", e => {
  188.                     console.log("Gamepad disconnected:", e.gamepad.id);
  189.                 });
  190.  
  191.                 // Mouse/Touch Events
  192.                 c.addEventListener('pointermove', (e) => {
  193.                     // console.log("pointermove");
  194.                 });
  195.                 c.addEventListener('pointerdown', (e) => {
  196.                     // console.log("pointerdown");
  197.                 });
  198.                 c.addEventListener('pointerup', (e) => {
  199.                     // console.log("pointerup");
  200.                 });
  201.                 c.addEventListener('pointercancel', (e) => {
  202.                     // The same as pointer up, but for mobile specific cases
  203.                     // console.log("pointercancel");
  204.                 });
  205.             }
  206.         </script>
  207.     </head>
  208.     <body>
  209.         <h3 id="title">JS13K 2025 (Warmup/Template)</h3>
  210.         <p id="title2">v.0.0-</p>
  211.         <canvas id="cvs" width="960" height="540"></canvas>
  212.     </body>
  213. </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!