A game about Mario Squishing gommbas's game

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

No:20596

←

Prev Next

→

A game about Mario Squishing gommbas
Developer User9100｜Date and time 23/10/10 7:35:24
Build time 15.874 sec｜Game capacity 3.766KB｜

Script

Sure! Here's a simple game about Mario squishing Goombas using JavaScript within a single HTML file. It is designed to be played on a smartphone and includes pictograms.

Score: 0

To use this game: 1. Save the code above into a file named `mario_game.html` on your computer. 2. Make sure you have two image files: `emozi_all/mario.png` and `emozi_chicken.png`, and place them in the same directory as the HTML file. 3. Open the HTML file in a web browser on your smartphone. 4. The game will display a score counter on the top right corner, and you can touch or click on the game area to generate Goombas. Tap or click on the Goombas to squish them and score points. Please note that you will need to replace `emozi_all/mario.png` and `emozi_dog.png` with your own image files if you want to use different pictograms for Mario and Goombas.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game about Mario squishing Goombas using JavaScript within a single HTML file. It is designed to be played on a smartphone and includes pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #70A0D8;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }

#game {
      width: 300px;
      height: 300px;
      background: #B0D8F0;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
    }

#mario {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-image: url('mario.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

.goomba {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 0;
      transition: all 0.5s ease-in-out;
      background-image: url('goomba.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

#score {
      position: absolute;
      top: 10px;
      right: 10px;
      font-weight: bold;
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="score">Score: 0</div>
    <div id="mario"></div>
  </div>

let score = 0;
      let isSquishing = false;

const updateScore = () => {
        score++;
        scoreElement.innerText = "Score: " + score;
      }

const squishGoomba = (goombaElement) => {
        if (!isSquishing) {
          isSquishing = true;
          goombaElement.style.transform = "scale(0)";
          updateScore();

setTimeout(() => {
            goombaElement.remove();
            isSquishing = false;
          }, 500);
        }
      }

game.addEventListener('click', (event) => {
        if (!isSquishing) {
          const goomba = document.createElement('div');
          goomba.classList.add('goomba');
          goomba.style.left = event.clientX - game.offsetLeft - 25 + "px";

game.appendChild(goomba);
        }
      });

game.addEventListener('click', (event) => {
        const clickedGoombas = document.elementsFromPoint(event.clientX, event.clientY)
          .filter(element => element.classList.contains('goomba'));

clickedGoombas.forEach(goomba => squishGoomba(goomba));
      });
    });
  </script>
</body>
</html>
```

To use this game:

1. Save the code above into a file named `mario_game.html` on your computer.
2. Make sure you have two image files: `mario.png` and `goomba.png`, and place them in the same directory as the HTML file.
3. Open the HTML file in a web browser on your smartphone.
4. The game will display a score counter on the top right corner, and you can touch or click on the game area to generate Goombas. Tap or click on the Goombas to squish them and score points.

Please note that you will need to replace `mario.png` and `goomba.png` with your own image files if you want to use different pictograms for Mario and Goombas.