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

No:36635

←

Prev Next

→

Dentist Simulator
Developer User16822｜Date and time 24/1/18 4:52:37
Build time 14.6 sec｜Game capacity 3.33KB｜

Script

Dentist Simulator

Jugar de nuevo

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<html>
<head>
  <style>
    body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: Arial, sans-serif;
    }
    
    h1 {
      text-align: center;
    }
    
    .toolbar {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 20px;
    }
    
    .toothbrush img {
      height: 80px;
      cursor: pointer;
    }
    
    .tooth {
      display: inline-block;
      position: relative;
      width: 100px;
      height: 100px;
      background-color: white;
      border: 2px solid #ccc;
      border-radius: 50%;
      margin: 10px;
      text-align: center;
      cursor: pointer;
    }
    
    .tooth:before,
    .tooth:after {
      content: "";
      position: absolute;
      background: #ccc;
    }
    
    .tooth:before {
      width: 10px;
      height: 50px;
      top: 15px;
      left: calc(50% - 5px);
    }
    
    .tooth:after {
      width: 20px;
      height: 10px;
      top: calc(50% - 5px);
      left: calc(50% - 10px);
    }
    
    .tooth.pain:before, .tooth.pain:after {
      background: red;
    }
    
    .tooth.brush:before, .tooth.brush:after {
      background: green;
    }
    
    .play-again {
      display: none;
      margin-top: 20px;
      cursor: pointer;
      font-weight: bold;
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Dentist Simulator</h1>
  
  <div class="toolbar">
    <div class="toothbrush">
      <img src="toothbrush.png" alt="Toothbrush">
    </div>
  </div>
  
  <div id="mouth">
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
    <div class="tooth"></div>
  </div>
  
  <div class="play-again">Jugar de nuevo</div>
  
  <script>
    var teeth = document.querySelectorAll('.tooth');
    var toothbrush = document.querySelector('.toothbrush img');
    var playAgainButton = document.querySelector('.play-again');
    
    var canPlay = true;
    
    toothbrush.addEventListener('click', function() {
      if (canPlay) {
        var randomToothIndex = Math.floor(Math.random() * teeth.length);
        var tooth = teeth[randomToothIndex];
        
        tooth.classList.add('brush');
        toothbrush.style.opacity = '0.5';
        playAgainButton.style.display = 'none';
        
        setTimeout(function() {
          tooth.classList.remove('brush');
          toothbrush.style.opacity = '1';
          
          if (!tooth.classList.contains('pain')) {
            tooth.classList.add('pain');
            
            var allTeethInPain = Array.from(teeth).every(function(t) {
              return t.classList.contains('pain');
            });
            
            if (allTeethInPain) {
              canPlay = false;
              playAgainButton.style.display = 'block';
            }
          }
        }, 1000);
      }
    });
    
    playAgainButton.addEventListener('click', function() {
      teeth.forEach(function(tooth) {
        tooth.classList.remove('pain');
      });
      
      canPlay = true;
      playAgainButton.style.display = 'none';
    });
  </script>
</body>
</html>