blob: 4de1d9d77c297a58300819922ac47c26240bc77e (
plain) (
tree)
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eli's Broughlike</title>
<meta description="A Broughlike, or something like Flatland.">
<style>
body {
background-color: #f0f0f0;
font-size: x-large;
}
canvas {
width: 90vw;
height: 90vw;
max-width: 600px;
max-height: 600px;
border: 2px solid black;
display: block;
margin: 0 auto;
background-color: #f0f0f0;
}
@keyframes shake {
0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); }
20% { transform: translate(-1.5px, 0px) rotate(0.5deg); }
30% { transform: translate(1.5px, 1px) rotate(0deg); }
40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); }
60% { transform: translate(-1.5px, 0.5px) rotate(0deg); }
70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
90% { transform: translate(0.5px, 1px) rotate(0deg); }
100% { transform: translate(0.5px, -1px) rotate(-0.5deg); }
}
.shake {
animation: shake 0.5s;
animation-iteration-count: 1;
animation-timing-function: steps(10, end);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.5em;
background-color: #f0f0f0;
}
.toggleButton {
padding: 0.75em;
margin: 0.5em;
}
</style>
</head>
<body>
<div class="header">
<p><a href="about.html">About</a></p>
<div>
<button class="toggleButton" id="toggleShake" onclick="toggleShake()">Turn Shake Off</button>
</div>
</div>
<canvas id="gameCanvas"></canvas>
<script type="module" src="./broughlike.js"></script>
</body>
</html>
|