How do I create a Hangman game in HTML CSS JavaScript?

To create a Hangman game in HTML CSS JavaScript: (1) Store the current word and a guessed Set. (2) Build a keyboard by looping charCode 65-90: String.fromCharCode(i) for A-Z. (3) On each guess: if word.includes(letter) mark correct, else increment wrong count. (4) Draw the hangman on canvas progressively: show head when wrong >= 1, body >= 2, left arm >= 3, right arm >= 4, left leg >= 5, right leg >= 6. (5) Check win: [...currentWord].every(l => guessed.has(l)). (6) Check loss: wrong >= 6. (7) Render word display: show letter if guessed.has(letter), blank otherwise. The Coodeverse Hangman Cyber Arena demo is a complete free cyberpunk-themed example with sound, confetti, categories, and canvas sway animation.

How do I draw a hangman figure on HTML5 Canvas JavaScript?

To draw a hangman on HTML5 Canvas: (1) Always draw the gallows: base (moveTo 50,280 lineTo 250,280), pole and crossbar (moveTo 100,280 lineTo 100,50 lineTo 220,50 lineTo 220,80). (2) Draw parts progressively based on wrong count: if (wrong >= 1) ctx.arc(220, 100, 25, 0, Math.PI*2) for head. if (wrong >= 2) body line. if (wrong >= 3) left arm. if (wrong >= 4) right arm. if (wrong >= 5) left leg. if (wrong >= 6) right leg. (3) Add sway animation on game over: const swayOffset = wrong === 6 ? Math.sin(sway * 3) * 20 : 0; apply swayOffset to x position; increment sway by 0.05 each frame; call requestAnimationFrame(drawHangman). (4) Add X eyes on death: draw two cross lines on the face. Use ctx.strokeStyle = '#00ffff' and filter: drop-shadow for neon glow.

How do I use the Web Audio API to create game sound effects in JavaScript?

To create game sound effects with Web Audio API: (1) Create context: const ctx = new AudioContext(). (2) Create oscillator: const osc = ctx.createOscillator(). (3) Create gain: const gain = ctx.createGain(). (4) Connect: osc.connect(gain); gain.connect(ctx.destination). (5) Set frequency: osc.frequency.setValueAtTime(800, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(1200, ctx.currentTime + 0.1) for a rising correct sound. For wrong: start at 400, ramp to 100. For win: sine wave from 600 to 1200. (6) Set volume envelope: gain.gain.setValueAtTime(0.3, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5). (7) Play: osc.start(); osc.stop(ctx.currentTime + 0.5). No external libraries needed.

How do I create a CSS scanline overlay animation?

To create a CSS CRT scanline overlay animation: (1) Create a fixed div covering the full screen: position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999. (2) Use a repeating horizontal stripe background: background: linear-gradient(transparent 50%, rgba(0,255,255,0.03) 50%); background-size: 100% 4px. This creates alternating transparent and faintly visible stripes every 4px. (3) Animate the scrolling: @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }. Apply: animation: scan 8s linear infinite. The pointer-events:none ensures the overlay doesn't block user interactions.

How do I create animated CSS gradient text with glow in CSS?

