Ocean waves just by looking at them's game

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

No:7709

2016

←

Prev Next

→

Ocean waves just by looking at them
Developer o2pi4｜Date and time 23/7/9 13:42:59
Build time 14.227 sec｜Game capacity 3.189KB｜

Script

了解しました。以下に、スマートフォンで遊べる波のゲームの例を示します。

このプログラムは、波が画面内を右へ移動し、サーファーが波に乗るかどうかを判定します。サーファーはスマートフォンのタッチ操作に応じて移動します。波に乗るとアラートが表示されます。サーフィンのゲームを楽しむことができます！

←

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>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// サーファーの初期位置
      let surferX = 200;
      let surferY = 360;

// 波の初期位置
      let waveX = 0;
      let waveY = 200;

// ゲームループ
      function gameLoop() {
        update();
        render();
      }

// ゲームの状態を更新する
      function update() {
        // 波を移動させる
        waveX += 1;
        waveY = 200 + Math.sin(waveX / 20) * 50;

// サーファーが波に乗っているか判定する
        if (surferX - 20 < waveX && surferX + 20 > waveX && surferY - 20 < waveY && surferY + 20 > waveY) {
          alert('波に乗った！');
        }
      }

// ゲームの状態を描画する
      function render() {
        // キャンバスをクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// 波を描画
        ctx.fillStyle = '#00f';
        ctx.beginPath();
        ctx.moveTo(waveX - 50, waveY);
        ctx.lineTo(waveX + 50, waveY);
        ctx.lineTo(waveX, waveY + 100);
        ctx.closePath();
        ctx.fill();

// サーファーを描画
        ctx.fillStyle = '#f00';
        ctx.beginPath();
        ctx.arc(surferX, surferY, 20, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
      }

// タッチ操作でサーファーを移動させる
      canvas.addEventListener('touchstart', handleTouchStart, false);
      canvas.addEventListener('touchmove', handleTouchMove, false);
      canvas.addEventListener('touchend', handleTouchEnd, false);

let startX;
      let startY;

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

function handleTouchMove(event) {
        event.preventDefault();
        const deltaX = event.touches[0].clientX - startX;
        const deltaY = event.touches[0].clientY - startY;
        surferX += deltaX;
        surferY += deltaY;
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
      }

function handleTouchEnd(event) {
        event.preventDefault();
      }

// ゲームループを開始する
      setInterval(gameLoop, 16.7);
    });
  </script>
</body>
</html>
```

このプログラムは、波が画面内を右へ移動し、サーファーが波に乗るかどうかを判定します。サーファーはスマートフォンのタッチ操作に応じて移動します。波に乗るとアラートが表示されます。

サーフィンのゲームを楽しむことができます！