Add script to code/loader.html to enable a no-arrow-scroll mode by clicking canvas

1 files changed, 41 insertions, 0 deletions

diff --git a/examples/core/loader.html b/examples/core/loader.html
index 76394d9..43e1de3 100644
--- a/examples/core/loader.html
+++ b/examples/core/loader.html
@@ -238,5 +238,46 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script>
+          window.addEventListener('DOMContentLoaded', () => {
+            var clickedInCanvas = false;
+            var warning = document.createElement('div');
+            warning.innerHTML = 'Arrow key scrolling disabled. Click outside canvas or press Escape to enable again.';
+            warning.style.padding = '1em';
+            warning.style.color = 'white';
+            warning.style.backgroundColor = 'red';
+            warning.style.position = 'fixed';
+            warning.style.bottom = 0;
+            warning.style.left = 0;
+            warning.style.right = 0;
+            warning.style.textAlign = 'center';
+            warning.id = 'no-scroll-warning-20220323';
+            warning.style.display = 'none';
+            document.body.appendChild(warning);
+
+            function update() {
+              warning.style.display = clickedInCanvas ? 'block' : 'none';
+            }
+
+            window.addEventListener('click', (ev) => {
+              clickedInCanvas = ev.target.tagName.toUpperCase() == 'CANVAS';
+              update();
+            });
+            window.addEventListener("keydown", (ev) => {
+              if (clickedInCanvas) {
+                if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(ev.code) > -1) {
+                  ev.preventDefault();
+                }
+              } 
+              if (ev.code == 'Escape') {
+                clickedInCanvas = false;
+                update();
+              }
+            }, false);
+
+          });
+        </script>        
     </body>
 </html>
\ No newline at end of file