Mario Side-scrolling action Jumpable Miss if you fall into the occasional hole There are blocks and you can jump on top of them.'s game

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

No:9033

←

Prev Next

→

Mario Side-scrolling action Jumpable Miss if you f..ALL
Developer User4246｜Date and time 23/7/20 20:08:11
Build time 22.763 sec｜Game capacity 2.897KB｜

Script

☺️

⛰️

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>マリオ</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #game {
            width: 100%;
            height: 100vh;
            position: relative;
            background-color: skyblue;
            overflow: hidden;
        }
        
        #player {
            position: absolute;
            left: 50px;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            font-size: 40px;
            line-height: 1;
            text-align: center;
            vertical-align: middle;
        }
        
        .block {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: green;
            font-size: 40px;
            line-height: 1;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player">☺️</div>
        <div class="block" style="left: 200px;">⛰️</div>
        <div class="block" style="left: 400px;">⛰️</div>
        <div class="block" style="left: 600px;">⛰️</div>
    </div>

function jump() {
            if (!isJumping) {
                velocity -= 25;
                isJumping = true;
            }
        }

function gameLoop() {
            velocity += gravity;
            positionY += velocity;
            velocity *= 0.9;

if (positionY > game.offsetHeight - player.offsetHeight) {
                positionY = game.offsetHeight - player.offsetHeight;
                velocity = 0;
                isJumping = false;
            }

player.style.bottom = positionY + 'px';

for (var i = 0; i < blocks.length; i++) {
                if (positionX + player.offsetWidth > blocks[i].offsetLeft &&
                    positionX < blocks[i].offsetLeft + blocks[i].offsetWidth &&
                    positionY + player.offsetHeight > blocks[i].offsetTop) {
                    positionY = blocks[i].offsetTop - player.offsetHeight;
                    velocity = 0;
                    isJumping = false;
                }
            }

requestAnimationFrame(gameLoop);
        }

gameLoop();

document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp" || event.keyCode === 32) {
                jump();
            }
        });
    </script>
</body>
</html>