Mario addition spikes cave's game

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

No:15810

←

Prev Next

→

Mario addition spikes cave
Developer User6896｜Date and time 23/9/12 0:58:50
Build time 28.829 sec｜Game capacity 3.148KB｜

Script

Sure, here's a simple game called "Mario Addition: Spikes Cave" implemented as a single HTML file using JavaScript. The game will run on smartphones and uses pictograms for visual elements. Please note that this is a simplified example and may not have extensive gameplay or graphics. Copy the code below into an HTML file and open it in a web browser to play the game.

In this game, you'll control Mario by tapping/clicking on the screen. Mario will jump up when you touch/click and there will be spikes moving from right to left trying to hit Mario. The objective is to avoid the spikes and survive as long as possible. If Mario collides with a spike, the game will end and an alert will be shown.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Addition: Spikes Cave</title>
  <style>
    #game-area {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      border: 2px solid black;
    }
    img {
      width: 50px;
      height: 50px;
    }
    #player {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .spike {
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <img id="player" src="mario.png">
  </div>
  <script>
    // Game Variables
    var player;
    var spikes;

// Game Setup
    function setup() {
      player = document.getElementById('player');
      spikes = document.getElementsByClassName('spike');

// Add event listener for screen touch/click
      document.addEventListener('touchstart', jump);
      document.addEventListener('mousedown', jump);

setInterval(update, 20); // Game update loop
    }

// Player jump function
    function jump() {
      player.style.bottom = '50px'; // Move player up
      setTimeout(function() {
        player.style.bottom = '0'; // Reset player position after 200ms
      }, 200);
    }

// Spike movement function
    function moveSpikes() {
      for (var i = 0; i < spikes.length; i++) {
        var spike = spikes[i];
        spike.style.left = spike.offsetLeft - 3 + 'px'; // Move each spike to the left by 3px
      }
    }

// Collision detection function
    function checkCollision() {
      for (var i = 0; i < spikes.length; i++) {
        var spike = spikes[i];
        var playerRect = player.getBoundingClientRect();
        var spikeRect = spike.getBoundingClientRect();

if (isColliding(playerRect, spikeRect)) {
          gameOver(); // Collision detected, end the game
          return;
        }
      }
    }

// Check if two rectangles are colliding
    function isColliding(rect1, rect2) {
      return (
        rect1.left < rect2.left + rect2.width &&
        rect1.left + rect1.width > rect2.left &&
        rect1.top < rect2.top + rect2.height &&
        rect1.top + rect1.height > rect2.top
      );
    }

// Game update function
    function update() {
      moveSpikes();
      checkCollision();
    }

// Game over function
    function gameOver() {
      clearInterval(update);
      alert('Game Over. Try again!'); // Show game over message
    }

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