mech vs mech and they shoot lasers at each other and i am a tank that shoots a ton of fire balls heath bar's game

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

No:10233

115

←

Prev Next

→

mech vs mech and they shoot lasers at each other a..ALL
Developer User4498｜Date and time 23/7/29 12:54:39
Build time 33.498 sec｜Game capacity 5.504KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It features mech vs mech combat with lasers and a tank shooting fireballs. The game includes a health bar for the player.

Please note that you would need to replace `emozi_bear.png` and `emozi_chicken.png` with actual image files of a tank and a mech for the visual representation of the game. Make sure to provide the correct file path in the `url()` property within the CSS code. I hope this serves as a good starting point for your game! Let me know if you have any further questions.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mech Battle</title>
  <style>
    #game-board {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      position: relative;
    }

#player-tank {
      width: 50px;
      height: 50px;
      background-image: url('tank.png'); /* Replace with tank image */
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

#enemy-mech {
      width: 50px;
      height: 50px;
      background-image: url('mech.png'); /* Replace with mech image */
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

#player-health-bar,
    #enemy-health-bar {
      width: 100%;
      height: 10px;
      background-color: red;
    }

#player-health-bar {
      position: absolute;
      bottom: -15px;
    }

#enemy-health-bar {
      position: absolute;
      top: -15px;
    }
  </style>
</head>

function movePlayerTank(direction) {
      var playerTank = document.getElementById('player-tank');
      var currentPosition = parseFloat(playerTank.style.left);

if (direction === 'left' && currentPosition > 10) {
        playerTank.style.left = currentPosition - 10 + 'px';
      }
      if (direction === 'right' && currentPosition < 240) {
        playerTank.style.left = currentPosition + 10 + 'px';
      }
    }

function playerShootFireball() {
      createFireball('player');
    }

function createFireball(owner) {
      var fireball = document.createElement('div');
      fireball.className = 'fireball';
      fireball.style.bottom = '60px';
      fireball.style.left = parseFloat(document.getElementById('player-tank').style.left) + 20 + 'px';

var gameBoard = document.getElementById('game-board');
      gameBoard.appendChild(fireball);

var fireballInterval = setInterval(function () {
        var currentPosition = parseFloat(fireball.style.bottom);
        var hitStatus = checkFireballCollision(fireball, owner);

if (currentPosition < 200 && hitStatus === 'none') {
          fireball.style.bottom = currentPosition + 5 + 'px';
        } else {
          clearInterval(fireballInterval);
          fireball.remove();
        }
      }, 50);
    }

function checkFireballCollision(fireball, owner) {
      var fireballRect = fireball.getBoundingClientRect();
      var enemyMech = document.getElementById('enemy-mech');
      var enemyMechRect = enemyMech.getBoundingClientRect();
      var playerTank = document.getElementById('player-tank');
      var playerTankRect = playerTank.getBoundingClientRect();

// Checking collision with enemy mech
      if (owner === 'player' && rectIntersect(fireballRect, enemyMechRect)) {
        enemyHealth -= 10;
        updateHealthBar('enemy');
        return 'hit';
      }

// Checking collision with player tank
      if (owner === 'enemy' && rectIntersect(fireballRect, playerTankRect)) {
        playerHealth -= 10;
        updateHealthBar('player');
        return 'hit';
      }

return 'none';
    }

function rectIntersect(rect1, rect2) {
      return !(rect1.right < rect2.left ||
        rect1.left > rect2.right ||
        rect1.bottom < rect2.top ||
        rect1.top > rect2.bottom);
    }

function updateHealthBar(entity) {
      var healthBar;

if (entity === 'player') {
        healthBar = document.getElementById('player-health-bar');
        healthBar.style.width = playerHealth + '%';
      } else if (entity === 'enemy') {
        healthBar = document.getElementById('enemy-health-bar');
        healthBar.style.width = enemyHealth + '%';
      }
    }

function gameLoop() {
      if (playerHealth <= 0 || enemyHealth <= 0) {
        endGame();
        return;
      }

setTimeout(gameLoop, 100);
    }

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

</html>
```

Please note that you would need to replace `tank.png` and `mech.png` with actual image files of a tank and a mech for the visual representation of the game. Make sure to provide the correct file path in the `url()` property within the CSS code.

I hope this serves as a good starting point for your game! Let me know if you have any further questions.