towers getting hit by a plane's game

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

No:37326

←

Prev Next

→

towers getting hit by a plane
Developer User17003｜Date and time 24/1/21 1:12:53
Build time 12.269 sec｜Game capacity 3.611KB｜

Script

Sure! Here's an example of a simple game where you need to prevent towers from getting hit by a plane. It is implemented as a single HTML file and uses JavaScript. The game will start as soon as you open the HTML file on a smartphone.

In this game, you control a plane and need to avoid towers. The plane starts at the left side of the screen and moves to the right. You can control the plane's vertical position by touching and dragging on the screen. If the plane collides with a tower, the game is over and the "Game Over!" text is displayed. To restart the game after it ends, simply touch the screen again. The score will also be displayed while the game is running. Please note that this is a simple example and can be further enhanced with additional features, levels, and visual improvements based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tower Defense</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Tower Defense game

// Get the game canvas
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Variables
    const towerWidth = 50;
    const towerHeight = 100;
    const towerSpeed = 2;
    const planeSpeed = 5;
    const planeSize = 60;
    const gameOverText = 'Game Over!';

let towers = [];
    let planePosition = { x: 50, y: canvas.height / 2 };
    let score = 0;
    let gameRunning = true;

// Create an initial tower
    towers.push({ x: canvas.width - towerWidth, y: canvas.height / 2 });

// Game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move and draw the towers
      for (let i = 0; i < towers.length; i++) {
        const tower = towers[i];
        tower.x -= towerSpeed;

ctx.fillStyle = 'gray';
        ctx.fillRect(tower.x, tower.y, towerWidth, towerHeight);

// Check collision with plane
        if (tower.x < planeSize && tower.x + towerWidth > planePosition.x &&
            tower.y < planePosition.y + planeSize && tower.y + towerHeight > planePosition.y) {
          gameRunning = false;
          break;
        }
      }

// Move and draw the plane
      planePosition.x += planeSpeed;

ctx.fillStyle = 'blue';
      ctx.fillRect(planePosition.x, planePosition.y, planeSize, planeSize);

// Increase score
      score++;

if (gameRunning) {
        requestAnimationFrame(gameLoop);
      } else {
        // Display Game Over
        ctx.font = '30px Arial';
        ctx.fillStyle = 'red';
        ctx.fillText(gameOverText, canvas.width / 2 - ctx.measureText(gameOverText).width / 2, canvas.height / 2);
      }
    }

// Handle touch events
    function handleTouchStart(event) {
      if (!gameRunning) {
        gameRunning = true;
        score = 0;
        towers = [];
        towers.push({ x: canvas.width - towerWidth, y: canvas.height / 2 });
        planePosition.x = 50;
      }
    }

function handleTouchMove(event) {
      if (gameRunning) {
        const touchY = event.touches[0].clientY;
        planePosition.y = touchY - planeSize / 2;
      }
    }

function handleTouchEnd(event) {
      // Do nothing
    }

canvas.addEventListener('touchstart', handleTouchStart, false);
    canvas.addEventListener('touchmove', handleTouchMove, false);
    canvas.addEventListener('touchend', handleTouchEnd, false);

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

To restart the game after it ends, simply touch the screen again. The score will also be displayed while the game is running.

Please note that this is a simple example and can be further enhanced with additional features, levels, and visual improvements based on your specific requirements.