AI game creator

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

No:28792

106

←

Prev Next

→

Mario Bros
Developer User14235｜Date and time 23/12/14 10:04:22
Build time 47.167 sec｜Game capacity 2.383KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Mario Bros Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #000;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Pictograms and game logic implementation for Mario Bros game

// Variables for canvas
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Create Mario object with initial position
        var mario = {
            x: 50,
            y: 530,
            width: 50,
            height: 50,
            image: new Image(),
            draw: function () {
                context.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
        };

// Load Mario's image
        mario.image.src = "mario.png";

// Create Goomba object with initial position
        var goomba = {
            x: 700,
            y: 530,
            width: 50,
            height: 50,
            image: new Image(),
            draw: function () {
                context.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
        };

// Load Goomba's image
        goomba.image.src = "goomba.png";

// Keyboard event listener for movements
        document.addEventListener('keydown', function (event) {
            if (event.key === "ArrowRight") {
                mario.x += 10;
            } else if (event.key === "ArrowLeft") {
                mario.x -= 10;
            }
        });

// Game loop
        function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            mario.draw();
            goomba.draw();
            
            // Check collision between Mario and Goomba
            if (mario.x < goomba.x + goomba.width &&
                mario.y < goomba.y + goomba.height &&
                mario.x + mario.width > goomba.x &&
                mario.y + mario.height > goomba.y) {
                alert("Game Over!");
                // Reset Mario's position
                mario.x = 50;
            }
            
            // Repeat the game loop
            requestAnimationFrame(gameLoop);
        }

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