Klikspel

HTML

<div class="game-container">

  <img class="background" src="https://i.imgur.com/ilOvqHs.png" />

  <div class="timer">⏱️ <span id="time">0:00</span></div>
  <div class="score">Score: <span id="score">0</span></div>

  <div id="word"></div>
  <div id="buttons"></div>

  <div class="popup show" id="startPopup">
    <div class="popup-box">
      <h2>UITLEG</h2>
      <p>
        Haal zo snel mogelijk 50 punten!<br><br>
        Klik op de <u>KLEUR</u> van het woord<br>
        Een goed antwoord = +1 punt<br>
        Een fout antwoord = -1 punt<br>
        3 goede antwoorden achter elkaar = +3 punten<br>
       <i> Let op: je krijgt maar 1 kans! </i>

       <br><br>
      
       Als je 50 punten hebt krijg je een code voor een weekje manager, te claimen t/m <b>zo 27/9</b>. Verder krijgt de top 3 snelste inzendingen, credits!
      </p>
      <button class="btn-start" onclick="startGame()">Start</button>
    </div>
  </div>

  <div class="popup" id="winPopup">
    <div class="popup-box" id="winContent"></div>
  </div>

</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: Georgia, cursive;
}

.game-container {
  position: relative;
  width: 688px;
  height: 500px;
  margin: 0 auto;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 688px;
  height: 500px;
  object-fit: cover;
  z-index: 0;
}

.timer,
.score,
#word,
#buttons,
.popup {
  position: absolute;
  z-index: 2;
}

.timer {
  top: 90px;
  left: 60px;
  font-size: 20px;
  color: #1e3a8a;
}

.score {
  top: 90px;
  right: 60px;
  font-size: 20px;
  color: #1e3a8a;
}

#word {
  top: 210px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 42px;
  font-weight: bold;
}

#buttons {
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}

.color-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.correct-glow {
  box-shadow: 0 0 20px lime;
}

.wrong-glow {
  box-shadow: 0 0 20px red;
}

.popup {
  top: 120px;
  left: 40px;
  width: 608px;
  height: 300px;
  display: none;
  justify-content: center;
  align-items: center;
}

.popup.show {
  display: flex;
}

.popup-box {
  width: 360px;
  padding: 20px;
  border-radius: 15px;
  background: linear-gradient(180deg,#dff6ff,#c7ecff);
  border: 3px solid #1e3a8a;
  color: #1e3a8a;
  text-align: center;
}

.btn-start {
  padding: 12px 24px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg,#60a5fa,#1e3a8a);
  color: white;
  cursor: pointer;
}

.btn-start:hover {
  transform: scale(1.05);
}

JavaScript

// alleen voor testen aanpassen
let testMode = true; 

let basisKleuren = ["rood","blauw","groen","geel"];
let extraKleuren = ["paars","oranje"];

const kleurMap = {
  rood:"red",
  blauw:"blue",
  groen:"green",
  geel:"gold",
  paars:"purple",
  oranje:"orange"
};

let actieveKleuren = [...basisKleuren];

let huidigeKleur;
let score = 0;
let combo = 0;

let timer;
let startTijd;


/* random helper */
function random(arr){
  return arr[Math.floor(Math.random()*arr.length)];
}


/* nieuwe ronde */
function nieuweRonde(){
  const tekst = random(actieveKleuren);
  const kleur = random(actieveKleuren);

  huidigeKleur = kleur;

  const woord = document.getElementById("word");
  woord.textContent = tekst.toUpperCase();
  woord.style.color = kleurMap[kleur];
}


/* knoppen reset */
function resetKnoppen(){
  document.querySelectorAll(".color-btn")
    .forEach(b => b.classList.remove("correct-glow","wrong-glow"));
}


/* knoppen maken */
function maakKnoppen(){
  const box = document.getElementById("buttons");
  box.innerHTML = "";

  actieveKleuren.forEach(kleur => {
    const btn = document.createElement("button");
    btn.className = "color-btn";
    btn.style.background = kleurMap[kleur];
    btn.onclick = () => checkKeuze(kleur, btn);
    box.appendChild(btn);
  });
}


/* check */
function checkKeuze(gekozen, btn){
  resetKnoppen();

  if(gekozen === huidigeKleur){
    combo++;
    score++;

    if(combo === 3){
      score += 3;
      combo = 0;
    }

    btn.classList.add("correct-glow");

  } else {
    score--;
    combo = 0;
    btn.classList.add("wrong-glow");
  }

  document.getElementById("score").textContent = score;

  if(score >= 25 && actieveKleuren.length === 4){
    actieveKleuren = [...basisKleuren, ...extraKleuren];
    maakKnoppen();
  }

  if(score >= 50){
    einde();
    return;
  }

  setTimeout(() => {
    resetKnoppen();
   ...