Mario 1's game | AI game creator

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

No:16189

47

Mario 1
Developer User7172｜Date and time 23/9/16 15:39:05
Build time 29.265 sec｜Game capacity 4.034KB｜

This is a simple implementation of Mario 1 game using HTML and JavaScript in a single HTML file. The game canvas is defined using the `<canvas>` tag and the game context is acquired using `getContext('2d')`. The player (Mario) is represented using a pictogram (image) which is loaded using the `Image` object. The player's initial position and size are defined, and movement is handled using keyboard events. The ground platform is also represented using a pictogram (image) and is drawn on the canvas. The game loop is implemented using the `update()` function which is recursively called using `requestAnimationFrame()`. Inside the game loop, the canvas is cleared, the ground and player are drawn, and player movements and gravity are applied. Keyboard event listeners are set to handle player movements. When the arrow keys are pressed, the corresponding movement actions (jump, move left, move right) are triggered. To play the game, save the HTML code in a file (e.g., `mario1.html`), and make sure to have `emozi_all/play.png` and `emozi_all/ground.png` files in the same directory. Open the HTML file in a web browser, and you can control Mario using the arrow keys on your smartphone or keyboard.

→ 　

0　

0　

　
　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

```
<!DOCTYPE html>
<html>
<head>
  <title>Mario 1</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

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

// Set initial player position and size
    let playerX = 20;
    let playerY = canvas.height - 70;
    const playerWidth = 50;
    const playerHeight = 50;

// Player movement variables
    let isJumping = false;
    let jumpForce = 15;
    let isMovingLeft = false;
    let isMovingRight = false;
    let moveSpeed = 5;

// Ground platform
    const groundHeight = 20;

// Pictograms for player and ground
    const playerImg = new Image();
    playerImg.src = 'player.png';

const groundImg = new Image();
    groundImg.src = 'ground.png';

// Keyboard event listeners to handle player movements
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);

// Update the game state
    function update() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw ground
      ctx.drawImage(groundImg, 0, canvas.height - groundHeight, canvas.width, groundHeight);

// Draw player
      ctx.drawImage(playerImg, playerX, playerY, playerWidth, playerHeight);

// Apply gravity if player is in the air
      if (playerY < canvas.height - playerHeight - groundHeight || isJumping) {
        playerY += 2;
      }

// Handle player movements
      if (isJumping) {
        jump();
      }
      if (isMovingLeft) {
        moveLeft();
      }
      if (isMovingRight) {
        moveRight();
      }

// Keep updating the game state
      requestAnimationFrame(update);
    }

// Handle key down events
    function handleKeyDown(e) {
      if (e.key === 'ArrowUp') {
        jump();
      } else if (e.key === 'ArrowLeft') {
        isMovingLeft = true;
      } else if (e.key === 'ArrowRight') {
        isMovingRight = true;
      }
    }

// Handle key up events
    function handleKeyUp(e) {
      if (e.key === 'ArrowLeft') {
        isMovingLeft = false;
      } else if (e.key === 'ArrowRight') {
        isMovingRight = false;
      }
    }

// Player jump action
    function jump() {
      if (!isJumping) {
        isJumping = true;
        playerY -= jumpForce;
        setTimeout(function() {
          isJumping = false;
        }, 300);
      }
    }

// Player move left action
    function moveLeft() {
      playerX -= moveSpeed;
    }

// Player move right action
    function moveRight() {
      playerX += moveSpeed;
    }

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

This is a simple implementation of Mario 1 game using HTML and JavaScript in a single HTML file. The game canvas is defined using the `<canvas>` tag and the game context is acquired using `getContext('2d')`.

The player (Mario) is represented using a pictogram (image) which is loaded using the `Image` object. The player's initial position and size are defined, and movement is handled using keyboard events.

The ground platform is also represented using a pictogram (image) and is drawn on the canvas.

The game loop is implemented using the `update()` function which is recursively called using `requestAnimationFrame()`. Inside the game loop, the canvas is cleared, the ground and player are drawn, and player movements and gravity are applied.

Keyboard event listeners are set to handle player movements. When the arrow keys are pressed, the corresponding movement actions (jump, move left, move right) are triggered.

To play the game, save the HTML code in a file (e.g., `mario1.html`), and make sure to have `player.png` and `ground.png` files in the same directory. Open the HTML file in a web browser, and you can control Mario using the arrow keys on your smartphone or keyboard.