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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:9033

176

←

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>