bevy-game

A bevy game
git clone git://archive.git.mtrnord.blog/MTRNord/bevy-game.git
Log | Files | Refs | README | LICENSE

index.html (3381B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="utf-8"/>
      5     <style>
      6         body {
      7             background: linear-gradient(
      8                     135deg,
      9                     white 0%,
     10                     white 49%,
     11                     black 49%,
     12                     black 51%,
     13                     white 51%,
     14                     white 100%
     15             ) repeat;
     16             background-size: 20px 20px;
     17             margin: 0;
     18         }
     19         canvas {
     20             background-color: white;
     21         }
     22     </style>
     23     <title>Bevy game</title> <!-- ToDo -->
     24 </head>
     25 <body>
     26     <script>
     27         // Insert hack to make sound autoplay on Chrome as soon as the user interacts with the tab:
     28         // https://developers.google.com/web/updates/2018/11/web-audio-autoplay#moving-forward
     29 
     30         // the following function keeps track of all AudioContexts and resumes them on the first user
     31         // interaction with the page. If the function is called and all contexts are already running,
     32         // it will remove itself from all event listeners.
     33         (function () {
     34             // An array of all contexts to resume on the page
     35             const audioContextList = [];
     36 
     37             // An array of various user interaction events we should listen for
     38             const userInputEventNames = [
     39                 "click",
     40                 "contextmenu",
     41                 "auxclick",
     42                 "dblclick",
     43                 "mousedown",
     44                 "mouseup",
     45                 "pointerup",
     46                 "touchend",
     47                 "keydown",
     48                 "keyup",
     49             ];
     50 
     51             // A proxy object to intercept AudioContexts and
     52             // add them to the array for tracking and resuming later
     53             self.AudioContext = new Proxy(self.AudioContext, {
     54                 construct(target, args) {
     55                     const result = new target(...args);
     56                     audioContextList.push(result);
     57                     return result;
     58                 },
     59             });
     60 
     61             // To resume all AudioContexts being tracked
     62             function resumeAllContexts(_event) {
     63                 let count = 0;
     64 
     65                 audioContextList.forEach((context) => {
     66                     if (context.state !== "running") {
     67                         context.resume();
     68                     } else {
     69                         count++;
     70                     }
     71                 });
     72 
     73                 // If all the AudioContexts have now resumed then we unbind all
     74                 // the event listeners from the page to prevent unnecessary resume attempts
     75                 // Checking count > 0 ensures that the user interaction happens AFTER the game started up
     76                 if (count > 0 && count === audioContextList.length) {
     77                     userInputEventNames.forEach((eventName) => {
     78                         document.removeEventListener(eventName, resumeAllContexts);
     79                     });
     80                 }
     81             }
     82 
     83             // We bind the resume function for each user interaction
     84             // event on the page
     85             userInputEventNames.forEach((eventName) => {
     86                 document.addEventListener(eventName, resumeAllContexts);
     87             });
     88         })();
     89     </script>
     90     <script type="module">
     91         // load the actual game
     92         import init from './target/wasm.js'
     93         init();
     94     </script>
     95 </body>
     96 </html>