mech shooting a ton of fire balls and hp bar and fighting a tank that shoots water's game

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

No:10216

162

←

Prev Next

→

mech shooting a ton of fire balls and hp bar and f..ALL
Developer User4498｜Date and time 23/7/29 12:38:06
Build time 18.189 sec｜Game capacity 3.011KB｜

Script

Sure! Here's a simple game where you control a mech shooting fireballs at a tank that shoots water. The game will display an HP bar for the tank, and you can play it on a smartphone. For simplicity, I'll use emojis as pictograms.

To play the game, simply copy the above code into a new HTML file, save it with a ".html" extension, and open it in a web browser on your smartphone. You'll see the mech represented by 🤖, the fireball by 🔥, and the tank by 🚛. Touch anywhere on the game canvas to move the mech horizontally. Try to hit the tank with fireballs until its HP reaches 0 to win the game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mech vs Tank Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Get the game canvas
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

// Set up game variables
    let mechX = canvas.width / 2;   // Initial position of mech
    let mechY = canvas.height - 50;
    let fireballX = mechX;
    let fireballY = mechY;
    let tankX = canvas.width / 2;   // Initial position of tank
    let tankY = 20;
    let tankHP = 100;               // Tank's health points

// Function to draw the game objects
    function drawGame() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the mech (🤖)
      context.font = '40px serif';
      context.fillText('🤖', mechX, mechY);

// Draw the fireball (🔥)
      context.font = '40px serif';
      context.fillText('🔥', fireballX, fireballY);

// Draw the tank (🚛)
      context.font = '40px serif';
      context.fillText('🚛', tankX, tankY);

// Draw the tank's HP bar
      context.fillStyle = 'red';
      context.fillRect(20, 360, tankHP * 3, 20);
    }

// Function to update game logic
    function updateGame() {
      // Move the fireball upwards
      fireballY -= 5;

// Check if the fireball hit the tank
      if (fireballY < tankY + 40 && fireballX > tankX && fireballX < tankX + 40) {
        // Decrease tank's HP
        tankHP -= 10;
        // Reset the fireball position
        fireballY = mechY;
        fireballX = mechX;
      }

// Check if the tank's HP is reduced to 0
      if (tankHP <= 0) {
        alert('You win!');
        // Reset the game
        tankHP = 100;
      }

// Redraw the game
      drawGame();

// Call the updateGame function again
      requestAnimationFrame(updateGame);
    }

// Function to handle touch events on the game canvas
    function handleTouch(event) {
      event.preventDefault();
      
      const { clientX, clientY } = event.touches[0];
      mechX = clientX - canvas.offsetLeft;
    }

// Add touch event listener
    canvas.addEventListener('touchstart', handleTouch);

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