PIXEL SURVIVORS

by brownie2026

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Pixel Survivors - Premium Edition</title>
    <style>
      html, body {
          margin: 0; padding: 0; width: 100%; height: 100%;
          background-color: #050508; color: #fff; overflow: hidden;
          position: fixed; touch-action: none; user-select: none; -webkit-user-select: none;
      }

      body, div, span, h1, h2, p, button, strong {
          font-family: 'Courier New', Courier, monospace;
          image-rendering: pixelated; font-smooth: never;
          -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;
      }

      canvas {
          display: block; width: 100vw; height: 100vh;
          image-rendering: pixelated; position: absolute; top: 0; left: 0; z-index: 1;
      }

      #xp-bar-container {
          position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: 14px;
          background-color: #1a1a24; border: 2px solid #4f5d75; border-radius: 4px; overflow: hidden; z-index: 10; display: none;
      }

      #xp-bar {
          width: 0%; height: 100%; background: linear-gradient(90deg, #00d2ff, #00ffaa);
          box-shadow: 0 0 10px #00ffaa; transition: width 0.1s ease;
      }

      #game-ui {
          position: absolute; top: 34px; left: 14px; font-size: 16px; font-weight: bold;
          text-shadow: 2px 2px 0px #000, -1px -1px 0px #000; display: flex; flex-wrap: wrap; gap: 15px; z-index: 10; letter-spacing: 1px; display: none;
      }

      #ui-hp { color: #ff4757; }
      #ui-level { color: #eccc68; }

      #levelup-screen {
          display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
          background: linear-gradient(135deg, #14141f 0%, #0b0b10 100%); border: 4px solid #ffd700;
         ...