<!DOCTYPE html>
<html>
<head>
<title>Word search and scrambler</title>
</head>
<body>

<div class="wordgame">
  <header class="game-header">
    <div class="brand"><span class="brand-icon">W</span> WORD<span>GRID</span></div>
    <div class="tagline">A little challenge for your brain.</div>
  </header>

<main class="game-shell">
    <div class="topline">
      <span class="pill">WORD SCRAMBLE</span>
      <button id="restart" class="icon-button" title="Restart game">↻</button>
    </div>

<div class="stats">
      <div><small>SCORE</small><strong id="score">0000</strong></div>
      <div><small>ROUND</small><strong id="round">01<span>/10</span></strong></div>
      <div><small>TIME</small><strong id="timer">60<span>s</span></strong></div>
      <div><small>STREAK</small><strong id="streak">0 <i>🔥</i></strong></div>
    </div>

<section class="puzzle">
      <div class="puzzle-meta">
        <span id="category">TECHNOLOGY</span>
        <span id="difficulty">EASY</span>
      </div>

<div class="prompt">Unscramble this word</div>
      <div id="letters" class="letters"></div>

<div class="hint">
        <span class="hint-icon">✦</span>
        <div>
          <small>CLUE</small>
          <p id="clue">A small piece of information stored by a computer.</p>
        </div>
        <button id="hintBtn" title="Reveal a letter">HINT</button>
      </div>

<div class="actions">
        <button id="submit" class="submit-btn">CHECK ANSWER <span>↗</span></button>
        <button id="skip" class="skip-btn">SKIP</button>
      </div>

<div id="feedback" aria-live="polite">You’ve got this. Think it through.</div>
    </section>

<div class="bottom-info">
      <span>↵ ENTER to submit</span>
      <span>+100 points per correct answer</span>
    </div>
  </main>

<div id="overlay" class="overlay hidden">
    <div class="result-card">
      <div class="result-icon">✦</div>
      <div class="result-label">CHALLENGE COMPLETE</div>
      <h2 id="resultTitle">Nicely done!</h2>
      <p id="resultMessage">You finished the puzzle.</p>
      <div class="result-score" id="finalScore">0000</div>
      <small>FINAL SCORE</small>
      <button id="playAgain">PLAY AGAIN ↗</button>
    </div>
  </div>
</div>

</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  background: #0b0d12;
}

.wordgame {
  min-height: 100vh;
  padding: 25px 16px 35px;
  color: #f3f4f6;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(88, 65, 160, 0.14), transparent 55%),
    #0b0d12;
}

.game-header {
  text-align: center;
  margin-bottom: 25px;
}

.brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}

.brand span:last-child {
  color: #a995ff;
}

.brand-icon {
  display: inline-flex;
  width: 27px;
  height: 27px;
  justify-content: center;
  align-items: center;
  margin-right: 7px;
  border-radius: 7px;
  background: #a995ff;
  color: #171323;
}

.tagline {
  margin-top: 7px;
  color: #747988;
  font-size: 12px;
}

.game-shell {
  width: min(100%, 520px);
  margin: auto;
  padding: 24px;
  border: 1px solid #242832;
  border-radius: 20px;
  background: #12151c;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pill {
  padding: 6px 10px;
  border: 1px solid #343044;
  border-radius: 20px;
  color: #b9aaff;
  background: #211d2d;
  font: 10px 'DM Mono', monospace;
  letter-spacing: 1px;
}

.icon-button {
  width: 30px;
  height: 30px;
  border: 1px solid #303440;
  border-radius: 8px;
  background: #1b1e27;
  color: #a8adba;
  font-size: 19px;
  cursor: pointer;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 22px 0 17px;
}

.stats > div {
  padding: 12px 8px;
  border: 1px solid #252934;
  border-radius: 10px;
  background: #171a22;
}

.stats small {
  display: block;
  margin-bottom: 5px;
  color: #777f91;
  font: 9px 'DM Mono', monospace;
  letter-spacing: 1px;
}

.stats strong {
  font: 20px 'DM Mono', monospace;
  color: #e8e9ef;
}

.stats strong span {
  color: #777f91;
  font-size: 12px;
}

.stats i {
  font-style: normal;
  font-size: 13px;
}

.progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: #282b35;
}

#progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #8b70ff, #c4b5fd);
  transition: width 0.3s;
}

.puzzle {
  padding-top: 27px;
  text-align: center;
}

.puzzle-meta {
  display: flex;
  justify-content: space-between;
  color: #9b8aff;
  font: 10px 'DM Mono', monospace;
  letter-spacing: 1px;
}

#difficulty {
  color: #6f7889;
}

.prompt {
  margin-top: 25px;
  color: #9298a7;
  font-size: 13px;
}

.letters {
  min-height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 15px 0 22px;
}

