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

No:1267

376

←

Prev Next

→

A game where a dark wizard will dominate in the re..ALL
Developer User3280｜Date and time 23/6/18 9:30:02
Build time 43.501 sec｜Game capacity 4.313KB｜

Script

Elementopia - La Batalla del Caballero y el Mago Oscuro

Un mago oscuro ha tomado el control del reino Elementopia, y ha corrompido la tierra, el agua, el aire y el fuego para crear monstruos. ¡El caballero debe vencer a los monstruos y al mago oscuro para salvar Elementopia!

🌎

🌊

🌬️

🔥

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<html>
<head>
  <title>Elementopia - La Batalla del Caballero y el Mago Oscuro</title>
  <style>
    body {
      font-size: 20px;
      text-align: center;
    }
    .game-board {
      margin: 20px auto;
      width: 90%;
      max-width: 500px;
      height: 350px;
      border: 2px solid black;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      background-color: #e9e9e9;
    }
    .element {
      width: 50px;
      height: 50px;
      font-size: 30px;
      cursor: pointer;
      background-color: transparent;
      border: 2px solid transparent;
    }
    .element.active {
      background-color: #ffa500;
      border: 2px solid black;
    }
    .knight {
      width: 100px;
      height: 100px;
      margin-top: 40px;
    }
    .monster {
      width: 50px;
      height: 50px;
      margin: 10px;
    }
    .dark-wizard {
      width: 100px;
      height: 100px;
      margin-top: 40px;
    }
  </style>
</head>
<body>
  <h1>Elementopia - La Batalla del Caballero y el Mago Oscuro</h1>
  <p>Un mago oscuro ha tomado el control del reino Elementopia, y ha corrompido la tierra, el agua, el aire y el fuego para crear monstruos. ¡El caballero debe vencer a los monstruos y al mago oscuro para salvar Elementopia!</p>
  
  <div class="game-board">
    <div class="element earth" data-element="earth">🌎</div>
    <div class="element water" data-element="water">🌊</div>
    <div class="element air" data-element="air">🌬️</div>
    <div class="element fire" data-element="fire">🔥</div>
    <img class="knight" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/man-knight_1f468-200d-1f3f2.png" alt="knight">
    <img class="monster" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/fire_1f525.png" alt="fire monster">
    <img class="monster" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/water-wave_1f30a.png" alt="water monster">
    <img class="monster" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/cloud_2601-fe0f.png" alt="air monster">
    <img class="monster" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/dizzy_1f4ab.png" alt="earth monster">
    <img class="dark-wizard" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/mage_1f9d9.png" alt="dark wizard">
  </div>
  
  <script>
    const elements = document.querySelectorAll('.element');
    const knight = document.querySelector('.knight');
    const monsters = document.querySelectorAll('.monster');
    const darkWizard = document.querySelector('.dark-wizard');
    let round = 1;
    
    elements.forEach(element => {
      element.addEventListener('click', () => {
        elements.forEach(element => {
          element.classList.remove('active');
        });
        element.classList.add('active');
        checkRound(element.dataset.element);
      });
    });
    
    function checkRound(selectedElement) {
      const monstersArray = ['fire', 'water', 'air', 'earth'];
      const randomMonster = monstersArray[Math.floor(Math.random() * monstersArray.length)];
      const monster = document.querySelector(`img[src$="${randomMonster}.png"]`);
      if (selectedElement === randomMonster) {
        monster.classList.add('hidden');
        alert(`Usted ha derrotado al monstruo!`);
        if (document.querySelectorAll('.monster.hidden').length === monsters.length) {
          alert(`¡Usted ha ganado la batalla y salvado Elementopia!`);
        }
      } else if (round === 3) {
        alert(`El mago oscuro aparece y te ataca con su magia oscura. ¡Se acabó la batalla!`);
        darkWizard.classList.add('active');
        document.querySelector('.element.active').classList.remove('active');
        knight.classList.add('hidden');
        monsters.forEach(monster => {
          monster.classList.add('hidden');
        });
      } else {
        alert(`El monstruo te ataca con ${randomMonster}!`);
        round += 1;
        document.querySelector('.element.active').classList.remove('active');
        if (round === 3) {
          alert(`¡El mago oscuro aparece!`);
        }
      }
    }
  </script>
</body>
</html>