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 code.'s game

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

No:11473

←

Prev Next

→

Tap to jump. There are obstacles you jump over. Yo..ALL
Developer User3943｜Date and time 23/8/10 7:36:41
Build time 34.115 sec｜Game capacity 5.739KB｜

Script

Sure! Here's an example of an HTML file that implements a game with the given features:

How to Play Minecraft:

1. Use the directional buttons to move around.

2. Tap the jump button to jump over obstacles.

To play the game, simply open the HTML file in a web browser on your smartphone. Tap the screen or press the spacebar to make the square jump over obstacles. Use the buttons to change the color of the square. If the square collides with an obstacle, the game will end and you can restart by tapping the "Restart" button. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of an HTML file that implements a game with the given features:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Jumper Game</title>
    <style>
        #gameCanvas {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-color: #000;
            overflow: hidden;
        }
        .square {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: #ff0000;
        }
        .obstacle {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: #00ff00;
        }
        .tutorial {
            width: 100vw;
            height: 100vh;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: absolute;
            z-index: 1;
        }
        .tutorial .heading {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .tutorial .description {
            font-size: 16px;
            margin-bottom: 20px;
        }
        .tutorial button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameCanvas"></div>
    <div class="tutorial">
        <h2 class="heading">How to Play Minecraft:</h2>
        <p class="description">1. Use the directional buttons to move around.</p>
        <p class="description">2. Tap the jump button to jump over obstacles.</p>
        <button onclick="startGame()">Start Game</button>
    </div>

// Button functionality
        function changeColor(color) {
            square.style.backgroundColor = color;
        }

// Game over
        function gameOver() {
            var restartBtn = document.createElement("button");
            restartBtn.innerText = "Restart";
            restartBtn.onclick = function() {
                window.location.reload();
            };
            gameCanvas.appendChild(restartBtn);
        }

// Game loop
        function updateGame() {
            gameCanvas.innerHTML = "";
            square.style.bottom = parseInt(square.style.bottom) + gravity + "px";
            
            // Check collision
            if (parseInt(square.style.bottom) <= 0) {
                gameOver();
            }

for (var i = 0; i < obstacles.length; i++) {
                obstacles[i].style.left = parseInt(obstacles[i].style.left) - gameSpeed + "px";

// Check collision
                if (collision(square, obstacles[i])) {
                    gameOver();
                    break;
                }

// Increase score
                if (parseInt(obstacles[i].style.left) < 0) {
                    score++;
                    gameSpeed += 0.5;
                    gameCanvas.removeChild(obstacles[i]);
                    obstacles.splice(i, 1);
                }
            }
            
            gameCanvas.appendChild(square);
            for (var i = 0; i < obstacles.length; i++) {
                gameCanvas.appendChild(obstacles[i]);
            }

document.getElementById("score").innerText = "Score: " + score;
            requestAnimationFrame(updateGame);
        }

// Check collision
        function collision(a, b) {
            var aRect = a.getBoundingClientRect();
            var bRect = b.getBoundingClientRect();

return (
                aRect.bottom >= bRect.top &&
                aRect.top <= bRect.bottom &&
                aRect.right >= bRect.left &&
                aRect.left <= bRect.right
            );
        }

// Game initialization
        function startGame() {
            gameCanvas.innerHTML = "";
            document.querySelector(".tutorial").style.display = "none";

square = document.createElement("div");
            square.className = "square";
            square.style.left = "50px";

// Jump on click
            square.onclick = function() {
                square.style.bottom = parseInt(square.style.bottom) + jumpForce + "px";
            };

document.addEventListener("keydown", function(event) {
                if (event.keyCode === 32) {
                    square.style.bottom = parseInt(square.style.bottom) + jumpForce + "px";
                }
            });

obstacles.push(createObstacle(100, 0));
            obstacles.push(createObstacle(300, 0));
            obstacles.push(createObstacle(500, 0));

updateGame();
        }

// Create obstacle
        function createObstacle(left, delay) {
            var obstacle = document.createElement("div");
            obstacle.className = "obstacle";
            obstacle.style.left = left + "px";
            obstacle.style.animationDelay = delay + "s";

return obstacle;
        }
    </script>
</body>
</html>
```