0c567cd259
Found some issues when building for web using latest emscripten 1.38.30, traced the error and found that eglGetProcAdress does not return function pointers for VAO functionality, supported by extension. It requires more investigation but now it works (avoiding VAO usage)
258 lines
9.7 KiB
HTML
258 lines
9.7 KiB
HTML
<!doctype html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<title>raylib HTML5 GAME</title>
|
|
|
|
<meta name="title" content="raylib HTML5 GAME">
|
|
<meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
|
|
<meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<!-- Facebook metatags for sharing -->
|
|
<meta property="og:title" content="raylib HTML5 GAME">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image" content="https://www.raylib.com/common/img/raylib_logo.png">
|
|
<meta property="og:image" content="https://www.raylib.com/common/img/raylib_logo.png">
|
|
<meta property="og:url" content="https://www.raylib.com/games">
|
|
<meta property="og:site_name" content="raylib.com">
|
|
<meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
|
|
|
|
<!-- Twitter metatags for sharing -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:site" content="@raysan5">
|
|
<meta name="twitter:title" content="raylib HTML5 GAME">
|
|
<meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
|
|
<meta name="twitter:image" content="https://www.raylib.com/common/img/raylib_logo.png">
|
|
<meta name="twitter:url" content="https://www.raylib.com/common/img/raylib_logo.png">
|
|
|
|
<!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
|
|
<link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
|
|
|
|
<style>
|
|
body {
|
|
font-family: arial;
|
|
margin: 0;
|
|
padding: none;
|
|
}
|
|
|
|
#header_part {
|
|
width: 100%;
|
|
height: 80px;
|
|
background-color: #888888;
|
|
}
|
|
|
|
#logo {
|
|
width:64px;
|
|
height:64px;
|
|
float:left;
|
|
position:relative;
|
|
margin:10px;
|
|
background-image:url(https://www.raylib.com/common/img/raylib_logo_64x64.png);
|
|
}
|
|
|
|
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
|
div.emscripten { text-align: center; }
|
|
div.emscripten_border { border: 1px solid black; }
|
|
|
|
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
|
canvas.emscripten { border: 0px none; background: black; width: 100% }
|
|
|
|
#emscripten_logo {
|
|
display: inline-block;
|
|
margin: 0;
|
|
}
|
|
|
|
.spinner {
|
|
height: 30px;
|
|
width: 30px;
|
|
margin: 0;
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
-webkit-animation: rotation .8s linear infinite;
|
|
-moz-animation: rotation .8s linear infinite;
|
|
-o-animation: rotation .8s linear infinite;
|
|
animation: rotation 0.8s linear infinite;
|
|
border-left: 5px solid black;
|
|
border-right: 5px solid black;
|
|
border-bottom: 5px solid black;
|
|
border-top: 5px solid red;
|
|
|
|
border-radius: 100%;
|
|
background-color: rgb(245, 245, 245);
|
|
}
|
|
@-webkit-keyframes rotation {
|
|
from {-webkit-transform: rotate(0deg);}
|
|
to {-webkit-transform: rotate(360deg);}
|
|
}
|
|
@-moz-keyframes rotation {
|
|
from {-moz-transform: rotate(0deg);}
|
|
to {-moz-transform: rotate(360deg);}
|
|
}
|
|
@-o-keyframes rotation {
|
|
from {-o-transform: rotate(0deg);}
|
|
to {-o-transform: rotate(360deg);}
|
|
}
|
|
@keyframes rotation {
|
|
from {transform: rotate(0deg);}
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
|
|
#status {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-top: 30px;
|
|
margin-left: 20px;
|
|
font-weight: bold;
|
|
color: rgb(40, 40, 40);
|
|
}
|
|
|
|
#progress {
|
|
height: 20px;
|
|
width: 30px;
|
|
}
|
|
|
|
#controls {
|
|
display: inline-block;
|
|
float: right;
|
|
vertical-align: top;
|
|
margin-top: 30px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
#output {
|
|
width: 100%;
|
|
height: 140px;
|
|
margin: 0 auto;
|
|
margin-top: 10px;
|
|
display: block;
|
|
background-color: black;
|
|
color: rgb(37, 174, 38);
|
|
font-family: 'Lucida Console', Monaco, monospace;
|
|
outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="header_part">
|
|
<a id="logo" href="https://www.raylib.com"></a>
|
|
|
|
<div class="spinner" id='spinner'></div>
|
|
<div class="emscripten" id="status">Downloading...</div>
|
|
|
|
<span id='controls'>
|
|
<span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(false, false)"></span>
|
|
</span>
|
|
|
|
<div class="emscripten">
|
|
<progress value="0" max="100" id="progress" hidden=1></progress>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="emscripten_border">
|
|
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
|
</div>
|
|
|
|
<textarea id="output" rows="8"></textarea>
|
|
|
|
<script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
|
|
<script type='text/javascript'>
|
|
function SaveFileFromMEMFSToDisk(memoryFSname, localFSname) // This can be called by C/C++ code
|
|
{
|
|
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
var data = FS.readFile(memoryFSname);
|
|
var blob;
|
|
|
|
if (isSafari) blob = new Blob([data.buffer], {type: "application/octet-stream"});
|
|
else blob = new Blob([data.buffer], {type: "application/octet-binary"});
|
|
|
|
// NOTE: SaveAs Dialog is a browser setting. For example, in Google Chrome,
|
|
// in Settings/Advanced/Downloads section you have a setting:
|
|
// 'Ask where to save each file before downloading' - which you can set true/false.
|
|
// If you enable this setting it would always ask you and bring the SaveAs Dialog
|
|
saveAs(blob, localFSname);
|
|
}
|
|
</script>
|
|
<script type='text/javascript'>
|
|
var statusElement = document.querySelector('#status');
|
|
var progressElement = document.querySelector('#progress');
|
|
var spinnerElement = document.querySelector('#spinner');
|
|
var Module = {
|
|
preRun: [],
|
|
postRun: [],
|
|
print: (function() {
|
|
var element = document.querySelector('#output');
|
|
if (element) element.value = ''; // clear browser cache
|
|
return function(text) {
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
// These replacements are necessary if you render to raw HTML
|
|
//text = text.replace(/&/g, "&");
|
|
//text = text.replace(/</g, "<");
|
|
//text = text.replace(/>/g, ">");
|
|
//text = text.replace('\n', '<br>', 'g');
|
|
console.log(text);
|
|
if (element) {
|
|
element.value += text + "\n";
|
|
element.scrollTop = element.scrollHeight; // focus on bottom
|
|
}
|
|
};
|
|
})(),
|
|
printErr: function(text) {
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
|
dump(text + '\n'); // fast, straight to the real console
|
|
} else {
|
|
console.error(text);
|
|
}
|
|
},
|
|
canvas: (function() {
|
|
var canvas = document.querySelector('#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
|
|
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
|
|
return canvas;
|
|
})(),
|
|
setStatus: function(text) {
|
|
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
|
if (text === Module.setStatus.text) return;
|
|
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
|
var now = Date.now();
|
|
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
|
if (m) {
|
|
text = m[1];
|
|
progressElement.value = parseInt(m[2])*100;
|
|
progressElement.max = parseInt(m[4])*100;
|
|
progressElement.hidden = false;
|
|
spinnerElement.hidden = false;
|
|
} else {
|
|
progressElement.value = null;
|
|
progressElement.max = null;
|
|
progressElement.hidden = true;
|
|
if (!text) spinnerElement.style.display = 'none';
|
|
}
|
|
statusElement.innerHTML = text;
|
|
},
|
|
totalDependencies: 0,
|
|
monitorRunDependencies: function(left) {
|
|
this.totalDependencies = Math.max(this.totalDependencies, left);
|
|
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
|
}
|
|
};
|
|
Module.setStatus('Downloading...');
|
|
window.onerror = function(event) {
|
|
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
|
Module.setStatus('Exception thrown, see JavaScript console');
|
|
spinnerElement.style.display = 'none';
|
|
Module.setStatus = function(text) {
|
|
if (text) Module.printErr('[post-exception status] ' + text);
|
|
};
|
|
};
|
|
</script>
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html> |