AI game creator

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

No:39359

117

←

Prev Next

→

Mario
Developer User17626｜Date and time 24/1/28 5:41:18
Build time 10.457 sec｜Game capacity 2.954KB｜

Script

This is a simple implementation of a Mario game using HTML and JavaScript within a single HTML file. The game features a player character (Mario) that can be moved left and right using the arrow keys. The player is represented by a pictogram that resembles Mario. To run the game, simply save the code into an HTML file and open it in any web browser on a smartphone. The Mario pictogram will be displayed on a canvas element, and the player can control Mario's movement using the arrow keys. The game will continuously update the screen to reflect the player's movements. Note: Make sure to replace the `emozi_all/mario.png` file path with the actual path to the desired Mario pictogram image to be used in the game.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Mario Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Set up canvas
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // Set up game variables
        const playerWidth = 50;
        const playerHeight = 50;
        let playerX = canvas.width / 2 - playerWidth / 2;
        let playerY = canvas.height - playerHeight - 10;
        let moveLeft = false;
        let moveRight = false;
        
        // Load images
        const playerImage = new Image();
        playerImage.src = "mario.png";
        
        // Keyboard event listeners
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);
        
        function keyDownHandler(event) {
            if (event.key === "ArrowLeft" || event.key === "Left") {
                moveLeft = true;
            } else if (event.key === "ArrowRight" || event.key === "Right") {
                moveRight = true;
            }
        }
        
        function keyUpHandler(event) {
            if (event.key === "ArrowLeft" || event.key === "Left") {
                moveLeft = false;
            } else if (event.key === "ArrowRight" || event.key === "Right") {
                moveRight = false;
            }
        }
        
        function drawPlayer() {
            ctx.drawImage(playerImage, playerX, playerY, playerWidth, playerHeight);
        }
        
        function update() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Move player
            if (moveLeft && playerX > 0) {
                playerX -= 5;
            }
            if (moveRight && playerX < canvas.width - playerWidth) {
                playerX += 5;
            }
            
            // Draw player
            drawPlayer();
            
            requestAnimationFrame(update);
        }
        
        // Start game loop
        update();
    </script>
</body>
</html>
```

To run the game, simply save the code into an HTML file and open it in any web browser on a smartphone. The Mario pictogram will be displayed on a canvas element, and the player can control Mario's movement using the arrow keys. The game will continuously update the screen to reflect the player's movements.

Note: Make sure to replace the `mario.png` file path with the actual path to the desired Mario pictogram image to be used in the game.