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

No:3302

2208

←

Prev Next

→

Actual Gemstone Gacha
Developer User3662｜Date and time 23/6/24 12:22:54
Build time 16.941 sec｜Game capacity 1.659KB｜

Script

宝石ガチャ

この宝石ガチャでは、ボタンをクリックすると2秒間宝石が回転し、停止したらランダムに選ばれた宝石が表示されます。スマホでも遊びやすいよう、ボタンと宝石の画像サイズは大きめに設定しています。また、CSSのアニメーションを使って宝石を回転させています。ランダムに選ばれる宝石は絵文字を使っています。お宝が当たることを願って、ぜひ遊んでみてください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<div id="game">
  <h1>宝石ガチャ</h1>
  <p id="result"></p>
  <button onclick="play()">ガチャを回す</button>
  <img id="gem" src="gem.png">
</div>

gem.classList.add("spin");

setTimeout(() => {
      const randomIndex = Math.floor(Math.random() * gems.length);
      const selectedGem = gems[randomIndex];
      result.textContent = selectedGem;
      gem.classList.remove("spin");
      gem.src = "gem-" + (randomIndex + 1) + ".png";
    }, 2000);
  }
</script>

button {
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    background-color: #FFD700;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
  }

button:hover {
    background-color: #DAA520;
  }

img {
    width: 150px;
    margin-top: 30px;
    transition: transform 2s;
  }

.spin {
    transform: rotate(360deg);
  }
</style>