Skip to content

馃 Cannot save fiddle#2469

Description

@khoaprotk190-jpg

Error code

ERRW:SS1.0

Were you logged in?

Yes

Your username (if logged in)

DJ_KMCVNz

Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zombie Survival</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<canvas id="c"></canvas>

<div id="hud">
  <div id="stats">
    <div class="stat-item"><span class="label">Survivors:</span><span id="survCount" class="val survivor">0</span></div>
    <div class="stat-item"><span class="label">Zombies:</span><span id="zombCount" class="val zombie">0</span></div>
    <div class="stat-item"><span class="label">Kills:</span><span id="killCount" class="val kill">0</span></div>
    <div class="stat-item"><span class="label">Rescued:</span><span id="rescCount" class="val rescue">0</span></div>
    <div class="stat-item"><span class="label">Mines:</span><span id="mineCount" class="val mine">0</span></div>
    <div class="stat-item"><span class="label">Wave:</span><span id="waveNum" class="val gold-text">1</span></div>
    <div class="stat-item"><span class="label">Points:</span><span id="pointsCount" class="val gold-text">0</span></div>
    <div class="stat-item"><span class="label">Gems:</span><span id="gemsCount" class="val gem-text">0</span></div>
  </div>

  <div id="bottomBar">
    <div id="controls">
      <button id="spawnCagedBtn" class="btn">Spawn Cage</button>
      <button id="spawnZombBtn" class="btn danger">Spawn Horde</button>
      <button id="spawnGeneralBtn" class="btn gold">Spawn General</button>
      <button id="spawnBomberBtn" class="btn teal">Spawn Bomber</button>
      <button id="spawnFreezerBtn" class="btn grey">Spawn Freezer</button>
      <button id="spawnZBomberBtn" class="btn danger">Spawn Zombie Bomber</button>
      <button id="spawnKingBtn" class="btn danger">Spawn Zombie King</button>
      <button id="spawnBuilderBtn" class="btn gold">Spawn Builder</button>
      <button id="spawnDogBtn" class="btn teal">Spawn Dog</button>
      <button id="restartBtn" class="btn secondary">Restart Game</button>
    </div>
    <canvas id="minimap"></canvas>
  </div>
</div>

<div id="banner">
  <div id="bannerText">EVERYONE INFECTED</div>
  <div id="bannerSub">Click Restart to try again</div>
</div>

<audio id="bossMusic" src="aura-of-glory.mp3" preload="auto"></audio>

<script src="script.js"></script>
</body>
</html>

Your JavaScript

'-'

Your CSS

:root {
  --bg-dark: #0f141d;
  --panel-bg: rgba(20, 26, 38, 0.85);
  --accent-blue: #5bb0ff;
  --survivor-green: #7ee081;
  --danger: #ff4d4d;
  --gold: #ffce00;
  --text-light: #f0f4f8;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-light);
}

#c {
  display: block;
  width: 100vw;
  height: 100vh;
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

#stats {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(8px);
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: fit-content;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.label { color: #94a3b8; }
.val { font-weight: 800; }
.val.survivor { color: var(--survivor-green); }
.val.zombie { color: var(--danger); }
.val.kill { color: var(--gold); }
.val.rescue { color: var(--accent-blue); }
.val.mine { color: #ff9800; }
.val.gold-text { color: #ffd700; }
.val.gem-text { color: #4fc3f7; }

#bottomBar {
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

#controls { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn:active { transform: translateY(0); }
.btn.danger { background: #dc2626; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); }
.btn.secondary { background: #475569; box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3); }
.btn.gold { background: #b8860b; box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3); }
.btn.teal { background: #00897b; box-shadow: 0 4px 12px rgba(0, 137, 123, 0.3); }
.btn.grey { background: #37474f; box-shadow: 0 4px 12px rgba(55, 71, 79, 0.3); }

#minimap {
  width: 220px;
  height: 110px;
  background: var(--panel-bg);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

#banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  padding: 30px 50px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  display: none;
}

#bannerText { font-size: 32px; font-weight: 900; color: var(--danger); letter-spacing: 1px; margin-bottom: 8px; }
#bannerSub { font-size: 14px; color: #94a3b8; }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions