Dino jumping over cactus's game

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

No:10917

←

Prev Next

→

Dino jumping over cactus
Developer User4614｜Date and time 23/8/5 20:38:42
Build time 25.138 sec｜Game capacity 3.064KB｜

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>Dino Jump Game</title>
    <style>
        #dino {
            position: relative;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-image: url('dino_pic.png');
            background-size: contain;
        }

#cactus {
            position: relative;
            top: 120px;
            left: 800px;
            width: 50px;
            height: 100px;
            background-image: url('cactus_pic.png');
            background-size: contain;
        }
    </style>
</head>
<body>
    <script>
        var dino = document.getElementById("dino");
        var cactus = document.getElementById("cactus");

var isJumping = false;
        var dinoTop = 0;
        var gravity = 0.9;
        var isGameOver = false;

document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp" || event.code === "Space") {
                if (!isJumping) {
                    jump();
                }
            }
        });

var gameTimer = setInterval(function() {
            var cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
            if (cactusLeft < -50) {
                cactus.style.display = "none";
                cactus.style.left = "800px";
                cactus.style.display = "block";
            } else {
                cactus.style.left = cactusLeft - 10 + "px";
            }

var dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
            var cactusTop = parseInt(window.getComputedStyle(cactus).getPropertyValue("top"));
            var dinoLeft = parseInt(window.getComputedStyle(dino).getPropertyValue("left"));

if (cactusLeft < 100 && cactusLeft > 0 && dinoTop >= cactusTop && dinoLeft <= cactusLeft) {
                isGameOver = true;
            }
        }, 30);
    </script>
    
    <div id="dino"></div>
    <div id="cactus"></div>
</body>
</html>