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

No:9931

157

←

Prev Next

→

Oneness Rhythm Exercise
Developer User4444｜Date and time 23/7/28 10:26:53
Build time 16.85 sec｜Game capacity 2.061KB｜

Script

了解です。以下がワンネスリズム体操の実装例です。

ワンネスリズム体操

この実装では、ボタンをクリックすると「3...2...1...スタート！」のカウントダウンが表示され、スタートしたら画面をタッチ（クリック）すると背景色が変化します。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。以下がワンネスリズム体操の実装例です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ワンネスリズム体操</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f3f3f3;
      }
      h1 {
        font-size: 3rem;
        margin-bottom: 2rem;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>ワンネスリズム体操</h1>
      <button onclick="start()">スタート</button>
      <p id="countdown"></p>
      <p id="result"></p>
    </div>
    <script>
      function start() {
        const countdown = document.getElementById("countdown");
        const result = document.getElementById("result");
        countdown.textContent = "3...";

setTimeout(() => {
          countdown.textContent = "2...";
          setTimeout(() => {
            countdown.textContent = "1...";
            setTimeout(() => {
              countdown.textContent = "スタート！";
			  document.body.addEventListener('touchstart', touchStart, {passive:false});
              document.body.addEventListener('touchend', touchEnd, {passive:false});
			  document.body.addEventListener('mousedown', touchStart, {passive:false});
              document.body.addEventListener('mouseup', touchEnd, {passive:false});
			  document.body.addEventListener('mouseleave', touchEnd, {passive:false});
              result.textContent = "開始しました！";
            }, 1000);
          }, 1000);
        }, 1000);
      }

function touchStart() {
        document.body.style.backgroundColor = "lightblue";
      }

function touchEnd() {
        document.body.style.backgroundColor = "#f3f3f3";
      }
    </script>
  </body>
</html>
```