API tools faq
paste
Advertisement
Alex_ADEdge

JS13K 2025 - Input v0.2

Alex_ADEdge
Jun 17th, 2025 (edited)
573
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.95 KB | None | 0 0
raw download clone embed print report
  1. <!-- JS13K, 2025, By AlexDeltaDev twitter.com/Alex_ADEdge -->
  2. <!-- Input setup 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> #title,#title2{position:absolute;left:25px;color:#f0f8ff;font-family:"Lucida Console","Courier New",monospace}body,html{width:100%;height:100%;touch-action:none;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#272744}#title{bottom:3px}#title2{bottom:24px}canvas{display:block;margin:auto;background-color:#111}@media only screen and (min-device-width:320px) and (max-device-width:768px) and (orientation:portrait){canvas{transform:rotate(90deg);transform-origin:center center}}</style>
  10.         <script>      
  11.             //////////////////////////////////////////////////////////
  12.             //                        MAIN                          //
  13.             //////////////////////////////////////////////////////////
  14.             // Baseline variables
  15.             var mobile, app, cvs, cx, w, h, asp, asp2, rect, rng, seed, mouseX, mouseY;
  16.             // Scalings
  17.             var w2 = 960; var h2 = 540;
  18.             // Toggles
  19.             var debug = true;
  20.             var webGL = true;
  21.             // App Setup
  22.             window.onload = function() {
  23.                 initSetup();
  24.             }
  25.             function initSetup()
  26.             {
  27.                 console.log("Initilizing...");
  28.                 cvs = document.getElementById('cvs');
  29.                 cx = cvs.getContext("2d");
  30.                 w = cvs.clientWidth;
  31.                 h = cvs.clientHeight;
  32.                 asp = w/h; // Aspect ratio of window
  33.                 asp2 = w2/h2; // Aspect ratio of inner cvs
  34.                 cx.imageSmoothingEnabled = false; // gritty
  35.                 // Setup event listeners/input
  36.                 setupEventListeners(cvs);
  37.                 tick();
  38.             }
  39.             function tick(timestamp)
  40.             {
  41.                 cx.clearRect(0, 0, w, h);
  42.  
  43.                 // Handle control inputs
  44.                 checkGamePadMain();
  45.                 const { uu, dd, ll, rr } = getInputs();
  46.                 // Draw debug outputs to cavans
  47.                 cx.font = '16px monospace';
  48.                 cx.fillStyle = uu ? '#3f3' : '#fff';
  49.                 cx.fillText('Up: ' + uu, 10, 30);
  50.                 cx.fillStyle = dd ? '#3f3' : '#fff';
  51.                 cx.fillText('Down: ' + dd, 10, 50);
  52.                 cx.fillStyle = ll ? '#3f3' : '#fff';
  53.                 cx.fillText('Left: ' + ll, 10, 70);
  54.                 cx.fillStyle = rr ? '#3f3' : '#fff';
  55.                 cx.fillText('Right: ' + rr, 10, 90);
  56.  
  57.                 requestAnimationFrame(tick);
  58.             }
  59.             //////////////////////////////////////////////////////////
  60.             //                   Input Setup                        //
  61.             //////////////////////////////////////////////////////////
  62.             let u=0,d=0,l=0,r=0;
  63.             let cu=0,cd=0,cl=0,cr=0;
  64.             //GamePad
  65.             var p=navigator.getGamepads()[0]
  66.  
  67.             //120 bytes (whole function)
  68.             onkeydown=n=>{let e=n.key;u|="U"==e[5]|"w"==e|"z"==e,d|="D"==e[5]|"s"==e,l|="L"==e[5]|"a"==e|"q"==e,r|="R"==e[5]|"d"==e}
  69.             onkeyup=e=>{let k=e.key;u&=!("U"==k[5]|"w"==k|"z"==k),d&=!("D"==k[5]|"s"==k),l&=!("L"==k[5]|"a"==k|"q"==k),r&=!("R"==k[5]|"d"==k)};
  70.  
  71.             function setupEventListeners(c) {
  72.                 window.addEventListener('keydown', onkeydown);
  73.                 window.addEventListener('keyup', onkeyup);
  74.  
  75.                 window.addEventListener("gamepadconnected", (e) => {
  76.                     console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
  77.                         e.gamepad.index, e.gamepad.id,
  78.                         e.gamepad.buttons.length, e.gamepad.axes.length
  79.                     );
  80.                     p=navigator.getGamepads()[0];
  81.                 });
  82.                 // window.addEventListener("gamepaddisconnected", e => {
  83.                 //     console.log("Gamepad disconnected:", e.gamepad.id);
  84.                 // });
  85.                 if (!p) { console.log("Gamepad not found (press a button on the controller to connect)"); }
  86.  
  87.                 // change to window.addEventListener ?
  88.                 c.addEventListener('pointermove', (e) => {});
  89.                 c.addEventListener('pointerdown', (e) => {});
  90.                 c.addEventListener('pointerup', (e) => {});
  91.                 c.addEventListener('pointercancel', (e) => {});
  92.             }
  93.             function checkGamePadMain() {
  94.                 p=navigator.getGamepads()[0]
  95.                 if(p){
  96.                     let b=p.buttons
  97.                     // Debug controller buttons
  98.                     // console.log(JSON.stringify(p.buttons.map(b => b.value), null, 2));
  99.                     // b.forEach((btn, index) => {
  100.                     //     if (btn.pressed) console.log("Button pressed:", index);
  101.                     // });
  102.                     //Reset controller bits
  103.                     cu=cd=cl=cr=0
  104.                     //handle DPad and left analoge
  105.                     cu |= b[12]?.pressed || p.axes[1] < -0.5
  106.                     cd |= b[13]?.pressed || p.axes[1] > 0.5
  107.                     cl |= b[14]?.pressed || p.axes[0] < -0.5
  108.                     cr |= b[15]?.pressed || p.axes[0] > 0.5
  109.                 }
  110.             }
  111.             function getInputs() {
  112.                 return {
  113.                 uu: u || cu,
  114.                 dd: d || cd,
  115.                 ll: l || cl,
  116.                 rr: r || cr
  117.                 };
  118.             }
  119.         </script>
  120.     </head>
  121.     <body>
  122.         <h3 id="title">JS13K 2025 (Warmup/Template)</h3>
  123.         <p id="title2">v.0.2x</p>
  124.         <canvas id="cvs" width="960" height="540"></canvas>
  125.     </body>
  126. </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!