index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>doooooonuts.</title>
    <meta name="description" content="Tire sur les donuts !">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
    <style>
      body { margin: 0; overflow: hidden; }
      #title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 4em;
        color: #fff;
        font-family: sans-serif;
        text-shadow: 0 0 20px rgba(255,255,255,0.8);
        pointer-events: none;
        z-index: 10;
        transition: opacity 1s ease;
      }
      #crosshair {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        border: 2px solid white;
        border-radius: 50%;
        z-index: 10;
        display: none;
        pointer-events: none;
      }
      /* Cacher le curseur mais garder son emplacement */
      body {
        cursor: none;
      }
    </style>
  </head>
  <body>
    <div id="title">Doooooonuts.</div>
    <div id="crosshair"></div>

    <audio autoplay loop>
      <source src="background.mp3" type="audio/mpeg">
    </audio>

    <a-scene background="color: black">
      <a-assets></a-assets>

      <a-entity id="cameraRig">
        <a-entity camera look-controls="pointerLockEnabled: true" position="0 1.6 8" wasd-controls="enabled: true">
          <a-entity 
            cursor="rayOrigin: mouse" 
            raycaster="objects: .clickable" 
            position="0 0 -1" 
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" 
            material="color: white; shader: flat" 
            visible="false">
          </a-entity>
        </a-entity>
      </a-entity>

      <a-entity light="type: ambient; color: #888"></a-entity>
      <a-entity light="type: point; intensity: 1.2" position="0 4 4"></a-entity>

      <a-entity id="donut-container"></a-entity>
      <a-entity id="confetti-container"></a-entity>
    </a-scene>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const title = document.getElementById('title');
        const crosshair = document.getElementById('crosshair');
        const donutContainer = document.querySelector('#donut-container');
        const confettiContainer = document.querySelector('#confetti-container');
        const donutColors = ['#e67e22', '#ff6384', '#36a2eb', '#9b59b6', '#2ecc71', '#f1c40f', '#1abc9c'];

        setTimeout(() => {
          title.style.opacity = '0';
          setTimeout(() => title.style.display = 'none', 1000);
          crosshair.style.display = 'block';
        }, 4000);

        // Suivre la position de la souris et déplacer le curseur au centre du réticule
        document.addEventListener('mousemove', (event) => {
          crosshair.style.left = `${event.pageX - crosshair.offsetWidth / 2}px`;
          crosshair.style.top = `${event.pageY - crosshair.offsetHeight / 2}px`;
        });

        function createDonut() {
          const donut = document.createElement('a-torus');
          donut.setAttribute('class', 'clickable');
          donut.setAttribute('radius', '1.5');
          donut.setAttribute('radius-tubular', '0.4');
          donut.setAttribute('color', donutColors[Math.floor(Math.random() * donutColors.length)]);
          donut.setAttribute('position', `${(Math.random() - 0.5) * 40} ${(Math.random() - 0.5) * 20 + 2} ${(Math.random() - 0.5) * 40}`);
          donut.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true; dur: 5000; easing: linear');
          donut.setAttribute('animation__scalein', 'property: scale; from: 0 0 0; to: 1 1 1; dur: 500; easing: easeOutBack');

          donut.addEventListener('click', () => {
            if (!donut.object3D) return;
            spawnConfetti(donut.object3D.position);
            donut.remove();
            createDonut();
          });

          donutContainer.appendChild(donut);
        }

        function spawnConfetti(position) {
          for (let i = 0; i < 30; i++) {
            const confetti = document.createElement('a-box');
            confetti.setAttribute('depth', '0.02');
            confetti.setAttribute('height', '0.1');
            confetti.setAttribute('width', '0.02');
            confetti.setAttribute('color', donutColors[Math.floor(Math.random() * donutColors.length)]);
            confetti.setAttribute('position', `${position.x + (Math.random() - 0.5)} ${position.y + (Math.random() - 0.5)} ${position.z + (Math.random() - 0.5)}`);
            confetti.setAttribute('animation__move', `property: position; to: ${position.x + (Math.random() - 0.5) * 4} ${position.y + Math.random() * 2} ${position.z + (Math.random() - 0.5) * 4}; dur: 1000; easing: easeOutQuad`);
            confetti.setAttribute('animation__fade', 'property: material.opacity; from: 1; to: 0; dur: 1000; easing: linear');

            confettiContainer.appendChild(confetti);

            setTimeout(() => confetti.remove(), 1000);
          }
        }

        for (let i = 0; i < 20; i++) {
          createDonut();
        }
      });
    </script>
  </body>
</html>