Tap to jump. There are obstacles you jump over. You are a square. You can change colours with buttons. Colliding with the obstacles will result in a game over with a restart button. You are bound to the ground by gravity. Remember tap to jump. Also have a tutorial on how to play Minecraft under the game.'s game

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

No:11471

180

←

Prev Next

→

Tap to jump. There are obstacles you jump over. Yo..ALL
Developer User3943｜Date and time 23/8/10 7:32:13
Build time 34.421 sec｜Game capacity 5.421KB｜

Script

Game Over!

How to Play Minecraft:

1. Use the WASD keys to move around.

2. Left-click to destroy blocks.

3. Right-click to place blocks.

4. Survive and explore the world!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jump Game</title>
    <style>
        body {
            background-color: #333;
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        canvas {
            border: 1px solid #fff;
        }
        
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
        }
        
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }
        
        #restart-btn {
            display: block;
        }
        
        #tutorial {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: #fff;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <canvas id="game" width="640" height="480"></canvas>
    
    <div id="game-over">
        <p>Game Over!</p>
        <button id="restart-btn">Restart</button>
    </div>
    
    <div id="tutorial">
        <h3>How to Play Minecraft:</h3>
        <p>1. Use the WASD keys to move around.</p>
        <p>2. Left-click to destroy blocks.</p>
        <p>3. Right-click to place blocks.</p>
        <p>4. Survive and explore the world!</p>
    </div>
    
    <script>
        var canvas = document.getElementById("game");
        var ctx = canvas.getContext("2d");
    
        var player = {
            x: 50,
            y: canvas.height - 100,
            width: 50,
            height: 50,
            color: "#ff6666",
            velocity: 0,
            gravity: 0.8,
            jump: -15
        };
    
        var obstacles = [];
        var isGameOver = false;
    
        document.addEventListener("keydown", function(event) {
            if (event.keyCode === 32 || event.keyCode === 38) {
                jump();
            }
        });
    
        document.addEventListener("touchstart", jump);
    
        function jump() {
            if (!isGameOver) {
                player.velocity = player.jump;
            }
        }
    
        function changeColor(color) {
            player.color = color;
        }
    
        function addObstacle() {
            var obstacle = {
                x: canvas.width,
                y: canvas.height - Math.random() * 100,
                width: 20,
                height: 100,
                color: "#66ff66",
                speed: 5
            };
    
            obstacles.push(obstacle);
        }
    
        function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }
    
        function drawObstacles() {
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
    
                ctx.fillStyle = obstacle.color;
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            }
        }
    
        function updatePlayer() {
            player.velocity += player.gravity;
            player.y += player.velocity;
    
            if (player.y >= canvas.height - player.height) {
                player.y = canvas.height - player.height;
            }
    
            if (player.y <= 0) {
                player.y = 0;
            }
        }
    
        function updateObstacles() {
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
    
                obstacle.x -= obstacle.speed;
    
                if (obstacle.x + obstacle.width < 0) {
                    obstacles.splice(i, 1);
                }
    
                if (isColliding(obstacle, player)) {
                    gameOver();
                }
            }
        }
    
        function isColliding(rect1, rect2) {
            if (rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y) {
                return true;
            }
    
            return false;
        }
    
        function gameOver() {
            isGameOver = true;
            document.getElementById("game-over").style.display = "block";
        }
    
        function restartGame() {
            isGameOver = false;
            document.getElementById("game-over").style.display = "none";
            player.y = canvas.height - 100;
            player.velocity = 0;
            obstacles = [];
        }
    
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
    
            drawPlayer();
            drawObstacles();
        }
    
        function update() {
            if (!isGameOver) {
                addObstacle();
                updatePlayer();
                updateObstacles();
            }
        }
    
        function loop() {
            draw();
            update();
    
            if (!isGameOver) {
                requestAnimationFrame(loop);
            }
        }
    
        document.getElementById("restart-btn").addEventListener("click", restartGame);
    
        loop();
    </script>
</body>
</html>