AI game creator

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

No:2403

260

←

Prev Next

→

hand spinner
Developer User3544｜Date and time 23/6/21 10:29:16
Build time 26.887 sec｜Game capacity 2.73KB｜

Script

スピード切替

リセット

※このプログラムは、ハンドスピナーを回してスコアを記録するシンプルなゲームです。スマートフォンでも遊べるように、レスポンシブ対応のデザインになっています。ボタンをタップすることで、スピードを切り替えたり、リセットすることができます。絵文字を使用せず、CSSでハンドスピナーを描画しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>ハンドスピナー</title>
    <style>
      #spinner {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border-top: 10px solid #ffe500;
        border-right: 10px solid #ffab00;
        border-bottom: 10px solid #ff6d00;
        border-left: 10px solid #ffab00;
        animation: spin 1s linear infinite;
      }

@keyframes spin {
        to {
          transform: rotate(1turn);
        }
      }

#score {
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-size: 24px;
        color: #ff6d00;
      }

.button {
        display: inline-block;
        background-color: #fff;
        color: #ff6d00;
        border: 2px solid #ff6d00;
        border-radius: 10px;
        font-size: 24px;
        padding: 10px 20px;
        margin: 0 10px;
        cursor: pointer;
      }

.button:hover {
        background-color: #ff6d00;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="spinner"></div>
    <div id="score">0</div>
    <div id="buttons">
      <div class="button" onclick="toggleSpeed()">スピード切替</div>
      <div class="button" onclick="reset()">リセット</div>
    </div>
    <script>
      const spinner = document.getElementById('spinner');
      const score = document.getElementById('score');
      let speed = 1;
      let rotation = 0;
      let timer;

function reset() {
        clearInterval(timer);
        rotation = 0;
        spinner.style.transform = `rotate(${rotation}deg)`;
        score.textContent = '0';
      }

function rotate() {
        rotation += 1;
        spinner.style.transform = `rotate(${rotation}deg)`;
        score.textContent = Math.floor(rotation / 360);
      }

timer = setInterval(rotate, 10);
    </script>
  </body>
</html>