shaku
Version:
A simple and effective JavaScript game development framework that knows its place!
231 lines (187 loc) • 8.93 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">
<button class="view-code-btn" onclick="showSampleCode();">View Code</button>
<h1 class="demo-title">Shaku Input Demo: Basic Input</h1>
<p>This demo demonstrate how to use basic keyboard and mouse input with Shaku.</p>
<p id="mouse_state"></p>
<p>Keys currently down (marked in red):</p>
<div id="virtual-keyboard">
</div>
<p>Keys input counter:</p>
<table id="status-table" style="table-layout:fixed; width:1400px; text-align:left;">
<tr>
<th style="width:280px">Key Code</th>
<th>Pressed</th>
<th>Released</th>
<th>Double-Pressed</th>
<th>Double-Released</th>
<th>Last Release Time</th>
<th>Last Press Time</th>
<th>Is Down</th>
</tr>
</table>
<!-- include shaku -->
<script src="js/demos.js"></script>
<script src="js/shaku.js"></script>
<!-- demo code -->
<script>
(function() {
// count press / release
let pressCount = {};
let releaseCount = {};
let doublePressCount = {};
let doubleReleaseCount = {};
// gamepad keys
const gamepadKeys = 'top,bottom,left,right,y,a,x,b,frontTopLeft,frontTopRight,frontBottomLeft,frontBottomRight,leftStickUp,leftStickDown,leftStickLeft,leftStickRight,rightStickUp,rightStickDown,rightStickLeft,rightStickRight'.split(',');
// create button element to show key state
function createButtonElement(key) {
// create button
let p = document.createElement("BUTTON");
p.style.fontSize = '120%';
p.innerHTML = key;
p.id = key;
document.getElementById("virtual-keyboard").appendChild(p);
// create entry in status table
pressCount[key] = 0;
releaseCount[key] = 0;
doublePressCount[key] = 0;
doubleReleaseCount[key] = 0;
document.getElementById('status-table').innerHTML +=
`<tr>
<td>${key}</td>
<td id="${key}-pressed">0</td>
<td id="${key}-released">0</td>
<td id="${key}-dpressed">0</td>
<td id="${key}-dreleased">0</td>
<td id="${key}-releasetime">0</td>
<td id="${key}-presstime">0</td>
<td id="${key}-down">false</td>
</tr>`;
}
// create elements to show all keys state
for (let key in Shaku.input.KeyboardKeys) {
createButtonElement(key);
}
createButtonElement('touch');
createButtonElement('mouse_left');
createButtonElement('mouse_middle');
createButtonElement('mouse_right');
for (let gkey of gamepadKeys) {
createButtonElement(`gamepad0_${gkey}`);
}
// to count mouse wheel, press and release
let mouseWheel = 0;
let mousePressed = 0;
let mouseReleased = 0;
// run demo
async function runDemo()
{
// init shaku
await Shaku.init();
// do a main loop step.
function step()
{
// start frame
Shaku.startFrame();
// highlight pressed buttons
const handleKeyEvents = (key, prefix) =>
{
// add prefix
key = prefix + key;
// mark in red down keys
let p = document.getElementById(key);
p.style.color = Shaku.input.down(key) ? 'red' : 'black';
// count pressed / release
if (Shaku.input.pressed(key)) pressCount[key]++
if (Shaku.input.released(key)) releaseCount[key]++;
if (Shaku.input.doublePressed(key)) doublePressCount[key]++
if (Shaku.input.doubleReleased(key)) doubleReleaseCount[key]++;
// update status table
document.getElementById(`${key}-pressed`).innerHTML = pressCount[key];
document.getElementById(`${key}-released`).innerHTML = releaseCount[key];
document.getElementById(`${key}-dpressed`).innerHTML = doublePressCount[key];
document.getElementById(`${key}-dreleased`).innerHTML = doubleReleaseCount[key];
document.getElementById(`${key}-releasetime`).innerHTML = Shaku.input.lastReleaseTime(key);
document.getElementById(`${key}-presstime`).innerHTML = Shaku.input.lastPressTime(key);
document.getElementById(`${key}-down`).innerHTML = Shaku.input.down(key);
}
// handle keyboard
for (let key in Shaku.input.KeyboardKeys) {
handleKeyEvents(key, "");
}
// handle mouse
for (let key in Shaku.input.MouseButtons) {
handleKeyEvents(key, "mouse_");
}
// handle gamepad
for (let key of gamepadKeys) {
handleKeyEvents(key, "gamepad0_");
}
// handle touch
handleKeyEvents('touch', "");
// count mouse press / release
if (Shaku.input.pressed('mouse_left')) { mousePressed++; }
if (Shaku.input.released('mouse_left')) { mouseReleased++; }
// show mouse state
mouseWheel += Shaku.input.mouseWheelSign;
document.getElementById('mouse_state').innerHTML = "Mouse position: " + Shaku.input.mousePosition.string() + " / Mouse scroll: " + mouseWheel + " / Mouse move: " + Shaku.input.mouseMoving + " / Touching: " + Shaku.input.touching + " / Touch position: " + Shaku.input.touchPosition.string();
document.getElementById('mouse_state').innerHTML += "<br />Mouse Pressed: " + mousePressed + " / Mouse released: " + mouseReleased;
// end frame and request next frame
Shaku.endFrame();
Shaku.requestAnimationFrame(step);
}
// start main loop
step();
}
// start demo
runDemo();
})();
</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 is few code examples on how to use the input manager. These are just the basics, for the full API please see the docs.</p>
<pre><code class="language-js">// everything below goes between startFrame() and endFrame()
// getting mouse button states
let mouseDown = Shaku.input.down('mouse_left');
let mouseRightDown = Shaku.input.down('mouse_right');
let mouseMiddleDown = Shaku.input.down('mouse_middle');
// was left mouse button pressed in the previous frame, and released right in this frame?
// this is useful to generate 'onclick' like behavior. this will be true for only 1 frame when user release the mouse button
let mouseReleasedNow = Shaku.input.released('mouse_left');
// was left mouse button released previous frame, but pressed down right in this frame?
// this is useful to generate 'onclick' like behavior. this will be true for only 1 frame when user press the mouse button
let mousePressedNow = Shaku.input.pressed('mouse_left');
// get keyboard arrows state
// you can get all keyboard keys with the following command: Object.keys(Shaku.input.KeyboardKeys)
let moveUp = Shaku.input.down('up');
let moveDown = Shaku.input.down('down');
let moveLeft = Shaku.input.down('left');
let moveRight = Shaku.input.down('right');
// you can also use 'released()' and 'pressed' with keyboard keys
// for example, attack when space is released:
if (Shaku.input.released('space')) {
doAttack();
}
// get mouse position
console.log("Mouse move x: " + Shaku.input.mousePosition.x);
console.log("Mouse move y: " + Shaku.input.mousePosition.y);
</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>