画面外から襲ってくる数々の弾をよけるゲーム。プレイヤーのコアは画面内でならどこにでも移動できる。弾は様々な角度から飛んでくる。弾の速度は時間計かと共に速くなっていく。生存時間がスコアとなる's game

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

No:40052

←

Prev Next

→

画面外から襲ってくる数々の弾をよけるゲーム。プレイヤーのコアは画面内でならどこにでも移動できる。 ..ALL
Developer User17861｜Date and time 24/1/31 20:30:16
Build time 17.404 sec｜Game capacity 4.013KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dodger Game</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #000;
        color: #fff;
        font-family: sans-serif;
      }

canvas {
        border: 2px solid #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game state variables
      let playerX = GAME_WIDTH / 2;
      let playerY = GAME_HEIGHT / 2;
      let score = 0;
      let isGameOver = false;

// Bullet variables
      let bullets = [];
      let bulletSpeed = 0;
      let bulletSpawnRate = 500;
      let bulletSpawnTimer = bulletSpawnRate;

// Game canvas
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Game loop
      function gameLoop() {
        if (!isGameOver) {
          update();
          draw();

requestAnimationFrame(gameLoop);
        }
      }

// Handle player movement
      function handlePlayerMove(event) {
        playerX = event.touches[0].clientX - canvas.offsetLeft;
        playerY = event.touches[0].clientY - canvas.offsetTop;
      }

// Update game state
      function update() {
        if (bulletSpawnTimer <= 0) {
          spawnBullet();
          bulletSpawnTimer = bulletSpawnRate;
        } else {
          bulletSpawnTimer--;
        }

bullets.forEach((bullet, index) => {
          // Update bullet position
          bullet.x += bullet.vx;
          bullet.y += bullet.vy;

// Check if bullet hits the player
          const dx = playerX - bullet.x;
          const dy = playerY - bullet.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          if (distance < PLAYER_SIZE / 2 + BULLET_SIZE / 2) {
            gameOver();
          }

// Remove bullets that are off-screen
          if (
            bullet.x < 0 ||
            bullet.y < 0 ||
            bullet.x > GAME_WIDTH ||
            bullet.y > GAME_HEIGHT
          ) {
            bullets.splice(index, 1);
            score++;
          }
        });

// Increase bullet speed over time
        if (bulletSpeed < MAX_SPEED) {
          bulletSpeed += ACCELERATION;
        }
      }

// Draw game objects
      function draw() {
        // Clear canvas
        ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

// Draw player
        ctx.fillStyle = "#ffff00";
        ctx.beginPath();
        ctx.arc(playerX, playerY, PLAYER_SIZE / 2, 0, 2 * Math.PI);
        ctx.fill();

// Draw bullets
        ctx.fillStyle = "#ff0000";
        bullets.forEach((bullet) => {
          ctx.beginPath();
          ctx.arc(bullet.x, bullet.y, BULLET_SIZE / 2, 0, 2 * Math.PI);
          ctx.fill();
        });

// Draw score
        ctx.fillStyle = "#fff";
        ctx.textAlign = "left";
        ctx.font = "18px sans-serif";
        ctx.fillText("Score: " + score, 10, 30);
      }

// Spawn a new bullet
      function spawnBullet() {
        const angle = Math.random() * Math.PI * 2;
        const vx = Math.cos(angle) * bulletSpeed;
        const vy = Math.sin(angle) * bulletSpeed;
        bullets.push({ x: playerX, y: playerY, vx, vy });
      }

// Game over
      function gameOver() {
        isGameOver = true;
        alert("Game Over! Score: " + score);
      }

// Event listeners
      document.addEventListener("touchmove", handlePlayerMove);

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