<div class="scoreboard"> <p id="score">Score : 000</p> <p id="time">Time : 00:00</p> </div> <div class="gameboard"> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> <div class="box"> <img src="../../wlanbot/wlanbot-transparent.png" alt="Wlanbot" class="imgs"> </div> </div> <div class="buttons"> <div id="difficulty"> <button onclick="easy()" id="easy">Easy</button> <button onclick="normal()" id="normal" class="select">Normal</button> <button onclick="hard()" id="hard">Hard</button> <button onclick="nightmare()" id="nightmare">Nightmare</button> </div> <div id="start"> <p>@_@</p> <p id="time-log"></p> <p id="score-log"></p> <button onclick="startGame()" id="start-btn">Start</button> </div> <p id="start-count-down">3</p> </div>

/* ScoreBoard */ .scoreboard { width: 19rem; margin: 2.4rem auto 0.8rem; } .scoreboard #score { font-size: 1.6rem; line-height: 1.2; word-wrap: break-word; overflow-wrap: break-word; } .scoreboard #time { font-size: 0.96rem; line-height: 1.2; } /* GameBoard */ .gameboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 19.2rem; height: 19.2rem; margin: 0 auto; border: 0.04rem solid #808080; } .gameboard .box { width: 100%; aspect-ratio: 1 / 1; border: 0.04rem solid #808080; overflow: hidden; } /* IMG */ @keyframes inout { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .gameboard .box img { display: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: inout 0.2s ease-in; cursor: pointer; pointer-events: auto; } /* Buttons */ .buttons #start { display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 28rem; left: 50%; transform: translate(-50%, -50%); padding: 1.6rem; border-radius: 1.6rem; font-size: 2.4rem; white-space: nowrap; color: #FFFFFF; background-color: #1A294D; } #time-log, #score-log { font-size: 0.4rem; } .buttons #start-btn { margin-top: 0.4rem; padding: 0.4rem 0.8rem; border: none; border-radius: 0.8rem; font-size: 1.6rem; font-weight: bold; color: #F0F8FF; background-color: #1E90FF; animation: inout 0.3s ease-in; cursor: pointer; } .buttons #difficulty { display : flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.6rem; position: absolute; top: 8rem; left: 50%; transform: translate(-50%, -50%); padding: 1.2rem; border-radius: 1.2rem; background-color: #1A294D; } .buttons #difficulty button { width: 100%; padding: 0 0.6rem; border: none; border-radius: 0.6rem; font-size: 1.2rem; color: #F0F8FF; background-color: #1E90FF; } .buttons #difficulty button.select { color: #F0F8FF; background-color: #FF1E1E; } .buttons #start-count-down { display: none; position: absolute; top: 16rem; left: 50%; transform: translate(-50%, -50%); font-size: 8rem; font-weight: bold; }

/* Timer */ const timer = document.getElementById("time"); let countUp; function startCountUp() { let ml = 0; let sc = 0; let mn = 0; let hr = 0; let dy = 0; countUp = setInterval(function () { ml += 1; if (ml >= 100) { sc += 1; ml = 0; } if (sc >= 60) { mn += 1; sc = 0; } if (mn >= 60) { hr += 1; mn = 0; } if (hr >= 24) { dy += 1; hr = 0; } const p = (n, len = 2) => String(n).padStart(len, '0'); let text = ''; if (dy > 0) { text = `Time : ${p(dy)}::${p(hr)}:${p(mn)}:${p(sc)}:${p(ml)}`; } else if (hr > 0) { text = `Time : ${p(hr)}:${p(mn)}:${p(sc)}:${p(ml)}`; } else if (mn > 0) { text = `Time : ${p(mn)}:${p(sc)}:${p(ml)}`; } else if (sc > 0) { text = `Time : ${p(sc)}:${p(ml)}`; } else if (ml >= 0) { text = `Time : 00:${p(ml)}`; } timer.textContent = text; }, 10); } /* /Timer */ /* Difficulty */ const difficulty = document.getElementById("difficulty"); const easyBtn = document.getElementById("easy"); const normalBtn = document.getElementById("normal"); const hardBtn = document.getElementById("hard"); const nightmareBtn = document.getElementById("nightmare"); let speed = 400; function easy() { speed = 800; easyBtn.classList.add("select"); normalBtn.classList.remove("select"); hardBtn.classList.remove("select"); nightmareBtn.classList.remove("select"); } function normal() { speed = 400; easyBtn.classList.remove("select"); normalBtn.classList.add("select"); hardBtn.classList.remove("select"); nightmareBtn.classList.remove("select"); } function hard() { speed = 200; easyBtn.classList.remove("select"); normalBtn.classList.remove("select"); hardBtn.classList.add("select"); nightmareBtn.classList.remove("select"); } function nightmare() { speed = 100; easyBtn.classList.remove("select"); normalBtn.classList.remove("select"); hardBtn.classList.remove("select"); nightmareBtn.classList.add("select"); } /* /Difficulty */ /* Game Over */ const timeLog = document.getElementById("time-log"); const scoreLog = document.getElementById("score-log"); function gameOver() { let block = 0; for (let i = 0; i < wlanImgs.length; i++) { if (getComputedStyle(wlanImgs[i]).display === "block") { block++; } } if (block == 9) { clearInterval(countUp); clearInterval(addImg); startBtn.textContent = "Try Again"; timeLog.textContent = timer.textContent; scoreLog.textContent = score.textContent; start.firstElementChild.textContent = "Game Over!"; setTimeout(() => { reset(); }, 200); } } /* /Game Over */ /* RandomImg */ const wlanImgs = document.getElementsByClassName("imgs"); let addImg; function randomImg() { addImg = setInterval(() => { let picknone = []; for (let j = 0; j < wlanImgs.length; j++) { if (getComputedStyle(wlanImgs[j]).display === "none") { picknone.push(j); } } let randomIndex = Math.floor(Math.random() * picknone.length); let aa = picknone[randomIndex]; wlanImgs[aa].style.display = "block"; gameOver(); }, speed); }; /* /RandomImg */ /* ClickImg */ const score = document.getElementById("score"); let point = 0; [...wlanImgs].forEach(wlanImg => { wlanImg.addEventListener('click', () => { wlanImg.src = "../../wlanbot/wlanbot-lnvert-transparent.png"; setTimeout(() => { wlanImg.style.display = "none"; wlanImg.src = "../../wlanbot/wlanbot-transparent.png"; }, 200); point++; score.textContent = "Score : " + point; }); }); /* /ClickImg */ /* Start */ const start = document.getElementById("start"); const startBtn = document.getElementById("start-btn"); const countDown = document.getElementById("start-count-down"); function startGame() { difficulty.style.display = "none"; start.style.display = "none"; countDown.style.display = "block"; let num = 2; const startCountDown = setInterval(() => { countDown.textContent = num; num--; }, 1000); setTimeout(() => { clearInterval(startCountDown); countDown.style.display = "none"; startCountUp(); randomImg(); }, 3000); } /* /Start */ /* Reset */ function reset() { [...wlanImgs].forEach(wlanImg => { wlanImg.style.display = "none"; }); point = 0; score.textContent = "Score : 000"; start.style.display = "flex"; difficulty.style.display = "flex"; countDown.textContent = 3; timer.textContent = "Time : 00:00"; } /* /Reset */