.letter-tile {
  width: 43px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #393348;
  border-radius: 9px;
  background: linear-gradient(145deg, #292337, #1c1a27);
  color: #c7baff;
  font-size: 23px;
  font-weight: 700;
  box-shadow: 0 3px 0 #100f16;
  animation: pop 0.25s both;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hint {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 13px;
  margin-bottom: 15px;
  border: 1px solid #282a35;
  border-radius: 10px;
  background: #181a23;
}

.hint-icon {
  color: #b7a6ff;
  font-size: 20px;
}

.hint small {
  font: 9px 'DM Mono', monospace;
  color: #8c80b8;
  letter-spacing: 1px;
}

.hint p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #aeb3c1;
}

#hintBtn {
  margin-left: auto;
  border: 1px solid #45405b;
  border-radius: 6px;
  padding: 7px 9px;
  color: #c7baff;
  background: #242033;
  font: 10px 'DM Mono', monospace;
  cursor: pointer;
}

#answer {
  width: 100%;
  padding: 14px;
  border: 1px solid #343744;
  border-radius: 10px;
  outline: none;
  background: #0e1016;
  color: #fff;
  font: 16px 'DM Mono', monospace;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#answer:focus {
  border-color: #9b86ff;
  box-shadow: 0 0 0 3px rgba(155, 134, 255, 0.1);
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.submit-btn, .skip-btn {
  padding: 13px;
  border-radius: 9px;
  cursor: pointer;
  font: 11px 'DM Mono', monospace;
  letter-spacing: 1px;
}

.submit-btn {
  flex: 1;
  border: 0;
  background: #a995ff;
  color: #171323;
  font-weight: 500;
}

.submit-btn:hover {
  background: #c0b2ff;
}

.submit-btn span {
  float: right;
}

.skip-btn {
  padding: 13px 18px;
  border: 1px solid #343744;
  background: #1b1e27;
  color: #a4a9b6;
}

#feedback {
  min-height: 25px;
  padding-top: 14px;
  color: #737b8b;
  font-size: 11px;
}

#feedback.good {
  color: #71e6ad;
}

#feedback.bad {
  color: #ff8b9c;
}

.bottom-info {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  color: #606776;
  font: 9px 'DM Mono', monospace;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 8, 12, 0.85);
  backdrop-filter: blur(8px);
}

.hidden {
  display: none;
}

.result-card {
  width: min(100%, 360px);
  padding: 35px;
  border: 1px solid #393148;
  border-radius: 18px;
  background: #17141f;
  text-align: center;
}

.result-icon {
  font-size: 32px;
  color: #b8a6ff;
}

.result-label {
  margin-top: 15px;
  font: 10px 'DM Mono', monospace;
  letter-spacing: 2px;
  color: #a995ff;
}

.result-card h2 {
  font-size: 28px;
  margin: 10px 0;
}

.result-card p {
  color: #9ba1af;
  font-size: 13px;
}

.result-score {
  margin-top: 20px;
  color: #c5b7ff;
  font: 42px 'DM Mono', monospace;
}

.result-card > small {
  color: #777f91;
  font: 9px 'DM Mono', monospace;
}

#playAgain {
  display: block;
  width: 100%;
  margin-top: 25px;
  padding: 14px;
  border: 0;
  border-radius: 9px;
  background: #a995ff;
  color: #171323;
  font: 12px 'DM Mono', monospace;
  cursor: pointer;
}

@media (max-width: 420px) {
  .game-shell {
    padding: 17px;
  }

.letter-tile {
    width: 35px;
    height: 45px;
    font-size: 20px;
  }

.bottom-info {
    flex-direction: column;
    text-align: center;
  }
}

//
// Turn off the "Live Preview" mode to edit this weave
//
const wordBank = [
  { word: "BROWSER", category: "TECHNOLOGY", clue: "An app used to explore the internet.", level: "EASY" },
  { word: "PLANET", category: "SCIENCE", clue: "Earth is one of these.", level: "EASY" },
  { word: "PUZZLE", category: "GAMES", clue: "A problem designed to test your thinking.", level: "EASY" },
  { word: "PIXEL", category: "DESIGN", clue: "The smallest unit of a digital image.", level: "EASY" },
  { word: "GALAXY", category: "SPACE", clue: "A massive system of stars and cosmic matter.", level: "MEDIUM" },
  { word: "JAVASCRIPT", category: "PROGRAMMING", clue: "The language that makes websites interactive.", level: "HARD" },
  { word: "KEYBOARD", category: "TECHNOLOGY", clue: "An input device with keys.", level: "MEDIUM" },
  { word: "CREATIVE", category: "ART", clue: "Having the ability to make original ideas.", level: "MEDIUM" },
  { word: "ALGORITHM", category: "COMPUTING", clue: "A step-by-step procedure for solving a problem.", level: "HARD" },
  { word: "ADVENTURE", category: "LIFESTYLE", clue: "An exciting or unusual experience.", level: "HARD" },
  { word: "MYSTERY", category: "BOOKS", clue: "A story involving something unexplained.", level: "MEDIUM" },
  { word: "INNOVATION", category: "IDEAS", clue: "The introduction of something new.", level: "HARD" }
];

const TOTAL_ROUNDS = 10;
const ROUND_SECONDS = 60;

