72,452,862

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Experiment 9</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: black;
      font-size: 16px;
    }

    #container {
      position: relative;
      width: 100vw;
      height: 100vw;
      max-height: 100vh;
      max-width: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      image-rendering: pixelated;
    }

    #health-bar {
      position: absolute;
      top: 2%;
      right: 2%;
      width: 20%;
      height: 2%;
      border: 0.2% solid #fff;
    }

    #health {
      height: 100%;
      background-color: red;
    }

    #flash {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 0, 0, 0.5);
      display: none;
    }

    .arrow {
      position: absolute;
      color: rgb(160, 24, 24);
      font-weight: bolder;
      text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 1px 0 #000,
        -1px 1px 0 #000,
        1px 0 0 #000,
        -1px 0 0 #000;
      animation: move 1s linear;
      image-rendering: pixelated;
    }

    @keyframes move {
      0% {
        top: 0;
      }

      100% {
        top: 100%;
      }
    }

    #time-display {
      display: none;
      text-align: center;
      color: red;
      background-color: black;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: 'Courier New', monospace;
    }

    #time {
      font-size: 2em;
    }

    #message {
      font-size: 1em;
      color: white;
      text-align: center;
      margin-top: 1em;
      font-family: 'Courier New', monospace;
    }

    #hit-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 10%;
      background-color: rgba(255, 0, 0, 0.5);
    }

    #start-buttons {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1em;
      width: 90%;
      padding-top: 1em;
    }

    .start-button {
      padding: 0.5em 1em;
      font-size: 1em;
      cursor: pointer;
      background-color: #770505;
      color: #fff;
      border: 0.2em solid #fff;
      border-radius: 0px;
      transition: background-color 0.3s, transform 0.3s;
      width: 8em;
      text-align: center;
    }

    .start-button:hover {
      background-color: #f40202;
      transform: scale(1.1);
    }

    #game-description {
      font-size: 1.2em;
      color: white;
      text-align: center;
      margin-top: 0.5em;
      font-family: 'Courier New', monospace;
      max-width: 90%;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 0.5em;
      border-radius: 0.5em;
    }

    #mobile-controls {
      position: absolute;
      bottom: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 20px;
      display: none;
    }

    .control-button {
      width: 60px;
      height: 60px;
      background-color: rgba(255, 255, 255, 0.5);
      border: none;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      color: black;
    }

    @media (max-width: 300px) {
      #time {
        font-size: 2.5em;
      }

      #message {
        font-size: 0.5em;
      }

      #game-description {
        font-size: 0.3em;
      }

      .start-button {
        font-size: 0.4em;
      }

    }
  </style>
</head>

