littlejsengine
Version:
LittleJS - Tiny and Fast HTML5 Game Engine
56 lines (50 loc) • 1.46 kB
HTML
<head>
<title>LittleJS HTML Menu Example</title>
<meta charset=utf-8>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=mobile-web-app-capable content=yes>
<link rel=icon type=image/png href=../favicon.png>
<style>
.topDiv
{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menuDiv
{
gap: 20px;
padding: 30px;
display: flex;
align-items: center;
flex-direction: column;
border: 3px solid black;
background-color: white;
}
</style>
</head><body>
<!-- setup html menu system -->
<div class="topDiv">
<div id="menu" class="menuDiv">
<b style="font-size:50px">Test Menu</b>
This is an example menu using html elements.
<input value="Test Input" onchange="alert('New text: ' + this.value)">
<input type="range" onchange="alert('New value: ' + this.value)">
<button onclick="alert('Button was clicked!')">Test Button</button>
<button onclick="setMenuVisible(false)">Exit Menu</button>
</div>
</div>
<script>
// html menu system
const getMenuVisible =()=> menu.style.visibility != 'hidden';
const setMenuVisible =(visible)=> menu.style.visibility = visible ? '' : 'hidden';
// hide menu at start
setMenuVisible(false);
</script>
<!-- Add your game scripts here -->
<script src=../../dist/littlejs.js?1117></script>
<script src=game.js?1117></script>