AI game creator

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

No:6475

181

←

Prev Next

→

Developer User3589｜Date and time 23/7/2 14:27:33
Build time 20.302 sec｜Game capacity 2.03KB｜

Script

了解しました。以下にローリングポストが転がっていくゲームのHTMLファイルを実装します。

📮

このプログラムは、ローリングポストが画面内を一定時間で横に転がっていくだけでなく、スマホのスワイプ操作によってポストを移動させることができます。ポストは絵文字で表示されています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

了解しました。以下にローリングポストが転がっていくゲームのHTMLファイルを実装します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ローリングポスト</title>
  <style>
    #post {
      font-size: 100px;
      position: relative;
      top: 0;
      left: 0;
      animation: roll 5s linear infinite;
    }

@keyframes roll {
      0% {
        transform: translateX(-1000px);
      }
      100% {
        transform: translateX(1000px);
      }
    }
  </style>
</head>
<body>
  <div id="post">📮</div>

// スワイプでポストを移動
    let isTouching = false;
    let startTouchX = 0;
    let currentTranslateX = 0;

post.addEventListener("touchstart", handleTouchStart);
    post.addEventListener("touchmove", handleTouchMove);
    post.addEventListener("touchend", handleTouchEnd);

function handleTouchStart(e) {
      if (isTouching) return;
      isTouching = true;
      startTouchX = e.changedTouches[0].clientX;
      post.style.animationPlayState = "paused";
    }

function handleTouchEnd() {
      isTouching = false;
      currentTranslateX += e.changedTouches[0].clientX - startTouchX;
      startTouchX = 0;
      post.style.animationPlayState = "running";
    }
  </script>
</body>
</html>
```