game mode selection ui created
This commit is contained in:
simon-ec
+304
-39
@@ -1,91 +1,356 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
html {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #161616;
|
||||
font-size: 24px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
#target {
|
||||
#frame {
|
||||
width: 60%;
|
||||
height: 75%;
|
||||
/** border: 1px solid white; */
|
||||
}
|
||||
#center {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
}
|
||||
#frame {
|
||||
width: 75%;
|
||||
height: 100vh;
|
||||
border: 1px solid white;
|
||||
|
||||
.target {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.fade {
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#text-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: end;
|
||||
justify-content: space-evenly;
|
||||
color: red;
|
||||
width: 100%;
|
||||
min-height: 2rem;
|
||||
line-height: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
html {
|
||||
font-size: 32px;
|
||||
}
|
||||
#text-box {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.text { font-size: .5rem; }
|
||||
.title { font-size: 2rem; }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="frame">
|
||||
<div id="frame"></div>
|
||||
|
||||
|
||||
|
||||
<div id="text-box">
|
||||
<span id="intro1" class="hidden title">QUICK</span>
|
||||
<span id="intro2" class="hidden title">DRAW</span>
|
||||
|
||||
<span id="instructions" class="hidden fade">hover on bullseye to start</span>
|
||||
|
||||
|
||||
<span id="countdown3" class="hidden title">3</span>
|
||||
<span id="countdown2" class="hidden title">2</span>
|
||||
<span id="countdown1" class="hidden title">1</span>
|
||||
|
||||
|
||||
<div id="game-modes" class="hidden fade">
|
||||
<button id="normal" onclick="handleNormalMode">normal mode</button>
|
||||
<button id="normal">infinite mode</button>
|
||||
<button id="normal">countdown mode</button>
|
||||
</div>
|
||||
|
||||
|
||||
<span id="draw" class="hidden title">DRAW!</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let gameBorderWidth = 1;
|
||||
let targetWidth = 20;
|
||||
let targetHeight = 20;
|
||||
|
||||
const gameBorderWidth = 1;
|
||||
const targetWidth = 20;
|
||||
const targetHeight = 20;
|
||||
let pageHeight;
|
||||
let pageWidth;
|
||||
|
||||
let pageWidth = window.innerWidth;
|
||||
let pageHeight = window.innerHeight;
|
||||
let frameElement;
|
||||
let frameRect;
|
||||
let frameHeight;
|
||||
let frameWidth;
|
||||
|
||||
const frameElement = document.getElementById("frame");
|
||||
let frameHeight = frameElement.offsetHeight;
|
||||
let frameWidth = frameElement.offsetWidth;
|
||||
let center;
|
||||
let ratio;
|
||||
|
||||
let target;
|
||||
let xFrameAdjustment;
|
||||
let yFrameAdjustment;
|
||||
|
||||
let hovering = false;
|
||||
|
||||
window.addEventListener("resize", (e) => {
|
||||
this.pageWidth = window.innerWidth;
|
||||
this.pageHeight = window.innerHeight;
|
||||
this.frameHeight = frameElement.offsetHeight - targetHeight;
|
||||
this.frameWidth = frameElement.offsetWidth - targetWidth;
|
||||
console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight);
|
||||
console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight);
|
||||
});
|
||||
let hoverCount = 0;
|
||||
|
||||
let k, r, x, y;
|
||||
let radians;
|
||||
let currentRound = 0;
|
||||
let countingDown = false;
|
||||
|
||||
let ratio = frameHeight / frameWidth;
|
||||
// text elements
|
||||
let intro1 = document.getElementById("intro1");
|
||||
let intro2 = document.getElementById("intro2");
|
||||
let instructions = document.getElementById("instructions");
|
||||
|
||||
let xFrameAdjustment = ((pageWidth - frameWidth) * 2) - (targetWidth / 2);
|
||||
let yFrameAdjustment = (frameHeight / 2) - (targetWidth / 2);
|
||||
let one = document.getElementById("countdown1");
|
||||
let two = document.getElementById("countdown2");
|
||||
let three = document.getElementById("countdown3");
|
||||
|
||||
generateTarget(xFrameAdjustment, yFrameAdjustment)
|
||||
let draw = document.getElementById("draw");
|
||||
|
||||
for (let i = 0; i < 360; i++) {
|
||||
r = (frameWidth / 2) - (targetWidth / 2);
|
||||
window.addEventListener("load", initGame);
|
||||
|
||||
radians = degreesToRadians(i);
|
||||
function setParameters(event) {
|
||||
pageHeight = window.innerHeight;
|
||||
pageWidth = window.innerWidth;
|
||||
|
||||
x = ((r * 1 * Math.cos(radians)) + xFrameAdjustment);
|
||||
y = ((r * ratio * Math.sin(radians)) + yFrameAdjustment);
|
||||
console.log(x + ', ' + y);
|
||||
frameElement = document.getElementById("frame");
|
||||
frameRect = frameElement.getBoundingClientRect();
|
||||
frameHeight = frameElement.offsetHeight;
|
||||
frameWidth = frameElement.offsetWidth;
|
||||
|
||||
generateTarget(x, y);
|
||||
}
|
||||
// ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2));
|
||||
ratio = frameHeight / frameWidth;
|
||||
|
||||
// adjustments to find center of frame in absolute coords (for origin of target cirlce)
|
||||
xFrameAdjustment = ((frameWidth / 2) + frameRect.left) - (targetWidth / 2);
|
||||
yFrameAdjustment = ((frameHeight / 2) + frameRect.top) - (targetWidth / 2);
|
||||
|
||||
// init logs:
|
||||
console.log('page: ' + pageWidth + ' x ' + pageHeight);
|
||||
console.log('frame: ' + frameWidth + ' x ' + frameHeight);
|
||||
}
|
||||
|
||||
async function initGame() {
|
||||
setParameters();
|
||||
|
||||
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
|
||||
center.id = "center";
|
||||
document.body.insertAdjacentElement("afterbegin", center);
|
||||
|
||||
await drawTargetsInCircle(true);
|
||||
|
||||
// insert intro elements into document flow
|
||||
intro1.style.display = "inline";
|
||||
intro2.style.display = "inline";
|
||||
|
||||
// reveal intro elements
|
||||
intro1.style.opacity = "100";
|
||||
await sleep(500);
|
||||
intro2.style.opacity = "100";
|
||||
await sleep(1500);
|
||||
|
||||
intro1.classList.add("fade");
|
||||
intro2.classList.add("fade");
|
||||
|
||||
intro1.style.opacity = "0";
|
||||
intro2.style.opacity = "0";
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
intro1.style.display = "none";
|
||||
intro2.style.display = "none";
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
document.getElementById("game-modes").style.display = "inline";
|
||||
await sleep(500);
|
||||
document.getElementById("game-modes").style.opacity = "100";
|
||||
}
|
||||
|
||||
function handleNormalMode(e) {
|
||||
center.addEventListener("mouseover", handleHoverStart);
|
||||
center.addEventListener("mouseleave", handleHoverEnd);
|
||||
|
||||
// instructions.style.display = "inline";
|
||||
// instructions.style.opacity = "100";
|
||||
}
|
||||
|
||||
function handleHoverStart(e) {
|
||||
e.target.style.backgroundColor = "green";
|
||||
if (currentRound == 0) return;
|
||||
|
||||
hovering = true;
|
||||
hoverCount++;
|
||||
|
||||
frameElement.replaceChildren();
|
||||
|
||||
intro1.style.display = "none";
|
||||
intro2.style.display = "none";
|
||||
instructions.style.display = "none";
|
||||
|
||||
// if (infinityMode)
|
||||
|
||||
if (currentRound == 0) { startRoundOne(); }
|
||||
}
|
||||
|
||||
async function startRoundOne() {
|
||||
if (!await startCountdown(hoverCount)) {
|
||||
// if user canceled hover, don't continue round
|
||||
return;
|
||||
}
|
||||
console.log('success');
|
||||
}
|
||||
|
||||
async function startCountdown(hoverNumber) {
|
||||
instructions.style.display = "none";
|
||||
|
||||
countingDown = true;
|
||||
await sleep(1000);
|
||||
|
||||
one.style.opacity = "0";
|
||||
two.style.opacity = "0";
|
||||
three.style.opacity = "0";
|
||||
|
||||
// this check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
|
||||
if (!hovering || hoverNumber != hoverCount) return false;
|
||||
one.style.display = "inline";
|
||||
two.style.display = "inline";
|
||||
three.style.display = "inline";
|
||||
|
||||
three.style.opacity = "100";
|
||||
await sleep(1000);
|
||||
|
||||
two.style.opacity = "100";
|
||||
await sleep(1000);
|
||||
|
||||
one.style.opacity = "100";
|
||||
await sleep(1000);
|
||||
|
||||
if (!hovering || hoverNumber != hoverCount) return false;
|
||||
one.style.display = "none";
|
||||
two.style.display = "none";
|
||||
three.style.display = "none";
|
||||
|
||||
one.style.opacity = "0";
|
||||
two.style.opacity = "0";
|
||||
three.style.opacity = "0";
|
||||
|
||||
draw.style.display = "inline";
|
||||
draw.style.opacity = "100";
|
||||
|
||||
countingDown = false;
|
||||
setTimeout(() => {draw.style.display = "none"; draw.style.opacity = "0"; }, 1000);
|
||||
return true;
|
||||
}
|
||||
|
||||
function handleHoverEnd(e) {
|
||||
hovering = false;
|
||||
e.target.style.backgroundColor = "red";
|
||||
|
||||
if (countingDown) {
|
||||
one.style.display = "none";
|
||||
two.style.display = "none";
|
||||
three.style.display = "none";
|
||||
draw.style.display = "none";
|
||||
|
||||
one.style.opacity = "0";
|
||||
two.style.opacity = "0";
|
||||
three.style.opacity = "0";
|
||||
|
||||
draw.style.opacity = "0";
|
||||
|
||||
instructions.style.display = "inline";
|
||||
countingDown = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleResize(event) {
|
||||
frameElement.replaceChildren();
|
||||
setParameters();
|
||||
|
||||
document.getElementById("center").remove();
|
||||
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
|
||||
center.id = "center";
|
||||
document.body.insertAdjacentElement("afterbegin", center);
|
||||
center.addEventListener("mouseover", handleHoverStart);
|
||||
center.addEventListener("mouseleave", handleHoverEnd);
|
||||
|
||||
if (currentRound == 0) {
|
||||
drawTargetsInCircle(false);
|
||||
}
|
||||
|
||||
console.log('page: ' + pageWidth + ' x ' + pageHeight);
|
||||
console.log('frame: ' + frameWidth + ' x ' + frameHeight);
|
||||
}
|
||||
|
||||
async function drawTargetsInCircle(animate) {
|
||||
let r, x, y;
|
||||
let radians;
|
||||
let target;
|
||||
for (let i = 0; i < 360; i = i + 2) {
|
||||
r = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2);
|
||||
// r = (frameWidth / 2) - (targetWidth / 2);
|
||||
|
||||
radians = degreesToRadians(i);
|
||||
|
||||
x = (r * 1 * Math.cos(radians)) + xFrameAdjustment;
|
||||
y = (r * ratio * Math.sin(radians)) + yFrameAdjustment;
|
||||
|
||||
// console.log(x + ', ' + y);
|
||||
// console.log(ratio);
|
||||
// console.log(xFrameAdjustment + 'adj, ' + yFrameAdjustment + 'adj');
|
||||
|
||||
target = generateTarget(x, y);
|
||||
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
|
||||
|
||||
if (animate) await sleep(15);
|
||||
}
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
function degreesToRadians(degrees) {
|
||||
return degrees * (Math.PI / 180)
|
||||
@@ -94,11 +359,11 @@
|
||||
|
||||
function generateTarget(x, y) {
|
||||
const target = document.createElement("div");
|
||||
target.id = "target";
|
||||
target.classList.add("target");
|
||||
target.style.top = y +'px';
|
||||
target.style.left = x + 'px';
|
||||
// console.log(target);
|
||||
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
|
||||
return target;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user