a roguelike game with mario story's game

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

No:11397

126

←

Prev Next

→

a roguelike game with mario story
Developer User4873｜Date and time 23/8/9 15:55:42
Build time 20.857 sec｜Game capacity 2.191KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Roguelike Mario Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="240"></canvas>
    <script>
        // 创建画布
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// 加载游戏资源（图片/声音等）
        const marioImage = new Image();
        marioImage.src = "mario.png";

// 定义玩家的初始位置
        let playerX = 0;
        let playerY = 0;

// 监听用户的键盘输入
        window.addEventListener("keydown", function (event) {
            switch (event.keyCode) {
                case 37: // 左箭头
                    playerX -= 10;
                    break;
                case 38: // 上箭头
                    playerY -= 10;
                    break;
                case 39: // 右箭头
                    playerX += 10;
                    break;
                case 40: // 下箭头
                    playerY += 10;
                    break;
            }
        });

// 游戏主循环：更新游戏状态和绘制画面
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// 更新游戏状态
        function update() {
            // 游戏逻辑
            // 在这里可以对玩家、敌人、地图等进行更新

// 限制玩家的移动范围在画布内
            if (playerX < 0) playerX = 0;
            if (playerY < 0) playerY = 0;
            if (playerX > 320) playerX = 320;
            if (playerY > 240) playerY = 240;
        }

// 绘制画面
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// 绘制地图、玩家、敌人等元素的代码

// 绘制玩家（马里奥）的图像
            context.drawImage(marioImage, playerX, playerY, 32, 32);
        }

// 开始游戏
        gameLoop();
    </script>
</body>
</html>