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

No:6023

1203

←

Prev Next

→

Sunset
Developer User1006｜Date and time 23/7/1 14:08:49
Build time 25.539 sec｜Game capacity 2.745KB｜

Script

了解しました。以下は簡単なゲーム「夕立」の実装例です。

夕立ゲーム

スマホを傾けて夕立を避けよう！

このゲームでは、スマホを傾けることでプレイヤーを操作し、画面上を落ちてくる雨滴を避けるゲームです。スマホの傾きを取得するために、`mousemove` イベントを使用しています。ゲームオーバーになると、アラートでスコアを表示し、ページをリロードして再スタートします。

←

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>
    body {
      text-align: center;
      background-color: #87ceeb;
      margin: 0;
      padding: 0;
    }
    #game-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="game-container">
    <h1>夕立ゲーム</h1>
    <h2>スマホを傾けて夕立を避けよう！</h2>
    <canvas id="canvas" width="300" height="300"></canvas>
  </div>
  
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const playerSize = 20;
    const raindropSize = 10;
    let playerX = canvas.width / 2 - playerSize / 2;
    let raindropX = Math.random() * (canvas.width - raindropSize);
    let raindropY = 0;
    let score = 0;

function drawPlayer() {
      ctx.fillStyle = "yellow";
      ctx.fillRect(playerX, canvas.height - playerSize, playerSize, playerSize);
    }

function drawRaindrop() {
      ctx.fillStyle = "blue";
      ctx.fillRect(raindropX, raindropY, raindropSize, raindropSize);
    }

function moveRaindrop() {
      raindropY += 5;
      
      if (raindropY > canvas.height) {
        raindropX = Math.random() * (canvas.width - raindropSize);
        raindropY = 0;
        score++;
      }
    }

function checkCollision() {
      if (raindropY + raindropSize > canvas.height - playerSize) {
        if (raindropX >= playerX && raindropX <= playerX + playerSize ||
            raindropX + raindropSize >= playerX && raindropX + raindropSize <= playerX + playerSize) {
          endGame();
        }
      }
    }

function endGame() {
      alert("Game Over! Your score: " + score);
      location.reload();
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawPlayer();
      drawRaindrop();
      moveRaindrop();
      checkCollision();

requestAnimationFrame(gameLoop);
    }

window.addEventListener("deviceorientation", function(event) {
      const gamma = event.gamma;
      const maxX = canvas.width - playerSize;

playerX = maxX / 90 * gamma + maxX / 2;
    });

gameLoop();
  </script>
</body>
</html>
```

このゲームでは、スマホを傾けることでプレイヤーを操作し、画面上を落ちてくる雨滴を避けるゲームです。スマホの傾きを取得するために、`deviceorientation` イベントを使用しています。ゲームオーバーになると、アラートでスコアを表示し、ページをリロードして再スタートします。