ICD-10 Cyber Coder

by ElectricGalaxy27
206 lines5.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ICD-10 Cyber Coder</title>
  <style>
    :root {
      --neon-cyan: #00f0ff;
      --neon-pink: #ff007f;
      --bg-dark: #0a0a12;
    }
    body {
      margin: 0;
      background: var(--bg-dark);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: 'Courier New', Courier, monospace;
      color: #fff;
    }
    #game-container {
      position: relative;
      border: 2px solid var(--neon-cyan);
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    }
    canvas {
      background: #05050a;
      display: block;
    }
    #ui-overlay {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      font-size: 18px;
      text-shadow: 0 0 5px var(--neon-cyan);
    }
    #input-buffer {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 28px;
      color: var(--neon-pink);
      text-shadow: 0 0 10px var(--neon-pink);
      letter-spacing: 2px;
    }
  </style>
</head>
<body>

  <div id="game-container">
    <div id="ui-overlay">
      <div id="score-display">SCORE: 0000</div>
      <div id="life-display">INTEGRITY: 100%</div>
    </div>
    <div id="input-buffer"></div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
  </div>

  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const inputBufferEl = document.getElementById('input-buffer');
    const scoreEl = document.getElementById('score-display');
    const lifeEl = document.getElementById('life-display');

    // Game Database (Trendy Medical Coding Dataset)
    const database = [
      { term: "HYPERTENSION", code: "I10" },
      { term: "DIABETES TYPE 2", code: "E11" },
      { term: "CHEST PAIN", code: "R07.9" },
      { term: "ACUTE COUGH", code: "R05.1" },
      { term: "HEADACHE", code: "R51.9" },
      { term: "SLEEP APNEA", code: "G47.33" }
    ];

    // State Setup
    let state = {
      score: 0,
      integrity: 100,
      currentInput: "",
      targets: [],
      spawnTimer: 0,
      spawnRate: 120, // Frames between spawns
      gameActive: true
    };

    // Input Handling
    window.addEventListener('keydown', e => {
      if (!state.gameActive) return;

      if (e.key === 'Backspace') {
        state.currentInput = state.currentInput.slice(0, -1);
      } else if (e.key === 'Enter') {
        checkMatch();
      } else if (e.key.length === 1) {
        state.currentInput += e.key.toUpperCase();
      }
      
      inputBufferEl.innerText = state.currentInput || "TYPE CODE...";
    });

    function spawnTarget() {
      const data = database[Math.floor(Math.random() * database.length)];
      state.targets.push({
        term: data.term,
        code: data.code,
        x: Math.random() * (canvas.width - 200) + 100,
        y: -20,
        speed: Math.random() * 0.8 + 0.5
      });
    }

    function checkMatch() {
      const matchIndex = state.targets.findIndex(t => t.code === state.currentInput);
      if (matchIndex !== -1) {
        state.targets.splice(matchIndex, 1);
        state.score += 100;
        scoreEl.innerText = `SCORE: ${String(state.score).padStart(4, '0')}`;
      }
      state.currentInput = "";
      inputBufferEl.innerText = "";
    }

    // Engine Loop
    function update() {
      if (!state.gameActive) return;

      state.spawnTimer++;
      if (state.spawnTimer >= state.spawnRate) {
        spawnTarget();
        state.spawnTimer = 0;
      }

      for (let i = state.targets.length - 1; i >= 0; i--) {
        let t = state.targets[i];
        t.y += t.speed;

        // Check breach boundary
        if (t.y > canvas.height - 80) {
          state.integrity -= 20;
          state.targets.splice(i, 1);
          lifeEl.innerText = `INTEGRITY: ${state.integrity}%`;
          if (state.integrity <= 0) {
            state.gameActive = false;
          }
        }
      }
    }

    function draw() {
      // Clear with slight alpha trailing effect
      ctx.fillStyle = 'rgba(5, 5, 10, 0.3)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Draw Laser Boundary Line
      ctx.strokeStyle = '#ff007f';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(0, canvas.height - 80);
      ctx.lineTo(canvas.width, canvas.height - 80);
      ctx.stroke();

      if (!state.gameActive) {
        ctx.fillStyle = '#ff007f';
        ctx.font = '40px "Courier New"';
        ctx.textAlign = 'center';
        ctx.fillText("FIREWALL BREACHED", canvas.width / 2, canvas.height / 2);
        return;
      }

      // Render descending targets
      state.targets.forEach(t => {
        ctx.fillStyle = '#00f0ff';
        ctx.font = 'bold 16px "Courier New"';
        ctx.textAlign = 'center';
        ctx.fillText(t.term, t.x, t.y);
        
        // Helper hint for gameplay text balance
        ctx.fillStyle = 'rgba(255,255,255,0.4)';
        ctx.font = '12px "Courier New"';
        ctx.fillText(`[Hint: ${t.code}]`, t.x, t.y + 18);
      });
    }

    function loop() {
      update();
      draw();
      requestAnimationFrame(loop);
    }

    // Initializer
    inputBufferEl.innerText = "TYPE CODE...";
    loop();
  </script>
</body>
</html>
Game Source: ICD-10 Cyber Coder

Creator: ElectricGalaxy27
Libraries: none
Complexity: complex (206 lines, 5.4 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: icd-10-cyber-coder-electricgalaxy27" to link back to the original. Then publish at arcadelab.ai/publish.