Space Invaders with the Mario star for all devices's game

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

No:17122

←

Prev Next

→

Space Invaders with the Mario star for all devices
Developer User7570｜Date and time 23/9/22 9:03:13
Build time 40.675 sec｜Game capacity 5.839KB｜

Script

Sure! Here's an example implementation of a simple Space Invaders game using JavaScript and pictograms, themed with the Mario star. This implementation is enclosed in script tags and can be run as a single HTML file.

To play the game, simply paste the above code into a new HTML file and open it in a web browser. The game can be played on any device, including smartphones. Use your mouse to control the player's position on the game board and click to fire bullets. The game ends if any invader reaches the bottom of the game board. Enjoy playing Space Invaders with the Mario star!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #game-board {
        width: 450px;
        height: 400px;
        border: 2px solid black;
        position: relative;
      }
      
      #player {
        width: 40px;
        height: 40px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url('https://image.flaticon.com/icons/svg/2727/2727248.svg');
        background-size: cover;
      }
      
      .invader {
        width: 30px;
        height: 30px;
        position: absolute;
        background-image: url('https://image.flaticon.com/icons/svg/2727/2727214.svg');
        background-size: cover;
      }
      
      .bullet {
        width: 10px;
        height: 20px;
        background-color: black;
        position: absolute;
      }
      
      .exploded,
      .hit {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div id="game-board">
      <div id="player"></div>
    </div>

gameBoard.addEventListener('mousemove', (e) => {
          player.style.left = e.clientX - playerWidth/2 + 'px';
        });

gameBoard.addEventListener('click', (e) => {
          if (gameOver) {
            // Restart the game
            location.reload();
          } else {
            // Create a bullet
            const bullet = document.createElement('div');
            bullet.className = 'bullet';
            bullet.style.left = e.clientX - 5 + 'px';
            bullet.style.top = gameBoard.offsetTop + gameBoard.offsetHeight - playerHeight + 'px';
            gameBoard.appendChild(bullet);
            bullets.push(bullet);
          }
        });

function createInvader() {
          const invader = document.createElement('div');
          invader.className = 'invader';
          invader.style.top = '0px';
          invader.style.left = Math.random() * (gameBoard.offsetWidth - 30) + 'px';
          gameBoard.appendChild(invader);
          invaders.push(invader);
        }

function updateInvaders() {
          invaders.forEach((invader, index) => {
            const invadersBottom = gameBoard.offsetTop + gameBoard.offsetHeight;
            invader.style.top = parseInt(invader.style.top) + 3 + 'px';

if (parseInt(invader.style.top) > invadersBottom) {
              invaders.splice(index, 1);
              gameBoard.removeChild(invader);
              gameOver = true;
            }
          });
        }

function updateBullets() {
          bullets.forEach((bullet, bulletIdx) => {
            bullet.style.top = parseInt(bullet.style.top) - 5 + 'px';

if (parseInt(bullet.style.top) < 0) {
              bullets.splice(bulletIdx, 1);
              gameBoard.removeChild(bullet);
            }

invaders.forEach((invader, invaderIdx) => {
              const bulletRect = bullet.getBoundingClientRect();
              const invaderRect = invader.getBoundingClientRect();

if (
                bulletRect.top <= invaderRect.bottom &&
                bulletRect.right >= invaderRect.left &&
                bulletRect.left <= invaderRect.right
              ) {
                explosion(invader);
                invaders.splice(invaderIdx, 1);
                gameBoard.removeChild(invader);
                bullets.splice(bulletIdx, 1);
                gameBoard.removeChild(bullet);
                score += 10;
              }
            });
          });
        }

function explosion(invader) {
          const exploded = document.createElement('div');
          exploded.className = 'exploded';
          exploded.style.backgroundImage = "url('https://image.flaticon.com/icons/svg/2727/2727870.svg')";
          exploded.style.width = '30px';
          exploded.style.height = '30px';
          exploded.style.position = 'absolute';
          exploded.style.top = invader.style.top;
          exploded.style.left = invader.style.left;
          gameBoard.appendChild(exploded);
          setTimeout(() => gameBoard.removeChild(exploded), 300);
        }

gameLoop();
      });
    </script>
  </body>
</html>
```