A maker game You can make your own custom Mario levels's game

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

No:16692

←

Prev Next

→

A maker game You can make your own custom Mario le..ALL
Developer User7430｜Date and time 23/9/20 4:48:53
Build time 33.001 sec｜Game capacity 3.122KB｜

Script

Sure! Here's a basic implementation of a game where you can create your own custom Mario levels using pictograms.

Select Pictogram:

To run this game, create a new HTML file and save it with a .html extension. Place this code inside the file and open it in a web browser. You'll see a canvas where you can click to create your custom Mario levels using the provided pictograms (mario.png, coin.png, goomba.png, etc.). As you click on the canvas, the level will update and redraw accordingly. You can add more pictogram options by including additional `<img>` tags in the pictogram selector section and updating the `setPictogram` function accordingly.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a basic implementation of a game where you can create your own custom Mario levels using pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Custom Mario Level Maker</title>
</head>
<body>
  
  <canvas id="gameCanvas" width="500" height="500"></canvas>

<div>
    <h3>Select Pictogram:</h3>
    <img src="mario.png" alt="Mario" width="32" height="32" onclick="setPictogram('mario')">
    <img src="coin.png" alt="Coin" width="32" height="32" onclick="setPictogram('coin')">
    <img src="goomba.png" alt="Goomba" width="32" height="32" onclick="setPictogram('goomba')">
    
  </div>

<script>
    // Initialize game canvas
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const grid = 32;

// Initial pictogram selection
    let selectedPictogram = 'mario';

// Game state representation as a 2D array
    const level = [
      // An example level to begin with
      ['mario', 'mario', 'mario', 'mario', 'mario'],
      ['coin', 'coin', 'coin', 'coin', 'coin'],
      ['goomba', 'empty', 'mario', 'empty', 'coin'],
      ['mario', 'empty', 'goomba', 'empty', 'coin'],
      ['mario', 'coin', 'empty', 'coin', 'mario'],
    ];

// Function to draw the level on the canvas
    function drawLevel() {
      for (let i = 0; i < level.length; i++) {
        for (let j = 0; j < level[i].length; j++) {
          const pictogram = level[i][j];
          if (pictogram !== 'empty') {
            const img = new Image();
            img.src = `${pictogram}.png`;
            ctx.drawImage(img, j * grid, i * grid, grid, grid);
          }
        }
      }
    }

// Function to set the selected pictogram
    function setPictogram(pictogram) {
      selectedPictogram = pictogram;
    }

// Function to handle canvas click event and update level
    function handleCanvasClick(event) {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;

const gridX = Math.floor(mouseX / grid);
      const gridY = Math.floor(mouseY / grid);
      
      // Update the level with the selected pictogram at the clicked position
      level[gridY][gridX] = selectedPictogram;
      
      // Redraw the level
      drawLevel();
    }

// Attach canvas click event listener
    canvas.addEventListener('click', handleCanvasClick);

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