super mario the 5 gems's game

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

No:39310

←

Prev Next

→

super mario the 5 gems
Developer User17597｜Date and time 24/1/27 23:21:01
Build time 18.902 sec｜Game capacity 3.956KB｜

Script

Sure! Here's an example of a simple Super Mario game implemented as a single HTML file with JavaScript. Please note that this is just a basic implementation and doesn't have all the features of a complete game.

This implementation sets up a simple game loop where Mario continuously moves up while pressing the up arrow key or touching the screen on a mobile device. The goal is to collect the 5 gems by colliding with them. Once a gem is collected, a message is printed to the console. Please note that this is just a basic example and can be further expanded and improved upon to make it a complete game.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Super Mario: The 5 Gems</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

canvas {
            background-color: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // Mario Object
        const mario = {
            x: 50,
            y: 200,
            width: 50,
            height: 50,
            speed: 5,
            jumping: false
        };

// Gem Objects
        const gems = [
            { x: 200, y: 450, collected: false },
            { x: 400, y: 350, collected: false },
            { x: 600, y: 250, collected: false },
            { x: 800, y: 450, collected: false },
            { x: 1000, y: 350, collected: false }
        ];

let context;
        let gameCanvas;

// Game Loop
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Update the game state
        function update() {
            // Move Mario
            if (mario.jumping) {
                mario.y -= mario.speed * 2;
            }

// Check collision with gems
            gems.forEach(gem => {
                if (!gem.collected && checkCollision(mario, gem)) {
                    gem.collected = true;
                    console.log("Gem collected!");
                }
            });
        }

// Draw the game on canvas
        function draw() {
            context.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

// Draw Mario
            context.fillStyle = "#ff0000";
            context.fillRect(mario.x, mario.y, mario.width, mario.height);

// Draw Gems
            gems.forEach(gem => {
                if (!gem.collected) {
                    context.fillStyle = "#ffd700";
                    context.fillRect(gem.x, gem.y, 30, 30);
                }
            });
        }

// Check collision between Mario and Gems
        function checkCollision(mario, gem) {
            return (
                mario.x < gem.x + 30 &&
                mario.x + mario.width > gem.x &&
                mario.y < gem.y + 30 &&
                mario.y + mario.height > gem.y
            );
        }

// Handle keyboard events for mobile
        function handleKeyEvents(event) {
            event.preventDefault();
            if (event.key === "ArrowUp" && !mario.jumping) {
                mario.jumping = true;
            }
        }

// Wait for the DOM to be loaded
        document.addEventListener("DOMContentLoaded", function() {
            gameCanvas = document.getElementById("gameCanvas");
            context = gameCanvas.getContext("2d");

// Start the game loop
            gameLoop();

// Handle touch events for mobile
            gameCanvas.addEventListener("touchstart", function() {
                if (!mario.jumping) {
                    mario.jumping = true;
                }
            });

// Handle keyboard events for desktop
            window.addEventListener("keydown", handleKeyEvents);
        });
    </script>
</body>
</html>
```

Please note that this is just a basic example and can be further expanded and improved upon to make it a complete game.