スワイプ　タップ　タッチゲーム's game

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

No:37785

←

Prev Next

→

スワイプ　タップ　タッチゲーム
Developer User17126｜Date and time 24/1/21 16:26:31
Build time 23.415 sec｜Game capacity 5.924KB｜

Script

了解しました。以下がスマホで操作できるサンプルのゲームです。

🎯

このゲームでは、画面をスワイプしてゲーム要素（🎯の絵文字）を移動させることができます。また、ゲーム要素をタップすると「Congratulations! You caught it!」というメッセージが表示されます。注意点として、スマホの操作にも対応するため、マウスイベントとタッチイベントの両方を取得しています。スマホでの動作確認が必要です。また、ゲーム開始時にゲーム要素をランダムな位置に配置するために、`moveGameElement`関数を実行しています。これにより、ゲームを開始するときにゲーム要素が画面内のランダムな位置に表示されます。以上を守って実装したゲームのプログラムです。お楽しみいただければ幸いです。

←

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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000;
    }
    #game {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 60px;
      color: #fff;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <div id="game">🎯</div>

// ランダムな位置にゲーム要素を移動する関数
    function moveGameElement() {
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;

var randomX = Math.floor(Math.random() * (screenWidth - gameElement.offsetWidth));
      var randomY = Math.floor(Math.random() * (screenHeight - gameElement.offsetHeight));

gameElement.style.left = randomX + "px";
      gameElement.style.top = randomY + "px";
    }

// ゲーム要素をクリックした時の処理
    gameElement.addEventListener("click", function() {
      alert("Congratulations! You caught it!");
      gameElement.style.display = "none"; // ゲーム要素を非表示にする
    });

// スワイプでゲーム要素を移動する関数
    function handleSwipe(event) {
      var startX = 0;
      var startY = 0;

// スワイプ開始位置を取得
      if (event.touches) {
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
      } else {
        startX = event.clientX;
        startY = event.clientY;
      }

function handleMove(event) {
        var currentX = 0;
        var currentY = 0;

// スワイプ中の位置を取得
        if (event.touches) {
          currentX = event.touches[0].clientX;
          currentY = event.touches[0].clientY;
        } else {
          currentX = event.clientX;
          currentY = event.clientY;
        }

// スワイプした距離を計算
        var deltaX = currentX - startX;
        var deltaY = currentY - startY;

// ゲーム要素の現在位置を取得
        var gameElementX = gameElement.offsetLeft;
        var gameElementY = gameElement.offsetTop;

// ゲーム要素を移動
        gameElement.style.left = gameElementX + deltaX + "px";
        gameElement.style.top = gameElementY + deltaY + "px";

// ドラッグ中にスクロールしないようにする
        event.preventDefault();
      }

function handleEnd(event) {
        // スワイプ中の位置を取得
        var endX = 0;
        var endY = 0;

if (event.changedTouches) {
          endX = event.changedTouches[0].clientX;
          endY = event.changedTouches[0].clientY;
        } else {
          endX = event.clientX;
          endY = event.clientY;
        }

// スワイプした距離を計算
        var deltaX = endX - startX;
        var deltaY = endY - startY;

// ゲーム要素の現在位置を取得
        var gameElementX = gameElement.offsetLeft;
        var gameElementY = gameElement.offsetTop;

// ゲーム要素を移動
        gameElement.style.left = gameElementX + deltaX + "px";
        gameElement.style.top = gameElementY + deltaY + "px";

// ドラッグ終了時にゲーム要素を画面内に収める
        var screenWidth = window.innerWidth;
        var screenHeight = window.innerHeight;

if (gameElementX < 0) {
          gameElement.style.left = "0px";
        }
        if (gameElementY < 0) {
          gameElement.style.top = "0px";
        }
        if (gameElementX + gameElement.offsetWidth > screenWidth) {
          gameElement.style.left = (screenWidth - gameElement.offsetWidth) + "px";
        }
        if (gameElementY + gameElement.offsetHeight > screenHeight) {
          gameElement.style.top = (screenHeight - gameElement.offsetHeight) + "px";
        }
      }

// スワイプ中の移動と終了時の処理を登録
      document.addEventListener("mousemove", handleMove);
      document.addEventListener("mouseup", function(event) {
        handleEnd(event);
        document.removeEventListener("mousemove", handleMove);
        document.removeEventListener("mouseup", arguments.callee);
      });

document.addEventListener("touchmove", handleMove);
      document.addEventListener("touchend", function(event) {
        handleEnd(event);
        document.removeEventListener("touchmove", handleMove);
        document.removeEventListener("touchend", arguments.callee);
      });
    }

// ゲーム要素を移動可能にする
    gameElement.addEventListener("mousedown", handleSwipe);
    gameElement.addEventListener("touchstart", handleSwipe);

// ゲーム開始時にゲーム要素をランダムな位置に配置
    moveGameElement();
  </script>
</body>
</html>
```

このゲームでは、画面をスワイプしてゲーム要素（🎯の絵文字）を移動させることができます。また、ゲーム要素をタップすると「Congratulations! You caught it!」というメッセージが表示されます。

注意点として、スマホの操作にも対応するため、マウスイベントとタッチイベントの両方を取得しています。スマホでの動作確認が必要です。

また、ゲーム開始時にゲーム要素をランダムな位置に配置するために、`moveGameElement`関数を実行しています。これにより、ゲームを開始するときにゲーム要素が画面内のランダムな位置に表示されます。

以上を守って実装したゲームのプログラムです。お楽しみいただければ幸いです。