AI game creator

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

No:6849

178

←

Prev Next

→

merry-go-round
Developer User3898｜Date and time 23/7/4 0:47:46
Build time 23.586 sec｜Game capacity 2.192KB｜

Script

了解です。以下はスマホで遊べるシンプルなメリーゴーランドゲームの実装例です。

このプログラムは、スマホ上で表示されるメリーゴーランドを作成します。円形の回転する部分をHTMLの`div`要素で、馬が跳ねるアニメーションを持つオブジェクトを画像で表現しています。タップすると馬の跳ねるアニメーションを一時停止・再開することができます。なお、絵文字を使用する際には該当の絵文字が使用環境で表示されるか確認してください。

←

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>
    #carousel {
      width: 200px;
      height: 200px;
      background-color: aliceblue;
      border-radius: 50%;
      position: relative;
      margin: 0 auto;
      animation-name: rotate;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

@keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.horse {
      width: 30px;
      height: 30px;
      position: absolute;
      bottom: 100px;
      left: calc(50% - 15px);
      animation-name: bounce;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

@keyframes bounce {
      0% {
        bottom: 100px;
      }
      50% {
        bottom: 120px;
      }
      100% {
        bottom: 100px;
      }
    }
  </style>
</head>
<body>
  <div id="carousel"></div>
  <img class="horse" src="🐴" alt="馬">
  <script>
    document.addEventListener("DOMContentLoaded", function(){
      var carousel = document.getElementById("carousel");
      var horse = document.querySelector(".horse");

carousel.addEventListener("click", function(){
        if (horse.style.animationPlayState === "paused") {
          horse.style.animationPlayState = "running";
        } else {
          horse.style.animationPlayState = "paused";
        }
      });
    });
  </script>
</body>
</html>
```

このプログラムは、スマホ上で表示されるメリーゴーランドを作成します。円形の回転する部分をHTMLの`div`要素で、馬が跳ねるアニメーションを持つオブジェクトを画像で表現しています。タップすると馬の跳ねるアニメーションを一時停止・再開することができます。

なお、絵文字を使用する際には該当の絵文字が使用環境で表示されるか確認してください。