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

No:9415

121

←

Prev Next

→

F-117
Developer anonymous｜Date and time 23/7/24 17:03:50
Build time 38.51 sec｜Game capacity 4.162KB｜

Script

了解しました。以下にスマホで遊べるシンプルなゲームの実装例を示します。

🚁 Helicopter Game 🚁

Score: 0

このゲームでは、タッチでヘリコプターを上げ下げして、障害物を避けながらスコアを稼ぐゲームです。スタートボタンをクリックするとゲームが開始され、ヘリコプターが上下に移動します。障害物との衝突や画面外への落下を避ける必要があります。スコアは障害物を通過するたびに1点加算されます。ゲームオーバーになると、再度プレイできるようになります。

←

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

#game {
      text-align: center;
    }

#start {
      background-color: #4CAF50;
      color: white;
      font-size: 18px;
      padding: 12px 30px;
      border: none;
      cursor: pointer;
    }

#score {
      font-size: 36px;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div id="game">
    <h1>🚁 Helicopter Game 🚁</h1>
    <button id="start">Start</button>
    <p id="score">Score: 0</p>
  </div>

// Helicopter position and velocity
    let helicopterY = canvasSize.height / 2;
    let helicopterVY = 0;

// Obstacle position and velocity
    let obstacleX = canvasSize.width;
    let obstacleVX = -4;

// Game score
    let score = 0;

// Game state
    let gameStarted = false;

// Game elements
    const game = document.getElementById("game");
    const startButton = document.getElementById("start");
    const scoreElement = document.getElementById("score");

// Start the game when the start button is clicked
    startButton.addEventListener("click", startGame);

// Move the helicopter up when the screen is touched
    game.addEventListener("touchstart", () => {
      helicopterVY = -6;
    });

// Move the helicopter down when the screen is released
    game.addEventListener("touchend", () => {
      helicopterVY = 3;
    });

function startGame() {
      gameStarted = true;
      startButton.style.display = "none";
    }

function update() {
      if (gameStarted) {
        // Clear canvas
        game.innerHTML = "";

// Update helicopter position
        helicopterY += helicopterVY;
        helicopterVY += 0.5;

// Draw helicopter
        const helicopter = document.createElement("h2");
        helicopter.innerHTML = "🚁";
        helicopter.style.position = "absolute";
        helicopter.style.left = "100px";
        helicopter.style.top = helicopterY + "px";
        game.appendChild(helicopter);

// Update obstacle position
        obstacleX += obstacleVX;

// Draw obstacle
        const obstacle = document.createElement("div");
        obstacle.style.position = "absolute";
        obstacle.style.width = "60px";
        obstacle.style.height = "200px";
        obstacle.style.backgroundColor = "#333";
        obstacle.style.left = obstacleX + "px";
        obstacle.style.bottom = "0";
        game.appendChild(obstacle);

// Collision detection
        if (helicopterY > canvasSize.height || helicopterY < 0 ||
            (helicopterY + 100 > canvasSize.height - 200 && obstacleX < 200 && obstacleX + 60 > 100)) {
          endGame();
        }

// Update score
        score++;
        scoreElement.innerHTML = "Score: " + score;

// Repeat the update function
        requestAnimationFrame(update);
      }
    }

function endGame() {
      gameStarted = false;
      startButton.style.display = "block";
      startButton.innerHTML = "Game Over. Retry?";
      helicopterY = canvasSize.height / 2;
      helicopterVY = 0;
      obstacleX = canvasSize.width;
      score = 0;
      scoreElement.innerHTML = "Score: 0";
    }

// Start the game
    update();
  </script>
</body>
</html>
```