Click on 'wlanbot' in my JavaScript game!

Click Wlanbot

Code

Home

HTML

<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.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.png" alt="Wlanbot" class="imgs">
  </div>
  <div class="box">
    <img src="../../wlanbot/wlanbot.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>

CSS

/* 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 #000000;
}

.gameboard .box {
    width: 100%;
    aspect-ratio: 1 / 1;

    border: 0.04rem solid #000000;

    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;
}

JavaScript

/* 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-invert.png";
    setTimeout(() => {
      wlanImg.style.display = "none";
      wlanImg.src = "../../wlanbot/wlanbot.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 */

For Practice

Last updated: Oct 22, 2025

Score : 000

Time : 00:00

@_@