A game where you must mine automatically using technology that can be upgraded using points in a skill tree and that points are earned by mining and that when you get all the upgrades a text appears saying you are the mining king.'s game

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

No:1286

294

←

Prev Next

→

A game where you must mine automatically using tec..ALL
Developer User3280｜Date and time 23/6/18 9:51:41
Build time 35.157 sec｜Game capacity 3.518KB｜

Script

Puntos: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Juego de Mineros</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        margin: 0;
        padding: 0;
        font-size: 30px;
        text-align: center;
        background-color: #c3e1e1;
      }
      #mine {
        width: 200px;
        height: 200px;
        margin: auto;
        margin-top: 80px;
        background-color: #bcaaa4;
        border-radius: 50%;
        position: relative;
      }
      #mine:hover {
        cursor: pointer;
      }
      #points {
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
      }
      #skill-tree {
        font-size: 20px;
        margin-top: 20px;
      }
      .skill {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #8c7b75;
        margin: 10px;
        border-radius: 50%;
        position: relative;
      }
      .skill:hover {
        cursor: pointer;
      }
      .skill.selected {
        background-color: #009688;
      }
      .skill .cost {
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #result {
        font-size: 50px;
        font-weight: bold;
        margin-top: 50px;
      }
    </style>
    
  </head>
  <body>
    <div id="mine"></div>
    <div id="points">Puntos: 0</div>
    <div id="skill-tree"></div>
    <div id="result"></div>
    
    <script>
      let points = 0;
      let mineLevel = 1;
      let skillTree = [
        {cost: 10, level: 1, increase: 1},
        {cost: 50, level: 1, increase: 5},
        {cost: 100, level: 1, increase: 10},
        {cost: 500, level: 1, increase: 50},
        {cost: 1000, level: 1, increase: 100},
        {cost: 5000, level: 1, increase: 500}
      ];
      
      const mine = document.getElementById('mine');
      const pointsDisplay = document.getElementById('points');
      const skillTreeDisplay = document.getElementById('skill-tree');
      const resultDisplay = document.getElementById('result');
      
      mine.addEventListener('click', () => {
        points += mineLevel;
        pointsDisplay.innerText = 'Puntos: ' + points;
      });
      
      skillTree.forEach((skill, index) => {
        const div = document.createElement('div');
        div.className = 'skill';
        div.dataset.cost = skill.cost;
        div.dataset.level = skill.level;
        div.dataset.increase = skill.increase;
        const cost = document.createElement('div');
        cost.className = 'cost';
        cost.innerText = skill.cost;
        div.appendChild(cost);
        skillTreeDisplay.appendChild(div);
        
        div.addEventListener('click', () => {
          if (points >= skill.cost && skill.level < 5) {
            points -= skill.cost;
            pointsDisplay.innerText = 'Puntos: ' + points;
            skill.cost *= 2;
            div.dataset.cost = skill.cost;
            div.dataset.level = ++skill.level;
            div.querySelector('.cost').innerText = skill.cost;
            mineLevel += skill.increase;
            div.classList.add('selected');
          }
        });
      });
      
      setInterval(() => {
        if (points >= 20000 && skillTree.every(skill => skill.level === 5)) {
          resultDisplay.innerText = '¡Eres el rey minero!';
        }
      }, 1000);
      
    </script>
  </body>
</html>