AI game creator

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

No:20388

←

Prev Next

→

Make a mario game
Developer User9028｜Date and time 23/10/9 10:23:17
Build time 14.83 sec｜Game capacity 2.397KB｜

Script

Sure! Here's a simple implementation of a Mario game using HTML, CSS, and JavaScript:

In this Mario game implementation, we have a canvas where the game is rendered. The Mario character is represented by an image file called "emozi_all/mario.png". The player can control Mario's movement using the arrow keys on a smartphone. Please note that you would need to replace "emozi_all/mario.png" with an actual image file of Mario. Additionally, you can further enhance the game by adding obstacles, enemies, collecting items, scoring, etc. But this simple implementation should allow you to control Mario's movement on a smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's a simple implementation of a Mario game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #c0c0c0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Get the canvas element
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Game variables
    let positionX = 50;
    let positionY = 250;
    let speed = 5;

// Draw Mario
    function drawMario() {
      const marioImg = new Image();
      marioImg.src = "mario.png";
      marioImg.onload = function() {
        ctx.drawImage(marioImg, positionX, positionY, 30, 40);
      };
    }

// Update Mario's position based on key press
    function updateMarioPosition(event) {
      // Move Mario left
      if (event.keyCode === 37) {
        positionX -= speed;
      }
      // Move Mario up
      else if (event.keyCode === 38) {
        positionY -= speed;
      }
      // Move Mario right
      else if (event.keyCode === 39) {
        positionX += speed;
      }
      // Move Mario down
      else if (event.keyCode === 40) {
        positionY += speed;
      }
    }

// Game loop
    function gameLoop() {
      clearCanvas();
      drawMario();
      requestAnimationFrame(gameLoop);
    }

// Clear canvas for each frame
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Start the game
    function startGame() {
      document.addEventListener("keydown", updateMarioPosition);
      gameLoop();
    }

// Trigger the game when the page loads
    window.onload = startGame;
  </script>
</body>
</html>
```

In this Mario game implementation, we have a canvas where the game is rendered. The Mario character is represented by an image file called "mario.png". The player can control Mario's movement using the arrow keys on a smartphone.

Please note that you would need to replace "mario.png" with an actual image file of Mario. Additionally, you can further enhance the game by adding obstacles, enemies, collecting items, scoring, etc. But this simple implementation should allow you to control Mario's movement on a smartphone.