const scoreEl = document.getElementById("score");
const roundEl = document.getElementById("round");
const timerEl = document.getElementById("timer");
const streakEl = document.getElementById("streak");
const progressEl = document.getElementById("progress");
const lettersEl = document.getElementById("letters");
const categoryEl = document.getElementById("category");
const difficultyEl = document.getElementById("difficulty");
const clueEl = document.getElementById("clue");
const answerEl = document.getElementById("answer");
const feedbackEl = document.getElementById("feedback");
const hintBtn = document.getElementById("hintBtn");
const overlay = document.getElementById("overlay");

let score = 0;
let streak = 0;
let round = 0;
let timeLeft = ROUND_SECONDS;
let timer = null;
let currentWord = null;
let questions = [];
let hintUsed = false;
let gameActive = false;

function shuffleWord(word) {
  let letters = word.split("");

for (let i = letters.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [letters[i], letters[j]] = [letters[j], letters[i]];
  }

// Avoid accidentally showing the original word.
  if (letters.join("") === word) {
    letters.push(letters.shift());
  }

return letters;
}

function prepareQuestions() {
  questions = [...wordBank]
    .sort(() => Math.random() - 0.5)
    .slice(0, TOTAL_ROUNDS);
}

function showWord() {
  if (round >= TOTAL_ROUNDS) {
    endGame();
    return;
  }

currentWord = questions[round];
  hintUsed = false;

categoryEl.textContent = currentWord.category;
  difficultyEl.textContent = currentWord.level;
  clueEl.textContent = currentWord.clue;

lettersEl.innerHTML = "";

shuffleWord(currentWord.word).forEach((letter, index) => {
    const tile = document.createElement("div");
    tile.className = "letter-tile";
    tile.textContent = letter;
    tile.style.animationDelay = `${index * 35}ms`;
    lettersEl.appendChild(tile);
  });

answerEl.value = "";
  answerEl.disabled = false;
  feedbackEl.className = "";
  feedbackEl.textContent = "You’ve got this. Think it through.";
  hintBtn.disabled = false;

updateStats();
  answerEl.focus();
}

function startTimer() {
  clearInterval(timer);

timer = setInterval(() => {
    if (!gameActive) return;

timeLeft--;
    timerEl.innerHTML = `${timeLeft}<span>s</span>`;

if (timeLeft <= 0) {
      clearInterval(timer);
      endGame(true);
    }
  }, 1000);
}

function submitAnswer() {
  if (!gameActive || answerEl.disabled) return;

const answer = answerEl.value.trim().toUpperCase();

if (!answer) {
    feedbackEl.className = "bad";
    feedbackEl.textContent = "Enter a word first.";
    return;
  }

if (answer === currentWord.word) {
    const points = hintUsed ? 50 : 100;
    streak++;

const bonus = streak >= 3 ? 25 : 0;
    score += points + bonus;

feedbackEl.className = "good";
    feedbackEl.textContent = `Correct! +${points + bonus} points${bonus ? " (streak bonus!)" : ""}`;

answerEl.disabled = true;
    updateStats();

setTimeout(() => {
      round++;
      showWord();
    }, 900);
  } else {
    streak = 0;
    feedbackEl.className = "bad";
    feedbackEl.textContent = "Not quite! Try again.";
    updateStats();
  }
}

function revealHint() {
  if (!gameActive || hintUsed) return;

hintUsed = true;
  hintBtn.disabled = true;

const firstLetter = currentWord.word[0];

feedbackEl.className = "";
  feedbackEl.textContent = `Hint: The word starts with "${firstLetter}".`;
}

function skipWord() {
  if (!gameActive) return;

streak = 0;
  feedbackEl.className = "bad";
  feedbackEl.textContent = `Skipped! The answer was ${currentWord.word}.`;

answerEl.disabled = true;
  updateStats();

setTimeout(() => {
    round++;
    showWord();
  }, 900);
}

function endGame(timeUp = false) {
  gameActive = false;
  clearInterval(timer);

document.getElementById("resultTitle").textContent =
    timeUp ? "Time's up!" : "Nicely done!";

document.getElementById("resultMessage").textContent =
    `You solved ${round} out of ${TOTAL_ROUNDS} words.`;

document.getElementById("finalScore").textContent =
    String(score).padStart(4, "0");

overlay.classList.remove("hidden");
}

function startGame() {
  clearInterval(timer);

score = 0;
  streak = 0;
  round = 0;
  timeLeft = ROUND_SECONDS;
  gameActive = true;

overlay.classList.add("hidden");
  prepareQuestions();
  showWord();
  startTimer();
}

document.getElementById("submit").addEventListener("click", submitAnswer);
document.getElementById("skip").addEventListener("click", skipWord);
hintBtn.addEventListener("click", revealHint);

answerEl.addEventListener("keydown", event => {
  if (event.key === "Enter") submitAnswer();
});

document.getElementById("restart").addEventListener("click", startGame);
document.getElementById("playAgain").addEventListener("click", startGame);

startGame();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground