AI game creator

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

No:40010

←

Prev Next

→

スイカゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 18:08:37
Build time 15.538 sec｜Game capacity 3.167KB｜

Script

了解しました。以下にスマホ操作を前提としたスイカゲームの実装例を記述します。

スワイプしてスイカを切る！ 🍉

スコア: 0

上記のコードは、スワイプした方向によってスコアが加算されるスイカゲームの例です。スワイプエリアをタップし、スワイプした方向に応じてスコアが増え、新しいスイカが表示されます（ただし、左・上・下のスワイプは現時点では特定の処理は行われません）。なお、スマートフォンで実行することを前提としたため、タッチイベントを使用してスワイプを検知しています。また、表示されるスイカは絵文字の「🍉」を使用しています。

←

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 {
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-size: 30px;
    }

#gameContainer {
      text-align: center;
    }

#swipeArea {
      border: 2px dashed #ccc;
      padding: 10px;
    }

#score {
      margin-top: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="swipeArea">スワイプしてスイカを切る！ 🍉</div>
    <div id="score">スコア: 0</div>
  </div>

swipeArea.addEventListener('touchstart', handleTouchStart, false);
      swipeArea.addEventListener('touchmove', handleTouchMove, false);

let startX, startY;

function handleTouchStart(event) {
        const firstTouch = event.touches[0];
        startX = firstTouch.clientX;
        startY = firstTouch.clientY;
      }

function handleTouchMove(event) {
        if (!startX || !startY) {
          return;
        }

const touch = event.touches[0];
        const deltaX = touch.clientX - startX;
        const deltaY = touch.clientY - startY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            // 右にスワイプした場合の処理
            score++;
            scoreDisplay.textContent = `スコア: ${score}`;

// スイカを切った後の処理（例：次のスイカを表示する）
            displayNewWatermelon();
          } else {
            // 左にスワイプした場合の処理
          }
        } else {
          if (deltaY > 0) {
            // 下にスワイプした場合の処理
          } else {
            // 上にスワイプした場合の処理
          }
        }

startX = null;
        startY = null;

event.preventDefault();
      }

function displayNewWatermelon() {
        const watermelon = document.createElement('div');
        watermelon.textContent = '🍉';
        watermelon.style.fontSize = '100px';

swipeArea.innerHTML = '';
        swipeArea.appendChild(watermelon);
      }
    });
  </script>
</body>
</html>
```

上記のコードは、スワイプした方向によってスコアが加算されるスイカゲームの例です。スワイプエリアをタップし、スワイプした方向に応じてスコアが増え、新しいスイカが表示されます（ただし、左・上・下のスワイプは現時点では特定の処理は行われません）。

なお、スマートフォンで実行することを前提としたため、タッチイベントを使用してスワイプを検知しています。また、表示されるスイカは絵文字の「🍉」を使用しています。