<body>
  <div id="container">
    <img id="main-image" src="/content/c7eee19073836714fd07cbf2175fbccf472ff3d1eda32bde6c1040e1b0004f1ci0" alt="Kaiju">
    <div id="health-bar">
      <div id="health"></div>
    </div>
    <div id="flash"></div>
    <div id="hit-box"></div>
    <div id="start-buttons">
      <button class="start-button" data-mode="normal">Normal</button>
      <button class="start-button" data-mode="hell">Hell</button>
      <div id="game-description">
        Can you defeat the Hydra... A cursed creation that threatens the lives of the mischievous E9s.<br><br>
        AGoodDoctor needs your help, you must match the arrow buttons when they reach the red zone to take the hydra's life away.<br><br>
        Good luck.
      </div>
    </div>
    <div id="time-display">
      <div id="time"></div>
      <div id="message">Congratulations, you have defeated the second boss level in <span id="selected-mode"></span> mode. Make sure to share your time in the comments with your X handle and post your video on X tagging @agooddoctoor. The 10 fastest will receive contracts.</div>
    </div>
    <div id="mobile-controls">
      <button class="control-button" data-key="ArrowUp">↑</button>
      <button class="control-button" data-key="ArrowDown">↓</button>
      <button class="control-button" data-key="ArrowLeft">←</button>
      <button class="control-button" data-key="ArrowRight">→</button>
    </div>
  </div>
  <audio id="background-music" loop>
    <source src="/content/918a68b26b77f3b6f1a286c35bd1b1c1370fc5ad92d43f15416db8ae6ea2330ci0" type="audio/mp3">
  </audio>

  <script>
    let health = 100;
    const maxHealth = 100;
    const regenRate = 0.8;
    const regenInterval = 100;
    let startTime = null;
    let gameStarted = false;
    let gameMode = 'normal';
    let arrowSpeed = 1;

    const arrows = ['↑', '↓', '←', '→'];
    let currentArrow = '';

    function updateHealthBar() {
      const healthBar = document.getElementById('health');
      healthBar.style.width = `${health}%`;
    }

    function flashScreen() {
      const flash = document.getElementById('flash');
      flash.style.display = 'block';
      setTimeout(() => {
        flash.style.display = 'none';
      }, 100);
    }

    function displayTime() {
      const endTime = Date.now();
      const timeElapsed = ((endTime - startTime) / 1000).toFixed(2);
      const timeDisplay = document.getElementById('time-display');
      const timeElement = document.getElementById('time');
      timeElement.textContent = `${timeElapsed}`;
      document.getElementById('selected-mode').textContent = gameMode.toUpperCase();
      timeDisplay.style.display = 'flex';
      timeDisplay.style.justifyContent = 'center';
      timeDisplay.style.alignItems = 'center';
    }

    function regenerateHealth() {
      if (health < maxHealth) {
        health = Math.min(maxHealth, health + regenRate);
        updateHealthBar();
      }
    }

    function createArrow() {
      const container = document.getElementById('container');
      const arrowDiv = document.createElement('div');
      arrowDiv.className = 'arrow';
      currentArrow = arrows[Math.floor(Math.random() * arrows.length)];
      arrowDiv.textContent = currentArrow;

      const arrowSize = Math.min(container.clientWidth, container.clientHeight) * 0.15;
      arrowDiv.style.fontSize = `${arrowSize}px`;

      const randomLeft = (Math.random() * 0.7 + 0.1) * container.clientWidth - arrowSize;
      arrowDiv.style.left = `${randomLeft}px`;

      arrowDiv.style.animationDuration = gameMode === 'hell' ? '0.5s' : '1s';

      container.appendChild(arrowDiv);

      arrowDiv.addEventListener('animationiteration', () => {
        checkArrowInTargetArea(arrowDiv);
      });

      arrowDiv.addEventListener('animationend', () => {
        if (arrowDiv.getBoundingClientRect().bottom >= container.clientHeight) {
          health = maxHealth;
          updateHealthBar();
        }
        arrowDiv.remove();
        if (gameStarted) createArrow();
      });

      setInterval(() => {
        checkArrowInTargetArea(arrowDiv);
      }, 50);
    }

    function checkArrowInTargetArea(arrowDiv) {
      const hitBox = document.getElementById('hit-box');
      const arrowRect = arrowDiv.getBoundingClientRect();
      const hitBoxRect = hitBox.getBoundingClientRect();

      if (arrowRect.bottom > hitBoxRect.top && arrowRect.top < hitBoxRect.bottom) {
        arrowDiv.classList.add('target-area');
      } else {
        arrowDiv.classList.remove('target-area');
      }
    }

    function handleKeyPress(event) {
      if (!gameStarted) return;

      const keyMap = {
        'ArrowUp': '↑',
        'ArrowDown': '↓',
        'ArrowLeft': '←',
        'ArrowRight': '→'
      };

      const arrowDiv = document.querySelector('.arrow');
      const hitBox = document.getElementById('hit-box');

      const arrowRect = arrowDiv.getBoundingClientRect();
      const hitBoxRect = hitBox.getBoundingClientRect();

      if (keyMap[event.key] === currentArrow) {
        if (arrowRect.bottom > hitBoxRect.top && arrowRect.top < hitBoxRect.bottom) {
          if (health > 0) {
            health -= 10;
            updateHealthBar();
            flashScreen();
            arrowDiv.remove();
            if (health > 0) {
              setTimeout(createArrow, 100);
            }
          }
          if (health <= 0) {
            displayTime();
            gameStarted = false;
            document.getElementById('background-music').pause();
          }
        } else {
          health = maxHealth;
          updateHealthBar();
        }
      } else {
        health = maxHealth;
        updateHealthBar();
      }
    }

    function handleButtonClick(event) {
      const key = event.target.getAttribute('data-key');
      const simulatedEvent = new KeyboardEvent('keydown', {
        key
      });
      handleKeyPress(simulatedEvent);
    }

    function startGame(mode) {
      document.getElementById('start-buttons').style.display = 'none';
      gameStarted = true;
      gameMode = mode;
      startTime = Date.now();
      createArrow();
      setInterval(regenerateHealth, regenInterval);
      document.getElementById('background-music').play();

      if (isMobileDevice()) {
        document.getElementById('mobile-controls').style.display = 'flex';
      }
    }

    function isMobileDevice() {
      return /Mobi|Android/i.test(navigator.userAgent);
    }

    document.querySelectorAll('.start-button').forEach(button => {
      button.addEventListener('click', (e) => {
        const mode = e.target.getAttribute('data-mode');
        startGame(mode);
      });
    });

    document.addEventListener('DOMContentLoaded', () => {
      document.addEventListener('keydown', handleKeyPress);
      const controlButtons = document.querySelectorAll('.control-button');
      controlButtons.forEach(button => button.addEventListener('click', handleButtonClick));
    });

    window.addEventListener('resize', () => {
      const arrowDiv = document.querySelector('.arrow');
      const arrowSize = Math.min(container.clientWidth, container.clientHeight) * 0.2;
      arrowDiv.style.fontSize = `${arrowSize}px`;
      const randomLeft = (Math.random() * 0.7 + 0.1) * document.getElementById('container').clientWidth - arrowSize;
      arrowDiv.style.left = `${randomLeft}px`;
    });
  </script>
</body>

</html>
<!-- Built by PP: https://procrastinatepixels.com -->