coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
70 lines (64 loc) • 2.43 kB
HTML
<!--Copyright (c) Coherent Labs AD. All rights reserved. Licensed under the MIT License. See License.txt in the project root for license information. -->
<html lang="en">
<head>
<title>Keyboard demo</title>
<style>
body {
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 1000px;
height: 500px;
border: 1px solid black;
position: relative;
}
.square {
width: 100px;
height: 100px;
background-color: rgb(0, 0, 0);
position: relative;
transition: background-color 1s;
}
</style>
</head>
<body>
<h1>Press the J button to change the color of the square.</h1>
<h1>Hold it to move it around the screen</h1>
<div class="container">
<div class="square" style="top: 1px; left: 1px"></div>
</div>
<script src="../../dist/keyboard.js"></script>
<script>
const square = document.querySelector('.square');
let direction = { x: 5, y: 5 };
keyboard.on({
keys: ['J'],
callback: () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
square.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
},
type: ['press'],
});
keyboard.on({
keys: ['J'],
callback: () => {
const pos = {
x: parseFloat(square.style.left),
y: parseFloat(square.style.top),
};
if (pos.y < 0 || pos.y > 400) direction.y *= -1;
if (pos.x < 0 || pos.x > 900) direction.x *= -1;
square.style.left = `${pos.x + direction.x}px`;
square.style.top = `${pos.y + direction.y}px`;
},
type: ['hold'],
});
</script>
</body>
</html>