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

No:5449

1675

←

Prev Next

→

Very long game from left to right
Developer User3589｜Date and time 23/6/30 3:02:11
Build time 30.477 sec｜Game capacity 2.799KB｜

Script

了解しました。以下に、左右にスクロールするゲームの実装例を示します。

左右スクロールゲーム

スクロールするテキストが表示されます。左右の矢印キーでスクロール速度が変わります。

スクロールが開始された状態では画面をタッチすると停止します。再度タッチすると再開します。

ゲームを開始するには画面をタッチしてください。

このプログラムは、指定したテキストが左右にスクロールしていくゲームです。キーボードの左矢印キーと右矢印キーを押すことで、スクロール速度を変更することができます。また、スマートフォンでは画面をタッチすることでゲームの開始/停止を切り替えることができます。必要に応じてテキストや表示文言を変更して、自分好みのゲームにカスタマイズしてください。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。以下に、左右にスクロールするゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>左右スクロールゲーム</title>
  <style>
    body {
      overflow-x: scroll;  /* 横スクロールを有効化 */
      white-space: nowrap;  /* テキストが改行されないようにする */
      font-size: 50px;
    }
  </style>
  <script>
    // スクロール速度の初期値
    let scrollSpeed = 10;

// スクロール速度を増減させる関数
    function changeScrollSpeed(amount) {
      scrollSpeed += amount;
    }

// キーボードイベントのリスナーを追加
    window.addEventListener('keydown', function(event) {
      if (event.keyCode === 37) {  // 左矢印キー
        changeScrollSpeed(-5);  // スクロール速度を減らす
      }
      if (event.keyCode === 39) {  // 右矢印キー
        changeScrollSpeed(5);  // スクロール速度を増やす
      }
    });

// スクロールを開始する関数
    let scrollInterval;
    function startScrolling() {
      scrollInterval = setInterval(function() {
        window.scrollBy(scrollSpeed, 0);  // 指定した速度でスクロール
      }, 10);  // 10ミリ秒ごとにスクロールを実行
    }

// スクロールを停止する関数
    function stopScrolling() {
      clearInterval(scrollInterval);
    }

// ゲームの開始と停止を切り替える関数
    function toggleGame() {
      if (scrollInterval) {
        stopScrolling();
        scrollInterval = null;
      } else {
        startScrolling();
      }
    }
  </script>
</head>
<body>
  <h1>左右スクロールゲーム</h1>
  <p>スクロールするテキストが表示されます。左右の矢印キーでスクロール速度が変わります。</p>
  <p>スクロールが開始された状態では画面をタッチすると停止します。再度タッチすると再開します。</p>
  <p>ゲームを開始するには画面をタッチしてください。</p>