sigonasr2
/
olcPixelGameEngine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added F11 fullscreen functionality

Browse Source
pull/266/head
FalcoDJ 3 years ago committed by GitHub
parent 7a20524ae4
commit 4a95c2496a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 99 additions and 62 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 161
      WASM/basic_template.html

161
WASM/basic_template.html
Unescape View File

@ -1,77 +1,114 @@
<!doctype html> <!doctype html>
<html lang="en-us"> <html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Emscripten-Generated Code</title>
<style>
html,body { width: 100%; height: 100%; }
body { font-family: arial; margin: 0; padding: 0; background: #000; }
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten_border { border: none; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */ <head>
canvas.emscripten { border: 0px none; background-color: black; } <meta name="viewport" content="width=device-width, initial-scale=1">
</style> <meta charset="utf-8">
</head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body> <title>Emscripten Generated Code</title>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> <style>
<script type='text/javascript'> html,
var Module = { body {
preRun: [], width: 100%;
postRun: [], height: 100%;
canvas: (function() { }
var canvas = document.getElementById('canvas');
body {
font-family: arial;
margin: 0;
padding: 0;
background: #000;
}
.emscripten {
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
div.emscripten_border {
border: none;
}
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten {
border: 0px none;
background-color: black;
}
</style>
</head>
// As a default initial behavior, pop up an alert when webgl context is lost. To make your <body>
// application robust, you may want to override this behavior before shipping! <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2 <script type='text/javascript'>
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); function openFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
var Module = {
preRun: [],
postRun: [],
canvas: (function() {
const canvas = document.querySelector('canvas');
return canvas; // As a default initial behavior, pop up an alert when webgl context is lost. To make your
})(), // application robust, you may want to override this behavior before shipping!
}; // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
</script> canvas.addEventListener("webglcontextlost", function(e) {
<script async type="text/javascript" src="./pge.js"></script> alert('WebGL context lost. You will need to reload the page.');
<script type="text/javascript"> e.preventDefault();
Module.canvas.addEventListener("resize", (e) => { }, false);
canvas.addEventListener("keydown", (e) => {
if (e.key === "F11") {
openFullscreen(canvas);
}
});
var viewWidth = e.detail.width; return canvas;
var viewHeight = e.detail.width / Module._olc_WindowAspectRatio; })(),
};
</script>
<script async type="text/javascript" src="./pge.js"></script>
<script type="text/javascript">
Module.canvas.addEventListener("resize", (e) => {
if(viewHeight > e.detail.height) var viewWidth = e.detail.width;
{ var viewHeight = e.detail.width / Module._olc_WindowAspectRatio;
viewHeight = e.detail.height;
viewWidth = e.detail.height * Module._olc_WindowAspectRatio;
}
// update dom attributes if (viewHeight > e.detail.height) {
Module.canvas.setAttribute("width", viewWidth); viewHeight = e.detail.height;
Module.canvas.setAttribute("height", viewHeight); viewWidth = e.detail.height * Module._olc_WindowAspectRatio;
}
var top = (e.detail.height - viewHeight) / 2; // update dom attributes
var left = (e.detail.width - viewWidth) / 2; Module.canvas.setAttribute("width", viewWidth);
Module.canvas.setAttribute("height", viewHeight);
// update styles var top = (e.detail.height - viewHeight) / 2;
Module.canvas.style.position = "fixed"; var left = (e.detail.width - viewWidth) / 2;
Module.canvas.style.top = top.toString() + "px";
Module.canvas.style.left = left.toString() + "px";
Module.canvas.style.width = "";
Module.canvas.style.height = "";
// trigger PGE update // update styles
Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight); Module.canvas.style.position = "fixed";
Module.canvas.style.top = top.toString() + "px";
Module.canvas.style.left = left.toString() + "px";
Module.canvas.style.width = "";
Module.canvas.style.height = "";
// ensure canvas has focus // trigger PGE update
Module.canvas.focus(); Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight);
e.preventDefault();
});
</script>
</body> // ensure canvas has focus
</html> Module.canvas.focus();
e.preventDefault();
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save