sin,cos,tan curve motion's game

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

No:6664

116

←

Prev Next

→

sin,cos,tan curve motion
Developer User3898｜Date and time 23/7/3 2:36:21
Build time 28.137 sec｜Game capacity 2.753KB｜

Script

了解しました。以下に、スマホ操作を前提とした、sin、cos、tanのカーブモーションを行うゲームの実装例を示します。

このゲームでは、画面をタッチすることでプレイヤーの移動を制御します。画面の左上を原点として、プレイヤーはsin、cosの値を使ってカーブモーションで移動します。プレイヤーは画面の端に到達すると反対側から再出発します。ゲームをプレイする場合は、上記のコードをHTMLファイルにコピーして、ブラウザで開いてください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、スマホ操作を前提とした、sin、cos、tanのカーブモーションを行うゲームの実装例を示します。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カーブモーションゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

const player = {
        x: 50,
        y: canvas.height / 2,
        radius: 20,
        dx: 0,
        dy: 0,
        speed: 5
      };

function updatePlayer() {
        player.x += player.dx;
        player.y += player.dy;

if (player.x < player.radius) {
          player.x = player.radius;
        } else if (player.x > canvas.width - player.radius) {
          player.x = canvas.width - player.radius;
        }

if (player.y < player.radius) {
          player.y = player.radius;
        } else if (player.y > canvas.height - player.radius) {
          player.y = canvas.height - player.radius;
        }
      }

function drawPlayer() {
        ctx.beginPath();
        ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
      }

function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        updatePlayer();
        drawPlayer();

requestAnimationFrame(gameLoop);
      }

gameLoop();

function handleTouchStart(event) {
        if (event.touches.length === 1) {
          const touch = event.touches[0];
          player.dx = Math.sin((touch.clientX / canvas.width) * Math.PI * 2) * player.speed;
          player.dy = Math.cos((touch.clientY / canvas.height) * Math.PI * 2) * player.speed;
        }
      }

function handleTouchEnd() {
        player.dx = 0;
        player.dy = 0;
      }

canvas.addEventListener("touchstart", handleTouchStart);
      canvas.addEventListener("touchend", handleTouchEnd);
    };
  </script>
</body>

</html>
```

このゲームでは、画面をタッチすることでプレイヤーの移動を制御します。画面の左上を原点として、プレイヤーはsin、cosの値を使ってカーブモーションで移動します。プレイヤーは画面の端に到達すると反対側から再出発します。

ゲームをプレイする場合は、上記のコードをHTMLファイルにコピーして、ブラウザで開いてください。