Click here for free DL of the app version that can save data.

No:13162

107

←

Prev Next

→

Dream Haven, sandbox dreams game
Developer User5784｜Date and time 23/8/27 6:58:48
Build time 11.657 sec｜Game capacity 2.601KB｜

Script

Dream Haven - Jogo de Sonhos na Areia

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Dream Haven - Jogo de Sonhos na Areia</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding-top: 50px;
      }
      .sandbox {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 0 auto;
        position: relative;
      }
      .pictogram {
        position: absolute;
        top: 0;
        left: 0;
      }
      .pictogram img {
        width: 50px;
        height: 60px;
      }
      .pictogram span {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
      }
      .button {
        margin-top: 20px;
        display: inline-block;
        padding: 10px 20px;
        background-color: #008CBA;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
      }
      .button:hover {
        background-color: #005D7E;
      }
    </style>
  </head>
  <body>
    <h1>Dream Haven - Jogo de Sonhos na Areia</h1>
    
    <div class="sandbox"></div>
    
    <button class="button" onclick="generateDreams()">Gerar Sonhos</button>
    
    <script>
      // Lista de pictogramas de sonhos
      const dreams = [
        { icon: 'dream1.png', name: 'Viagem' },
        { icon: 'dream2.png', name: 'Família' },
        { icon: 'dream3.png', name: 'Amor' },
        { icon: 'dream4.png', name: 'Aventura' },
        { icon: 'dream5.png', name: 'Paz' },
        { icon: 'dream6.png', name: 'Sucesso' },
      ];
      
      // Função para gerar sonhos aleatórios
      function generateDreams() {
        const sandbox = document.querySelector('.sandbox');
        sandbox.innerHTML = '';
        
        for (let i = 0; i < 10; i++) {
          const randomIndex = Math.floor(Math.random() * dreams.length);
          const dream = dreams[randomIndex];
          
          const pictogram = createPictogram(dream.icon, dream.name);
          sandbox.appendChild(pictogram);
        }
      }
      
      // Função auxiliar para criar um pictograma de sonho
      function createPictogram(icon, name) {
        const pictogram = document.createElement('div');
        pictogram.classList.add('pictogram');
        
        const img = document.createElement('img');
        img.src = icon;
        
        const span = document.createElement('span');
        span.textContent = name;
        
        pictogram.appendChild(img);
        pictogram.appendChild(span);
        
        return pictogram;
      }
    </script>
  </body>
</html>