OK, so i took out the nice javascript effects so as not to step on your toes Phaelax
This can be named index.html, it will pick up the agkplayer file in the folder
<!doctype html>
<html lang="en-us">
<head>
<title>AppGameKit Studio Web App</title>
<meta charset="windows-1252"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no"/>
<style>
div, a, span {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
min-height: 100%;
background-color: rgb(65,166,178);
background: rgb(65,166,178);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(65,166,178) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(65,166,178) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%,rgba(40,135,146) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#306fd3', endColorstr='#240515',GradientType=1 );
margin:0;
}
body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.25em;
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
position: relative;
margin:0;
}
body:before {
content: "";
width: 100%;
height: 100%;
position: fixed;
opacity: .33;
background: url("dots2.png") 0 0 / 40% no-repeat;
z-index: 0;
}
html:before {
content: "";
width: 100%;
height: 100%;
position: fixed;
opacity: .33;
background: url("dots2.png") 0 0 / 40% no-repeat;
transform: rotate(180deg);
z-index: 0;
}
.container {
position: relative;
text-align: center;
margin: 0;
}
.footer {
width: 500px;
margin: 0 auto;
padding: 20px 20px;
position: relative;
text-align: center;
}
.footer a.link {
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
padding: 8px 10px;
border-radius: 6px;
color: #ccc;
-moz-transition: all .3s;
transition: all .3s;
}
.footer a.link:hover {
color: #fff;
background-color: rgba(0,0,0,.5);
}
.footer a.logo {
display: block;
margin: 0 auto;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.2);
-moz-transition: all .3s;
transition: all .3s;
}
.footer img {
height: 54px;
display: block;
margin: 0 auto;
}
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { background: #000; border: 0px none; padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
</style>
<script type='text/javascript'>
var Module;
window.addEventListener("DOMContentLoaded", function(){
btnplay.addEventListener('click', (e)=>{
btnplay.remove();
loadGame();
});
});
function loadGame(){
var agkStatus = document.getElementById("agkstatus");
if ( agkStatus )
{
agkStatus.textContent = "Loading...";
}
Module = {
preRun: [],
postRun: [],
print: function(text) {},
printErr: function(text) {},
canvas: (function() {
var canvas = document.getElementById('canvas');
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
return canvas;
})(),
setStatus: function(text) {},
totalDependencies: 0,
monitorRunDependencies: function(left) {}
};
window.onerror = function(text) {
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
var agkStatus = document.getElementById("agkstatus");
if ( agkStatus )
{
agkStatus.style.color = "Red";
agkStatus.textContent = text;
console.log(">>> "+text);
}
//alert(text);
};
var script = document.createElement('script');
script.src = "AGKPlayer.asm.js";
script.onload = function() {
setTimeout(function() {
(function() {
var memoryInitializer = 'AGKPlayer.html.mem';
if (typeof Module['locateFile'] === 'function') {
memoryInitializer = Module['locateFile'](memoryInitializer);
} else if (Module['memoryInitializerPrefixURL']) {
memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
}
var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
xhr.open('GET', memoryInitializer, true);
xhr.responseType = 'arraybuffer';
xhr.send(null);
})();
var script = document.createElement('script');
script.src = "AGKPlayer.js";
document.body.appendChild(script);
document.getElementById('fslink').style.visibility = "visible";
}, 1); // delaying even 1ms is enough to allow compilation memory to be reclaimed
};
document.body.appendChild(script);
}
</script>
</head>
<body>
<div class="container">
<div><span id="agkstatus" style="color:#7f7f7f;position:absolute;"></span></div>
<div style="display: inline-block; border: 1px solid; margin: 0 auto;">
<button id="btnplay" class='glowing-btn'><span class='glowing-txt'>P<span class='faulty-letter'>L</span>AY GAME</span></button>
<canvas class="emscripten" id="canvas" width="800" height="600" oncontextmenu="event.preventDefault()"></canvas>
<video crossOrigin="anonymous" style="display:none" id="AGKVideo" src=""></video>
</div>
</div>
<!--
<div class="footer">
<a class="logo" href="https://www.appgamekit.com/studio" target="_blank"><img src="agks-logo-white.svg" alt="Made with AppGameKit Studio"></a>
<a class="link" id="fslink" style="visibility:hidden" href="#" onclick="Module.requestFullScreen(false,true)">Run in fullscreen mode</a>
<a class="link" href="https://www.appgamekit.com/studio" target="_blank">Learn more about AppGameKit Studio</a>
</div>
-->
</body>
</html>
and my code cleaned up a bit (to be used with images and sound attached on the first post)
// Project: testsound24c
// Created: 24-05-11
// show all errors
SetErrorMode(2)
// set window properties
SetWindowTitle( "testsound24c" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 60, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 )
SetClearColor( 0, 0, 200 ) //red green blue to 255
LoadImage( 60, "check.png" )
CreateSprite(60,60)
SetSpriteSize( 60, -1, -1 )
SetSpriteDepth(60,7)
SetSpriteOffset(60,GetspriteWidth(60)/2,GetSpriteHeight(60)/2)
SetSpritePositionByOffset ( 60, 512, 384 )
//SetSpriteVisible(60,0)
LoadImage( 61, "soundplaying.png" )
CreateSprite(61,61)
SetSpriteSize( 61, -1, -1 )
SetSpriteDepth(61,6)
SetSpriteOffset(61,GetspriteWidth(61)/2,GetSpriteHeight(61)/2)
SetSpritePositionByOffset ( 61, 500, 274 )
SetSpriteVisible(61,0)
SetSoundSystemVolume(90)
mySoundb = LoadSoundOgg("popa.ogg")
SetSoundSystemVolume(10)
do
Pressc=0 //first pres
mapxtemp=GetPointerX()
mapytemp=GetPointerY()
if GetPointerState()=1 // if left mouse button currently down
Pressc = GetSpriteHit(mapxtemp, mapytemp)
else
if presslock=1 then presslock=0 // not used here
endif
if presstate=0 and pressc=60
presstate=1 //timer set
SetSpriteVisible(61,1)
button6=(PlaySound (mySoundb))
endif
// BUTTON TIMER ____________________________________________________
// timer for clicks
if presstate>0
presstate=presstate+1
if presstate>50
presstate=0
SetSpriteVisible(61,0)
endif
endif
Print( ScreenFPS() )
Sync()
loop
Note: this also sets it to full screen automatically upon start.
Might have to revisit this full screen thing
and thanks VirtualNomad
Yay There be sound here!
https://boyar.net/sound8/
Edit : Is there an easy way to fix the AGKplayer loading Error:
TypeError: document.getElementById(...) is Null
Edit: this may work to cut out the error, not sure if it cuts out the other errors:
Javascript change:
window.onerror = function(text) {
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
x = document.getElementById("agkstatus"); agkStatus=x;
if(typeof x !== 'undefined' && x !== null) {
x.innerHTML = value;
}
if ( x )
{
x.style.color = "Red";
x.textContent = text;
console.log(">>> "+text);
}
//alert(text);
};
