coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
134 lines (129 loc) • 4.44 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: limegreen;
position: relative;
transition: background-color 1s;
animation-name: move;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-play-state: paused;
}
@keyframes move {
0% {
left: 0;
top: 0;
background-color: limegreen;
}
10% {
left: 900px;
top: 0;
background-color: aquamarine;
}
20% {
left: 900px;
top: 100px;
background-color: cyan;
}
30% {
left: 0;
top: 100px;
background-color: cadetblue;
}
40% {
left: 0;
top: 200px;
background-color: plum;
}
50% {
left: 900px;
top: 200px;
background-color: red;
}
60% {
left: 900px;
top: 300px;
background-color: salmon;
}
70% {
left: 0px;
top: 300px;
background-color: coral;
}
80% {
left: 0px;
top: 400px;
background-color: yellow;
}
90% {
left: 900px;
top: 400px;
background-color: yellowgreen;
}
100% {
left: 0;
top: 0;
background-color: limegreen;
}
}
</style>
</head>
<body>
<h1>Press A + S + D to play the animation. Press Z + X + C to pause it.</h1>
<h1>Press CTRL + ALT + Q to set the direction forwards. Press SHIFT + ALT + E to set it backwards.</h1>
<div class="container">
<div class="square" style="top: 1px; left: 1px"></div>
</div>
<script src="../../dist/keyboard.js"></script>
<script>
keyboard.on({
keys: ['A', 'S', 'D'],
callback: () => {
document.querySelector('.square').style.animationPlayState = 'running';
},
type: ['press'],
});
keyboard.on({
keys: ['Z', 'X', 'C'],
callback: () => {
document.querySelector('.square').style.animationPlayState = 'paused';
},
type: ['press'],
});
keyboard.on({
keys: ['CTRL', 'ALT', 'Q'],
callback: () => {
document.querySelector('.square').style.animationDirection = 'normal';
},
type: ['press'],
});
keyboard.on({
keys: ['SHIFT', 'ALT', 'E'],
callback: () => {
document.querySelector('.square').style.animationDirection = 'reverse';
},
type: ['press'],
});
</script>
</body>
</html>