have ones teeth change color (colour)'s game

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

No:6001

1625

←

Prev Next

→

have ones teeth change color (colour)
Developer User1006｜Date and time 23/7/1 13:53:56
Build time 20.988 sec｜Game capacity 2.39KB｜

Script

以下に、JavaScriptを使用して歯が抜け変わるゲームを実装したサンプルコードを示します。

このゲームでは、画面上に表示された歯をクリックすることで歯が抜けるという処理が行われます。歯が抜けた状態の歯はグレーで表示され、クリックすることはできません。クリックした歯が抜けたかどうかはJavaScriptの配列を使用して管理しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

以下に、JavaScriptを使用して歯が抜け変わるゲームを実装したサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #teeth-container {
        display: flex;
        flex-wrap: wrap;
      }

.tooth {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        background-color: white;
        border: 1px solid black;
        cursor: pointer;
        transition: background-color 0.3s;
      }

.tooth-removed {
        background-color: gray;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <div id="teeth-container"></div>
    
    <script>
      // 歯のデータを管理する配列
      const teeth = ["🦷", "🦷", "🦷", "🦷", "🦷", "🦷", "🦷", "🦷", "🦷", "🦷"];

// 歯が抜けたかどうかを管理する配列
      const isToothRemoved = new Array(teeth.length).fill(false);

// 歯をクリックした際の処理
      function clickTooth(index) {
        if (!isToothRemoved[index]) {
          // 歯が抜ける処理
          isToothRemoved[index] = true;
          renderTeeth();
        }
      }

// 歯を描画する関数
      function renderTeeth() {
        const teethContainer = document.getElementById("teeth-container");
        teethContainer.innerHTML = "";

for (let i = 0; i < teeth.length; i++) {
          const toothElement = document.createElement("div");
          toothElement.className = "tooth";
          toothElement.addEventListener("click", () => clickTooth(i));

if (isToothRemoved[i]) {
            toothElement.className += " tooth-removed";
            toothElement.innerHTML = "";
          } else {
            toothElement.innerHTML = teeth[i];
          }

teethContainer.appendChild(toothElement);
        }
      }

// ゲームの初期化
      function initializeGame() {
        renderTeeth();
      }

initializeGame();
    </script>
  </body>
</html>
```