To create animated gradient text with glow in CSS: (1) Background gradient: background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff); background-size: 200%. (2) Clip to text: -webkit-background-clip: text; -webkit-text-fill-color: transparent. (3) Animate gradient shift: @keyframes gradient { 0%,100% { background-position: 0%; } 50% { background-position: 100%; } } — apply animation: gradient 6s ease infinite. (4) Add alternating glow: @keyframes glow { from { filter: drop-shadow(0 0 20px #00ffff); } to { filter: drop-shadow(0 0 40px #ff00ff); } } — apply animation: glow 2s ease-in-out infinite alternate. Note: text-shadow does not work with -webkit-text-fill-color:transparent; use filter:drop-shadow instead.

How do I implement JavaScript Set for guess tracking in a word game?

To use JavaScript Set for guess tracking in a word game: (1) Initialize: let guessed = new Set(). (2) Check if already guessed: if (guessed.has(letter)) return. (3) Add guess: guessed.add(letter). (4) Check all letters guessed: return [...currentWord].every(l => guessed.has(l)). (5) Reset on new game: guessed.clear(). Using Set over an Array provides O(1) lookup time with .has() instead of O(n) with .includes(). The spread operator [...currentWord] converts the string to individual characters for the .every() check. This pattern is the standard approach for word game state management.

How do I trigger a confetti side-cannon animation on win in JavaScript?

To create a canvas-confetti side-cannon win animation: Include canvas-confetti: script src='https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js'. Then: const end = Date.now() + 5000; (function frame() { confetti({ particleCount: 7, angle: 60, spread: 55, origin: { x: 0 } }); confetti({ particleCount: 7, angle: 120, spread: 55, origin: { x: 1 } }); if (Date.now() < end) requestAnimationFrame(frame); }()). The origin x:0 fires from the left edge, x:1 from the right. angle:60 and 120 aim inward. The requestAnimationFrame loop continues for 5 seconds, creating a sustained celebration effect.

How do I build a dynamic on-screen keyboard for a word game in JavaScript?

To build a dynamic on-screen keyboard in JavaScript: (1) Loop A-Z using charCodes: for (let i = 65; i guess(letter, btn). (4) Append to keyboard container. (5) On correct guess: btn.classList.add('correct'). On wrong: btn.classList.add('wrong'). (6) Rebuild keyboard on new game: kb.innerHTML = '' then re-create all 26 keys. (7) Support physical keyboard: window.addEventListener('keydown', e => { const key = document.querySelector('.key:nth-child(' + (e.key.toUpperCase().charCodeAt(0) - 64) + ')'); if (key) key.click(); }).

How do I create a Math.sin sway animation for canvas drawing in JavaScript?

To create a Math.sin sway animation in Canvas JavaScript: (1) Create a sway variable: let sway = 0. (2) Each draw frame: sway += 0.05. (3) Calculate offset: const swayOffset = condition ? Math.sin(sway * 3) * 20 : 0. Math.sin returns -1 to 1; multiplying by 3 increases frequency; multiplying by 20 sets maximum pixel offset. (4) Apply to all x coordinates of the figure: ctx.arc(220 + swayOffset, 100, 25, 0, Math.PI * 2). (5) Loop: call requestAnimationFrame(drawHangman) from inside the draw function. In the Coodeverse Hangman demo, swayOffset only activates when wrong === 6 (game over), making the figure sway as if hanging.

Is the Coodeverse Hangman Cyber Arena Game completely free?

Yes! The Coodeverse Hangman Cyber Arena is 100% free — no registration, email, or payment required. Download the full ZIP with HTML, CSS, and JavaScript. Licensed under CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse. Includes canvas hangman drawing, Math.sin sway animation, Web Audio API sounds, canvas-confetti win celebration, 3 word categories, CSS scanline overlay, neon keyboard, win/streak tracking, and keyboard + click input — all in one self-contained file.

Cyberpunk Hangman Game in HTML, CSS, and JavaScript

Q: How do I build a dynamic on-screen keyboard for a word game in JavaScript?

To build a dynamic on-screen keyboard in JavaScript: (1) Loop A-Z using charCodes: for (let i = 65; i guess(letter, btn). (4) Append to keyboard container. (5) On correct guess: btn.classList.add('correct'). On wrong: btn.classList.add('wrong'). (6) Rebuild keyboard on new game: kb.innerHTML = '' then re-create all 26 keys. (7) Support physical keyboard: window.addEventListener('keydown', e => { const key = document.querySelector('.key:nth-child(' + (e.key.toUpperCase().charCodeAt(0) - 64) + ')'); if (key) key.click(); }).

Full Source Code

Pure HTML5 Canvas + Vanilla JavaScript. Teaches canvas hangman drawing with sway physics, Web Audio API oscillator sound design, canvas-confetti celebration, JavaScript Set data structure, CSS scanline overlay, animated gradient text, glassmorphism, and dynamic keyboard generation. One of the most comprehensive free word game tutorials.

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Hangman: Cyber Arena | Coodeverse</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Rajdhani:wght@500;700" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
  <style>
    :root { --bg:#0a001f; --primary:#00ffff; --accent:#ff00ff; --glass:rgba(20,20,60,0.5); --text:#e0f7ff; --danger:#ff0066; }
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      background: var(--bg);
      background-image: radial-gradient(circle at 20% 80%,rgba(120,0,255,0.3) 0%,transparent 50%), radial-gradient(circle at 80% 20%,rgba(0,255,255,0.3) 0%,transparent 50%), linear-gradient(135deg,#0f0033 0%,#000011 100%);
      color: var(--text); font-family:'Rajdhani',sans-serif; min-height:100vh; overflow-x:hidden;
    }
    /* CRT scanline overlay — pointer-events none so it doesn't block clicks */
    .scanline { position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(transparent 50%,rgba(0,255,255,0.03) 50%); background-size:100% 4px; pointer-events:none; animation:scan 8s linear infinite; z-index:9999; }
    @keyframes scan { 0%{transform:translateY(-100%);} 100%{transform:translateY(100%);} }
    header { text-align:center; padding:2rem 1rem; }
    /* Animated gradient text — background-clip only, use filter:drop-shadow not text-shadow */
    .title { font-family:'Orbitron',monospace; font-size:clamp(3rem,8vw,6rem); font-weight:800; background:linear-gradient(90deg,#00ffff,#ff00ff,#00ffff); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradient 6s ease infinite, glow 2s ease-in-out infinite alternate; }
    @keyframes gradient { 0%,100%{background-position:0%;} 50%{background-position:100%;} }
    @keyframes glow { from{filter:drop-shadow(0 0 20px #00ffff);} to{filter:drop-shadow(0 0 40px #ff00ff);} }
    .stats { display:flex; justify-content:center; gap:2rem; margin:1rem 0; font-size:1.3rem; font-weight:700; }
    .stat { background:rgba(0,255,255,0.1); padding:0.8rem 1.5rem; border-radius:50px; border:1px solid rgba(0,255,255,0.3); min-width:120px; text-align:center; }
    /* Glassmorphism game card */
    #game-container { background:var(--glass); backdrop-filter:blur(20px); border:1px solid rgba(0,255,255,0.2); border-radius:30px; padding:3rem 2rem; max-width:800px; margin:2rem auto; box-shadow:0 0 50px rgba(0,255,255,0.3),inset 0 0 50px rgba(0,0,0,0.5); }
    #hangman-canvas { width:100%; height:300px; margin:0 auto 2rem; display:block; filter:drop-shadow(0 0 30px var(--primary)); }
    #word-display { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:2rem 0; }
    .letter { width:60px; height:80px; background:linear-gradient(135deg,rgba(0,255,255,0.2),rgba(255,0,255,0.1)); border:3px solid var(--primary); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:bold; overflow:hidden; transition:all 0.4s; }
    .letter.revealed { background:linear-gradient(135deg,#00ffff,#ff00ff); color:#000; transform:scale(1.15) rotate(5deg); animation:pop 0.6s ease; }
    @keyframes pop { 0%{transform:scale(0) rotate(180deg);} 70%{transform:scale(1.3) rotate(-10deg);} 100%{transform:scale(1.15) rotate(5deg);} }
    #hint-text { text-align:center; font-size:1.4rem; margin:1.5rem 0; padding:1rem; background:rgba(255,0,255,0.1); border-radius:20px; border:1px dashed var(--accent); }
    #keyboard { display:grid; grid-template-columns:repeat(auto-fit,minmax(55px,1fr)); gap:12px; margin:2.5rem 0; }
    .key { background:linear-gradient(135deg,rgba(0,255,255,0.2),rgba(0,255,255,0.05)); border:2px solid var(--primary); color:white; font-family:'Orbitron',monospace; font-size:1.4rem; font-weight:bold; padding:18px 8px; border-radius:18px; cursor:pointer; transition:all 0.2s; text-transform:uppercase; }
    .key:hover { transform:translateY(-8px) scale(1.1); box-shadow:0 20px 40px rgba(0,255,255,0.4); background:var(--primary); color:black; }
    .key.correct { background:#00ff88!important; color:black; animation:correct 0.6s ease; }
    .key.wrong { background:var(--danger)!important; animation:wrong 0.6s ease; }
    @keyframes correct { 0%,100%{transform:scale(1);} 50%{transform:scale(1.3);} }
    @keyframes wrong { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-10px);} 75%{transform:translateX(10px);} }
    #controls { display:flex; justify-content:center; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
    #controls button { background:linear-gradient(135deg,var(--primary),var(--accent)); border:none; padding:1rem 2rem; border-radius:50px; color:black; font-weight:bold; font-size:1.2rem; cursor:pointer; transition:all 0.3s; }
    #controls button:hover { transform:translateY(-5px) scale(1.05); box-shadow:0 20px 40px rgba(0,255,255,0.6); }
    #message { text-align:center; font-size:2.5rem; font-weight:bold; min-height:80px; margin:2rem 0; text-shadow:0 0 20px var(--primary); }
    @media (max-width:600px) { .letter{width:50px;height:65px;font-size:2rem;} .key{padding:14px 4px;font-size:1.2rem;} }
  </style>
</head>
<body>
  <div class="scanline" aria-hidden="true"></div>
  <header>
    <div class="title" role="heading" aria-level="1">HANGMAN</div>
    <div class="stats" aria-label="Game statistics">
      <div class="stat">Wins: <span id="wins">0</span></div>
      <div class="stat">Streak: <span id="streak">0</span></div>
      <div class="stat">Lives: <span id="lives">6</span></div>
    </div>
  </header>
  <div id="game-container">
    <canvas id="hangman-canvas" width="400" height="300" aria-label="Hangman drawing"></canvas>
    <div id="word-display" role="group" aria-label="Word letters"></div>
    <div id="hint-text" aria-live="polite">Choose a category to begin...</div>
    <div id="keyboard" role="group" aria-label="Letter keyboard"></div>
    <div id="message" aria-live="assertive"></div>
    <div id="controls">
      <button onclick="newGame('all')">New Game</button>
      <button onclick="newGame('js')">JS Only</button>
      <button onclick="newGame('fun')">Fun Words</button>
    </div>
  </div>
  <footer style="text-align:center;padding:2rem;color:#666;font-size:0.9rem;">CYBER HANGMAN 2025 • Built with pure JS & love — <a href="https://coodeverse.com" style="color:#00ffff;">Coodeverse</a></footer>
  <script>
    /* Hangman Cyber Arena | Coodeverse | CC BY 4.0 */

    // ── Web Audio API Sound Effects ──
    // Creates a new AudioContext per sound (disposable pattern — avoids stale context)
    function playSound(type) {
      try {
        const ac  = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ac.createOscillator();
        const gain = ac.createGain();
        osc.connect(gain); gain.connect(ac.destination);
        if (type === 'correct') {
          osc.frequency.setValueAtTime(800, ac.currentTime);
          osc.frequency.exponentialRampToValueAtTime(1200, ac.currentTime + 0.1); // rising chirp
        } else if (type === 'wrong') {
          osc.frequency.setValueAtTime(400, ac.currentTime);
          osc.frequency.exponentialRampToValueAtTime(100, ac.currentTime + 0.3);  // falling buzz
        } else if (type === 'win') {
          osc.type = 'sine';
          osc.frequency.setValueAtTime(600, ac.currentTime);
          osc.frequency.exponentialRampToValueAtTime(1200, ac.currentTime + 0.5); // triumphant sweep
        }
        gain.gain.setValueAtTime(0.3, ac.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, ac.currentTime + 0.5);
        osc.start(); osc.stop(ac.currentTime + 0.5);
      } catch(e) { /* Audio not available — silently skip */ }
    }

    // ── Word Categories ──
    const categories = {
      all: [
        {word:"JAVASCRIPT", hint:"The language powering the web"},
        {word:"HANGMAN",    hint:"This legendary word game"},
        {word:"CYBERPUNK",  hint:"Neon lights, high tech, low life"},
        {word:"MATRIX",     hint:"Red pill or blue pill?"},
        {word:"GLITCH",     hint:"Digital distortion"},
        {word:"QUANTUM",    hint:"Superposition of states"},
        {word:"NEURALINK",  hint:"Elon's brain interface"},
        {word:"BLOCKCHAIN", hint:"Decentralized ledger"},
        {word:"FIREWALL",   hint:"Digital defense system"},
        {word:"OVERCLOCK",  hint:"Push hardware beyond limits"}
      ],
      js: [
        {word:"PROMISE",    hint:"Handles async operations"},
        {word:"CLOSURE",    hint:"Function + lexical environment"},
        {word:"PROTOTYPE",  hint:"Object inheritance mechanism"},
        {word:"HOISTING",   hint:"Variables lifted to top"},
        {word:"EVENTLOOP",  hint:"JS concurrency model"}
      ],
      fun: [
        {word:"PIZZA",   hint:"Italian masterpiece"},
        {word:"TACO",    hint:"Mexican folded joy"},
        {word:"NINJA",   hint:"Stealth master"},
        {word:"UNICORN", hint:"Magical horse with horn"},
        {word:"MEME",    hint:"Internet culture unit"}
      ]
    };

    let currentWord = "", wins = 0, streak = 0, wrong = 0;
    let guessed = new Set(); // O(1) lookup — faster than Array.includes for repeated checks
    const canvas = document.getElementById('hangman-canvas');
    const ctx    = canvas.getContext('2d');
    let sway = 0; // incrementing angle for Math.sin sway animation

    // ── Canvas Hangman Drawing ──
    function drawHangman() {
      ctx.clearRect(0, 0, 400, 300);
      ctx.strokeStyle = '#00ffff'; ctx.lineWidth = 6; ctx.lineCap = 'round';

      // Gallows — always drawn
      ctx.beginPath(); ctx.moveTo(50,280); ctx.lineTo(250,280); ctx.stroke(); // base
      ctx.beginPath(); ctx.moveTo(100,280); ctx.lineTo(100,50); ctx.lineTo(220,50); ctx.lineTo(220,80); ctx.stroke(); // pole + arm + rope

      // Sway: only active when wrong === 6 (game over)
      sway += 0.05;
      const sw = wrong === 6 ? Math.sin(sway * 3) * 20 : 0; // Math.sin(-1 to 1) * 20 = ±20px

      if (wrong >= 1) {
        ctx.beginPath(); ctx.arc(220+sw, 100, 25, 0, Math.PI*2); ctx.stroke(); // head
        if (wrong >= 6) {
          // X eyes on death
          ctx.beginPath(); ctx.moveTo(210+sw,90); ctx.lineTo(230+sw,110); ctx.moveTo(230+sw,90); ctx.lineTo(210+sw,110); ctx.stroke();
        }
      }
      if (wrong >= 2) { ctx.beginPath(); ctx.moveTo(220+sw,125); ctx.lineTo(220+sw,200); ctx.stroke(); } // body
      if (wrong >= 3) { ctx.beginPath(); ctx.moveTo(220+sw,150); ctx.lineTo(180+sw,180); ctx.stroke(); } // left arm
      if (wrong >= 4) { ctx.beginPath(); ctx.moveTo(220+sw,150); ctx.lineTo(260+sw,180); ctx.stroke(); } // right arm
      if (wrong >= 5) { ctx.beginPath(); ctx.moveTo(220+sw,200); ctx.lineTo(180+sw,250); ctx.stroke(); } // left leg
      if (wrong >= 6) {
        ctx.beginPath(); ctx.moveTo(220+sw,200); ctx.lineTo(260+sw,250); ctx.stroke(); // right leg
        requestAnimationFrame(drawHangman); // loop sway animation
      }
    }

    function newGame(category = 'all') {
      const words  = categories[category] || categories.all;
      const sel    = words[Math.floor(Math.random() * words.length)];
      currentWord  = sel.word;
      guessed      = new Set(); // fresh Set each game
      wrong        = 0;
      document.getElementById('message').textContent  = '';
      document.getElementById('hint-text').textContent = 'Hint: ' + sel.hint;
      document.getElementById('lives').textContent    = 6;
      buildKeyboard(); renderWord(); drawHangman();
    }

    function renderWord() {
      const display = document.getElementById('word-display');
      display.innerHTML = '';
      [...currentWord].forEach(letter => { // spread string → array of chars
        const div = document.createElement('div');
        div.className = 'letter';
        if (guessed.has(letter)) { div.textContent = letter; div.classList.add('revealed'); }
        display.appendChild(div);
      });
    }

    function buildKeyboard() {
      const kb = document.getElementById('keyboard');
      kb.innerHTML = '';
      // Generate A–Z using charCode 65–90
      for (let i = 65; i <= 90; i++) {
        const letter = String.fromCharCode(i);
        const btn = document.createElement('div');
        btn.className = 'key';
        btn.textContent = letter;
        btn.setAttribute('role', 'button');
        btn.setAttribute('aria-label', 'Letter ' + letter);
        btn.onclick = () => guess(letter, btn);
        kb.appendChild(btn);
      }
    }

    function guess(letter, btn) {
      if (guessed.has(letter) || wrong >= 6 || checkWin()) return; // prevent re-guess
      guessed.add(letter);
      if (currentWord.includes(letter)) {
        btn.classList.add('correct'); playSound('correct'); renderWord();
        if (checkWin()) win();
      } else {
        wrong++; btn.classList.add('wrong'); playSound('wrong');
        document.getElementById('lives').textContent = 6 - wrong;
        drawHangman(); if (wrong >= 6) lose();
      }
    }

    function checkWin() {
      return [...currentWord].every(l => guessed.has(l)); // spread + every + Set.has
    }

    function win() {
      wins++; streak++;
      document.getElementById('wins').textContent   = wins;
      document.getElementById('streak').textContent = streak;
      document.getElementById('message').textContent = '🏆 GENIUS! YOU WIN!';
      document.getElementById('message').style.color = '#00ff88';
      playSound('win');
      // canvas-confetti side-cannon: fires from both edges for 5 seconds
      const end = Date.now() + 5000;
      (function frame() {
        confetti({ particleCount: 7, angle: 60,  spread: 55, origin: { x: 0 } }); // left cannon
        confetti({ particleCount: 7, angle: 120, spread: 55, origin: { x: 1 } }); // right cannon
        if (Date.now() < end) requestAnimationFrame(frame);
      }());
    }

    function lose() {
      streak = 0;
      document.getElementById('streak').textContent = 0;
      document.getElementById('message').textContent = '💀 GAME OVER!';
      document.getElementById('message').style.color = '#ff0066';
      // Reveal word letter by letter with staggered setTimeout
      document.querySelectorAll('.letter').forEach((el, i) => {
        setTimeout(() => { el.textContent = currentWord[i]; el.classList.add('revealed'); }, i * 100);
      });
    }

    // Physical keyboard support: map keydown to on-screen key by nth-child index
    window.addEventListener('keydown', e => {
      const upper = e.key.toUpperCase();
      if (/^[A-Z]$/.test(upper)) {
        const key = document.querySelector(`.key:nth-child(${upper.charCodeAt(0) - 64})`);
        if (key) key.click();
      }
    });

    // Start game on DOM ready; also run sway animation loop every 50ms as fallback
    document.addEventListener('DOMContentLoaded', () => { newGame(); setInterval(drawHangman, 50); });
  </script>
</body>
</html>

/* Coodeverse – Hangman Cyber Arena CSS | CC BY 4.0 */

:root {
  --bg: #0a001f;        /* Deep space black-purple background */
  --primary: #00ffff;   /* Neon cyan — primary glow color */
  --accent: #ff00ff;    /* Neon magenta — secondary accent */
  --glass: rgba(20,20,60,0.5); /* Glassmorphism panel */
  --text: #e0f7ff;
  --danger: #ff0066;    /* Red for wrong guesses */
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: var(--bg);
  /* Multi-layer: two radial-gradient spotlights + dark diagonal base */
  background-image:
    radial-gradient(circle at 20% 80%, rgba(120,0,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,255,255,0.3) 0%, transparent 50%),
    linear-gradient(135deg, #0f0033 0%, #000011 100%);
  color: var(--text); font-family:'Rajdhani',sans-serif; min-height:100vh; overflow-x:hidden;
}

/* CRT scanline overlay
   Linear gradient creates 2px visible / 2px transparent stripe pattern every 4px.
   TranslateY animation scrolls the stripes downward in a loop — classic CRT effect.
   pointer-events:none ensures all game interactions pass through. */
.scanline {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(transparent 50%, rgba(0,255,255,0.03) 50%);
  background-size: 100% 4px;
  pointer-events:none;
  animation: scan 8s linear infinite;
  z-index: 9999;
}
@keyframes scan { 0%{transform:translateY(-100%);} 100%{transform:translateY(100%);} }

header { text-align:center; padding:2rem 1rem; }

/* Animated gradient text with alternating glow
   IMPORTANT: text-shadow does NOT work with -webkit-text-fill-color:transparent.
   Use filter:drop-shadow() instead for glow effects on gradient text. */
.title {
  font-family:'Orbitron',monospace; font-size:clamp(3rem,8vw,6rem); font-weight:800;
  background: linear-gradient(90deg,#00ffff,#ff00ff,#00ffff); background-size:200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: gradient 6s ease infinite, glow 2s ease-in-out infinite alternate;
}
@keyframes gradient { 0%,100%{background-position:0%;} 50%{background-position:100%;} }
@keyframes glow { from{filter:drop-shadow(0 0 20px #00ffff);} to{filter:drop-shadow(0 0 40px #ff00ff);} }

.stats { display:flex; justify-content:center; gap:2rem; margin:1rem 0; font-size:1.3rem; font-weight:700; }
.stat { background:rgba(0,255,255,0.1); padding:0.8rem 1.5rem; border-radius:50px; border:1px solid rgba(0,255,255,0.3); min-width:120px; text-align:center; }

/* Glassmorphism card: backdrop-filter blur creates frosted glass over the background gradients */
#game-container {
  background:var(--glass); backdrop-filter:blur(20px);
  border:1px solid rgba(0,255,255,0.2); border-radius:30px;
  padding:3rem 2rem; max-width:800px; margin:2rem auto;
  box-shadow: 0 0 50px rgba(0,255,255,0.3), inset 0 0 50px rgba(0,0,0,0.5);
}
#hangman-canvas { width:100%; height:300px; margin:0 auto 2rem; display:block; filter:drop-shadow(0 0 30px var(--primary)); }
#word-display { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:2rem 0; }
.letter { width:60px; height:80px; background:linear-gradient(135deg,rgba(0,255,255,0.2),rgba(255,0,255,0.1)); border:3px solid var(--primary); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:bold; transition:all 0.4s; }
.letter.revealed { background:linear-gradient(135deg,#00ffff,#ff00ff); color:#000; transform:scale(1.15) rotate(5deg); animation:pop 0.6s ease; }
@keyframes pop { 0%{transform:scale(0) rotate(180deg);} 70%{transform:scale(1.3) rotate(-10deg);} 100%{transform:scale(1.15) rotate(5deg);} }
#hint-text { text-align:center; font-size:1.4rem; margin:1.5rem 0; padding:1rem; background:rgba(255,0,255,0.1); border-radius:20px; border:1px dashed var(--accent); }
#keyboard { display:grid; grid-template-columns:repeat(auto-fit,minmax(55px,1fr)); gap:12px; margin:2.5rem 0; }
.key { background:linear-gradient(135deg,rgba(0,255,255,0.2),rgba(0,255,255,0.05)); border:2px solid var(--primary); color:white; font-family:'Orbitron',monospace; font-size:1.4rem; font-weight:bold; padding:18px 8px; border-radius:18px; cursor:pointer; transition:all 0.2s; text-transform:uppercase; }
.key:hover { transform:translateY(-8px) scale(1.1); box-shadow:0 20px 40px rgba(0,255,255,0.4); background:var(--primary); color:black; }
.key.correct { background:#00ff88!important; color:black; animation:correct 0.6s ease; }
.key.wrong { background:var(--danger)!important; animation:wrong 0.6s ease; }
@keyframes correct { 0%,100%{transform:scale(1);} 50%{transform:scale(1.3);} }
@keyframes wrong { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-10px);} 75%{transform:translateX(10px);} }
#controls { display:flex; justify-content:center; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
#controls button { background:linear-gradient(135deg,var(--primary),var(--accent)); border:none; padding:1rem 2rem; border-radius:50px; color:black; font-weight:bold; font-size:1.2rem; cursor:pointer; box-shadow:0 10px 30px rgba(0,255,255,0.4); transition:all 0.3s; }
#controls button:hover { transform:translateY(-5px) scale(1.05); box-shadow:0 20px 40px rgba(0,255,255,0.6); }
#message { text-align:center; font-size:2.5rem; font-weight:bold; min-height:80px; margin:2rem 0; text-shadow:0 0 20px var(--primary); }
@media (max-width:600px) { .letter{width:50px;height:65px;font-size:2rem;} .key{padding:14px 4px;font-size:1.2rem;} }

// Coodeverse – Hangman Cyber Arena JS | CC BY 4.0 | https://coodeverse.com

// ────────────────────────────────────────────
// WEB AUDIO API SOUND EFFECTS
// Creates a disposable AudioContext per sound — avoids stale context issues.
// No external library needed — all browsers support AudioContext natively.
// ────────────────────────────────────────────
function playSound(type) {
  try {
    const ac   = new (window.AudioContext || window.webkitAudioContext)();
    const osc  = ac.createOscillator();
    const gain = ac.createGain();
    osc.connect(gain); gain.connect(ac.destination);

    if (type === 'correct') {
      // Rising chirp: 800Hz → 1200Hz over 100ms
      osc.frequency.setValueAtTime(800, ac.currentTime);
      osc.frequency.exponentialRampToValueAtTime(1200, ac.currentTime + 0.1);
    } else if (type === 'wrong') {
      // Falling buzz: 400Hz → 100Hz over 300ms — "sad trombone" feel
      osc.frequency.setValueAtTime(400, ac.currentTime);
      osc.frequency.exponentialRampToValueAtTime(100, ac.currentTime + 0.3);
    } else if (type === 'win') {
      // Triumphant sweep: sine wave 600Hz → 1200Hz over 500ms
      osc.type = 'sine';
      osc.frequency.setValueAtTime(600, ac.currentTime);
      osc.frequency.exponentialRampToValueAtTime(1200, ac.currentTime + 0.5);
    }
    // Volume envelope: start at 0.3, fade to near-zero over 500ms
    gain.gain.setValueAtTime(0.3, ac.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, ac.currentTime + 0.5);
    osc.start(); osc.stop(ac.currentTime + 0.5);
  } catch(e) { /* Silently ignore if audio unavailable (e.g. iframe) */ }
}

// ── Word Categories ──
const categories = {
  all: [
    {word:"JAVASCRIPT", hint:"The language powering the web"},
    {word:"HANGMAN",    hint:"This legendary word game"},
    {word:"CYBERPUNK",  hint:"Neon lights, high tech, low life"},
    {word:"MATRIX",     hint:"Red pill or blue pill?"},
    {word:"GLITCH",     hint:"Digital distortion"},
    {word:"QUANTUM",    hint:"Superposition of states"},
    {word:"NEURALINK",  hint:"Elon's brain interface"},
    {word:"BLOCKCHAIN", hint:"Decentralized ledger"},
    {word:"FIREWALL",   hint:"Digital defense system"},
    {word:"OVERCLOCK",  hint:"Push hardware beyond limits"}
  ],
  js: [
    {word:"PROMISE",   hint:"Handles async operations"},
    {word:"CLOSURE",   hint:"Function + lexical environment"},
    {word:"PROTOTYPE", hint:"Object inheritance mechanism"},
    {word:"HOISTING",  hint:"Variables lifted to top"},
    {word:"EVENTLOOP", hint:"JS concurrency model"}
  ],
  fun: [
    {word:"PIZZA",   hint:"Italian masterpiece"},
    {word:"TACO",    hint:"Mexican folded joy"},
    {word:"NINJA",   hint:"Stealth master"},
    {word:"UNICORN", hint:"Magical horse with horn"},
    {word:"MEME",    hint:"Internet culture unit"}
  ]
};

let currentWord = "", wins = 0, streak = 0, wrong = 0;
let guessed = new Set(); // Set provides O(1) .has() vs Array O(n) .includes()
const canvas = document.getElementById('hangman-canvas');
const ctx    = canvas.getContext('2d');
let sway = 0; // ever-incrementing angle for Math.sin oscillation

// ────────────────────────────────────────────
// CANVAS HANGMAN DRAWING + MATH.SIN SWAY
// ────────────────────────────────────────────
function drawHangman() {
  ctx.clearRect(0, 0, 400, 300);
  ctx.strokeStyle = '#00ffff'; ctx.lineWidth = 6; ctx.lineCap = 'round';

  // Gallows structure — always visible
  ctx.beginPath(); ctx.moveTo(50,280); ctx.lineTo(250,280); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(100,280); ctx.lineTo(100,50); ctx.lineTo(220,50); ctx.lineTo(220,80); ctx.stroke();

  // Sway physics: Math.sin(sway * 3) = faster oscillation, * 20 = ±20px amplitude
  // Sway ONLY activates on game over (wrong === 6) — hanging effect
  sway += 0.05;
  const sw = wrong === 6 ? Math.sin(sway * 3) * 20 : 0;

  // Progressive body part reveal
  if (wrong >= 1) {
    ctx.beginPath(); ctx.arc(220+sw, 100, 25, 0, Math.PI*2); ctx.stroke(); // head
    if (wrong >= 6) {
      // X eyes drawn over head on death
      ctx.beginPath();
      ctx.moveTo(210+sw,90); ctx.lineTo(230+sw,110);
      ctx.moveTo(230+sw,90); ctx.lineTo(210+sw,110);
      ctx.stroke();
    }
  }
  if (wrong >= 2) { ctx.beginPath(); ctx.moveTo(220+sw,125); ctx.lineTo(220+sw,200); ctx.stroke(); }
  if (wrong >= 3) { ctx.beginPath(); ctx.moveTo(220+sw,150); ctx.lineTo(180+sw,180); ctx.stroke(); }
  if (wrong >= 4) { ctx.beginPath(); ctx.moveTo(220+sw,150); ctx.lineTo(260+sw,180); ctx.stroke(); }
  if (wrong >= 5) { ctx.beginPath(); ctx.moveTo(220+sw,200); ctx.lineTo(180+sw,250); ctx.stroke(); }
  if (wrong >= 6) {
    ctx.beginPath(); ctx.moveTo(220+sw,200); ctx.lineTo(260+sw,250); ctx.stroke();
    requestAnimationFrame(drawHangman); // loop for continuous sway animation
  }
}

function newGame(category = 'all') {
  const words = categories[category] || categories.all;
  const sel   = words[Math.floor(Math.random() * words.length)];
  currentWord = sel.word;
  guessed     = new Set();
  wrong       = 0;
  document.getElementById('message').textContent  = '';
  document.getElementById('hint-text').textContent = 'Hint: ' + sel.hint;
  document.getElementById('lives').textContent    = 6;
  buildKeyboard(); renderWord(); drawHangman();
}

function renderWord() {
  const display = document.getElementById('word-display');
  display.innerHTML = '';
  // Spread string → char array: [...'HELLO'] === ['H','E','L','L','O']
  [...currentWord].forEach(letter => {
    const div = document.createElement('div');
    div.className = 'letter';
    if (guessed.has(letter)) { div.textContent = letter; div.classList.add('revealed'); }
    display.appendChild(div);
  });
}

// ────────────────────────────────────────────
// DYNAMIC KEYBOARD — Generated from charCodes
// ────────────────────────────────────────────
function buildKeyboard() {
  const kb = document.getElementById('keyboard');
  kb.innerHTML = '';
  // A = charCode 65, Z = charCode 90
  for (let i = 65; i <= 90; i++) {
    const letter = String.fromCharCode(i);
    const btn    = document.createElement('div');
    btn.className = 'key';
    btn.textContent = letter;
    btn.setAttribute('role', 'button');
    btn.onclick = () => guess(letter, btn);
    kb.appendChild(btn);
  }
}

function guess(letter, btn) {
  if (guessed.has(letter) || wrong >= 6 || checkWin()) return; // guard: no re-guess
  guessed.add(letter);
  if (currentWord.includes(letter)) {
    btn.classList.add('correct'); playSound('correct'); renderWord();
    if (checkWin()) win();
  } else {
    wrong++; btn.classList.add('wrong'); playSound('wrong');
    document.getElementById('lives').textContent = 6 - wrong;
    drawHangman(); if (wrong >= 6) lose();
  }
}

function checkWin() {
  // every() + Set.has() — checks all chars in word are guessed
  return [...currentWord].every(l => guessed.has(l));
}

function win() {
  wins++; streak++;
  document.getElementById('wins').textContent   = wins;
  document.getElementById('streak').textContent = streak;
  document.getElementById('message').textContent = '🏆 GENIUS! YOU WIN!';
  document.getElementById('message').style.color = '#00ff88';
  playSound('win');
  // canvas-confetti side cannon: fires from both edges simultaneously for 5s
  const end = Date.now() + 5000;
  (function frame() {
    confetti({ particleCount: 7, angle: 60,  spread: 55, origin: { x: 0 } }); // left edge
    confetti({ particleCount: 7, angle: 120, spread: 55, origin: { x: 1 } }); // right edge
    if (Date.now() < end) requestAnimationFrame(frame);
  }());
}

function lose() {
  streak = 0;
  document.getElementById('streak').textContent = 0;
  document.getElementById('message').textContent = '💀 GAME OVER!';
  document.getElementById('message').style.color = '#ff0066';
  // Reveal word letter-by-letter with 100ms stagger
  document.querySelectorAll('.letter').forEach((el, i) => {
    setTimeout(() => { el.textContent = currentWord[i]; el.classList.add('revealed'); }, i * 100);
  });
}

// Physical keyboard: map A-Z keydown to corresponding on-screen key click
// charCode - 64 gives position (A=1, B=2...Z=26) matching nth-child index
window.addEventListener('keydown', e => {
  const upper = e.key.toUpperCase();
  if (/^[A-Z]$/.test(upper)) {
    const key = document.querySelector(`.key:nth-child(${upper.charCodeAt(0) - 64})`);
    if (key) key.click();
  }
});

document.addEventListener('DOMContentLoaded', () => {
  newGame();
  setInterval(drawHangman, 50); // fallback redraw loop for sway between rAF frames
});

Free Hangman Cyberpunk Game HTML CSS JavaScript 2025

CSS & JavaScript Techniques Inside

Live Preview

Full Source Code

Frequently Asked Questions

Download your free cyberpunk Hangman game today