shaku
Version:
A simple and effective JavaScript game development framework that knows its place!
83 lines (66 loc) • 2.91 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Shaku</title>
<meta name="description" content="Shaku - a simple and easy-to-use javascript library for videogame programming.">
<meta name="author" content="Ronen Ness">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="noselect" style="color:white">
<button class="view-code-btn" onclick="showSampleCode();">View Code</button>
<h1 class="demo-title">Shaku Gfx Demo: Fullscreen</h1>
<p>This demo shows how to make your canvas and renderer fullscreen, ie setting resolution to the entire size of the page.<br />
Combine this with JS `element.requestFullscreen()` to get a complete fullscreen experience (you can hit F11 on chrome to see how it looks like).</p>
<canvas id="main-canvas" style="display:block; position:fixed; left:0px; top:0px; z-index: -100;"></canvas>
<!-- include shaku -->
<script src="js/demos.js"></script>
<script src="js/shaku.js"></script>
<!-- demo code -->
<script>
async function runGame()
{
// init shaku
Shaku.gfx.setCanvas(document.getElementById('main-canvas'));
await Shaku.init();
// load sprite's texture asset
let texture = await Shaku.assets.loadTexture('assets/shaku.png');
// create sprites batch
let spritesBatch = new Shaku.gfx.SpriteBatch();
// do a single main loop step
function step()
{
// start new frame and clear screen
Shaku.startFrame();
Shaku.gfx.clear(Shaku.utils.Color.cornflowerblue);
// draw the texture
spritesBatch.begin();
spritesBatch.drawQuad(texture, new Shaku.utils.Vector2(400, 300), 256);
spritesBatch.end();
// make fullscreen
Shaku.gfx.maximizeCanvasSize();
// end frame and request next frame
Shaku.endFrame();
Shaku.requestAnimationFrame(step);
}
// start main loop
step();
}
runGame();
</script>
</div>
<!-- code example part -->
<div id="sample-code-modal" class="modal">
<div class="modal__overlay jsOverlay"></div>
<div class="modal__container">
<p class="noselect">The following will make the renderer and cavas size cover the entire HTML doc.</p>
<pre><code class="language-js">// note: its ok to call this every frame. it won't do anything if nothing changed.
Shaku.gfx.maximizeCanvasSize();</code></pre>
<button class="modal__close" onclick="closeModal('sample-code-modal')">✕</button>
</div>
</div>
<link href="prism/prism.css" rel="stylesheet" />
<script src="prism/prism.js"></script>
</body>
</html>