Player is a Sheep control it with arrows up to jump edit blocks:Ground's game

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

No:20821

←

Prev Next

→

Player is a Sheep control it with arrows up to jum..ALL
Developer User9100｜Date and time 23/10/11 7:15:58
Build time 132.078 sec｜Game capacity 4.45KB｜

Script

Sure! Here's an example of a simple game where you can control a sheep with arrow keys on a smartphone to jump. Each time the sheep jumps, it must avoid hitting the ground blocks. Note: This is a basic example and can be expanded further based on your requirements.

Score: 0

To use this code: 1. Save the code as a .html file, for example, `sheep_jump_game.html`. 2. Replace `'emozi_rabbit.png'` with the actual path to your sheep image, or you can use a suitable pictogram. 3. Open the HTML file in a web browser on your smartphone. 4. Use the arrow keys on the smartphone interface to control the sheep and make it jump. 5. Avoid colliding with the ground blocks and try to increase your score. 6. The game will end when the sheep collides with a block, and an alert will show your final score. Feel free to modify the code and add more features to enhance the game further!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game where you can control a sheep with arrow keys on a smartphone to jump. Each time the sheep jumps, it must avoid hitting the ground blocks.

Note: This is a basic example and can be expanded further based on your requirements.

```html
<!DOCTYPE html>
<html>
<head>
<title>Sheep Jump Game</title>
<style>
    #game-container {
        position: relative;
        width: 100%;
        height: 400px; /* Adjust the height to fit the game area */
        background-color: #eee;
        border: 1px solid #999;
        touch-action: none;
    }
    
    #sheep {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        background-image: url('sheep.png'); /* Replace 'sheep.png' with your own image */
        background-size: cover;
    }
    
    .block {
        position: absolute;
        bottom: 0;
        width: 50px;
        height: 50px;
        background-color: #444;
    }
    
    #score {
        text-align: center;
        font-size: 24px;
        margin-top: 10px;
    }
</style>
</head>
<body>
    <div id="game-container">
        <div id="sheep"></div>
        <div class="block" style="left: 50px;"></div>
        <div class="block" style="left: 150px;"></div>
        <div class="block" style="left: 250px;"></div>
    </div>
    <div id="score">Score: 0</div>

// Position variables
    let sheepTop = 0;
    let blockSpeed = 5; // Adjust the speed of the blocks

// Game loop
    function gameLoop() {
        // Move the blocks
        const blocks = document.getElementsByClassName('block');
        for (let i = 0; i < blocks.length; i++) {
            let blockLeft = parseInt(blocks[i].style.left);
            blockLeft -= blockSpeed;
            if (blockLeft < -50) {
                blockLeft = 550;
                score++; // Increment score when a block goes offscreen
            }
            blocks[i].style.left = blockLeft + 'px';
        }

// Check for collision
        const sheepRect = sheep.getBoundingClientRect();
        for (let i = 0; i < blocks.length; i++) {
            const blockRect = blocks[i].getBoundingClientRect();
            if (sheepRect.bottom >= blockRect.top &&
                sheepRect.right >= blockRect.left &&
                sheepRect.left <= blockRect.right) {
                // Collision detected, game over
                clearInterval(gameInterval);
                alert('Game Over! Score: ' + score);
                break;
            }
        }
    }

// Game interval
    const gameInterval = setInterval(gameLoop, 10); // Adjust the interval for smoother gameplay

// Event listeners for arrow keys
    document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowUp' && sheepTop === 0) {
            // Jump if sheep is on the ground
            sheepTop = 150; // Adjust the jump height
            sheep.style.top = sheepTop + 'px';
            setTimeout(function() {
                sheepTop = 0;
                sheep.style.top = sheepTop + 'px';
            }, 500); // Adjust the jump time
        }
    });

// Prevent scrolling on mobile devices when arrow keys are pressed
    window.addEventListener('keydown', function(e) {
        if(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(e.key) > -1) {
            e.preventDefault();
        }
    });

// Update score display
    setInterval(function() {
        document.getElementById('score').innerText = 'Score: ' + score;
    }, 1000); // Adjust the update interval for score display
</script>
</body>
</html>
```

To use this code:

1. Save the code as a .html file, for example, `sheep_jump_game.html`.
2. Replace `'sheep.png'` with the actual path to your sheep image, or you can use a suitable pictogram.
3. Open the HTML file in a web browser on your smartphone.
4. Use the arrow keys on the smartphone interface to control the sheep and make it jump.
5. Avoid colliding with the ground blocks and try to increase your score.
6. The game will end when the sheep collides with a block, and an alert will show your final score.

Feel free to modify the code and add more features to enhance the game further!