mech vs mech and they shoot lasers at each other's game

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

No:10232

←

Prev Next

→

mech vs mech and they shoot lasers at each other
Developer User4498｜Date and time 23/7/29 12:52:59
Build time 29.246 sec｜Game capacity 5.072KB｜

Script

Sure! Here's a simple game named "Battle of the Mechs" implemented as a single HTML file, using JavaScript enclosed in script tags. It can be played on a smartphone and features two mechs shooting lasers at each other using pictograms:

Please note that the code provided is a basic implementation to get you started. You will need to replace the `emozi_bear.png` and `emozi_chicken.png` with your own pictograms representing the mechs. Also, ensure that you have the appropriate images available and adjust their sizes accordingly. Feel free to modify and enhance the game as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Battle of the Mechs</title>
  <style>
    body {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Arial, sans-serif;
    }

#game-container {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
    }

#mech1,
    #mech2 {
      width: 60px;
      height: 60px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

#mech1 {
      left: 10%;
      background-image: url('mech1.png'); /* Replace with your pictogram */
      background-size: cover;
    }

#mech2 {
      right: 10%;
      background-image: url('mech2.png'); /* Replace with your pictogram */
      background-size: cover;
    }

#laser1,
    #laser2 {
      width: 5px;
      height: 40px;
      background-color: red;
      position: absolute;
      display: none;
    }

#laser1 {
      left: calc(10% + 25px);
      top: 50%;
      transform: translateY(-50%);
    }

#laser2 {
      right: calc(10% + 25px);
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="mech1"></div>
    <div id="mech2"></div>
    <div id="laser1"></div>
    <div id="laser2"></div>
  </div>

// Set initial game state
      var laser1Visible = false;
      var laser2Visible = false;

// Function to handle shooting lasers
      function shootLaser(mech, laser) {
        laser.style.display = 'block';
        var mechPosition = mech.getBoundingClientRect();
        var laserPosition = laser.getBoundingClientRect();
        laser.style.top = (mechPosition.top + mechPosition.height / 2 - laserPosition.height / 2) + 'px';

var laserMovement;
        var laserInterval = setInterval(function() {
          if (laser === laser1) {
            laserMovement = parseInt(laser.style.left) + 5;
            if (laserMovement >= mech2.getBoundingClientRect().left) {
              clearInterval(laserInterval);
              laser.style.display = 'none';
              laser.style.left = '0';
              laser1Visible = false;
            }
          } else {
            laserMovement = parseInt(laser.style.right) + 5;
            if (laserMovement >= window.innerWidth - mech1.getBoundingClientRect().right) {
              clearInterval(laserInterval);
              laser.style.display = 'none';
              laser.style.right = '0';
              laser2Visible = false;
            }
          }

if (laser1Visible && laser2Visible) {
            checkCollision();
          }
        }, 15);
      }

// Function to check if lasers collide
      function checkCollision() {
        var mech1Pos = mech1.getBoundingClientRect();
        var mech2Pos = mech2.getBoundingClientRect();
        var laser1Pos = laser1.getBoundingClientRect();
        var laser2Pos = laser2.getBoundingClientRect();

if (
          (laser1Pos.left + laser1Pos.width >= mech2Pos.left && laser1Pos.top >= mech2Pos.top && laser1Pos.top <= mech2Pos.top + mech2Pos.height) ||
          (laser2Pos.right <= mech1Pos.right && laser2Pos.top >= mech1Pos.top && laser2Pos.top <= mech1Pos.top + mech1Pos.height)
        ) {
          alert('Game Over! Mechs collided!');
          resetGame();
        }
      }

// Function to reset the game
      function resetGame() {
        laser1.style.left = '0';
        laser2.style.right = '0';
        laser1.style.display = 'none';
        laser2.style.display = 'none';
        laser1Visible = false;
        laser2Visible = false;
      }

// Listen for touch events on each mech
      mech1.addEventListener('touchstart', function(event) {
        event.preventDefault();
        if (!laser1Visible) {
          laser1Visible = true;
          shootLaser(mech1, laser1);
        }
      });

mech2.addEventListener('touchstart', function(event) {
        event.preventDefault();
        if (!laser2Visible) {
          laser2Visible = true;
          shootLaser(mech2, laser2);
        }
      });
    });
  </script>
</body>
</html>
```

Please note that the code provided is a basic implementation to get you started. You will need to replace the `mech1.png` and `mech2.png` with your own pictograms representing the mechs. Also, ensure that you have the appropriate images available and adjust their sizes accordingly. Feel free to modify and enhance the game as per your requirements.