Make a game that has a button for jumping and an arrow on the left of the button to move to the left and another arrow on the right side of the button to move to the right's game

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

No:22191

←

Prev Next

→

Make a game that has a button for jumping and an ..ALL
Developer User10267｜Date and time 23/10/21 11:49:41
Build time 50.737 sec｜Game capacity 2.941KB｜

Script

Sure! Here's an example of a simple game that meets your requirements:

In this game, there is a blue square representing the player, a "Jump" button, and left/right arrows for moving the player. When the "Jump" button is clicked, the player will perform a jump animation by moving vertically. The left and right arrows will move the player horizontally within the game area. The game is programmed to prevent the player from moving beyond the edges of the screen. Note: This code assumes that you have image files (`emozi_bear.png` and `emozi_chicken.png`) in the same directory as the HTML file, representing the left and right arrows. Please make sure to replace the image URLs with actual image file paths or URLs for the arrows to display correctly.

←

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 that meets your requirements:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Jumping Game</title>
    <style>
        #player {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
        }
        #left-arrow {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-image: url("left-arrow.png");
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: 10px;
            cursor: pointer;
        }
        #right-arrow {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-image: url("right-arrow.png");
            background-repeat: no-repeat;
            background-size: contain;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div id="controls">
        <div id="left-arrow"></div>
        <button id="jump-btn">Jump</button>
        <div id="right-arrow"></div>
    </div>

var position = 0; // initial player position

jumpBtn.addEventListener('click', function() {
            player.style.bottom = '200px'; // jump animation
            setTimeout(function() {
                player.style.bottom = '0'; // reset position after jump
            }, 500);
        });

leftArrow.addEventListener('click', function() {
            if (position > 0) {
                position -= 10; // decrease position to move left
                player.style.left = position + 'px';
            }
        });

rightArrow.addEventListener('click', function() {
            if (position < window.innerWidth - 100) {
                position += 10; // increase position to move right
                player.style.left = position + 'px';
            }
        });
    </script>
</body>
</html>
```

Note: This code assumes that you have image files (`left-arrow.png` and `right-arrow.png`) in the same directory as the HTML file, representing the left and right arrows. Please make sure to replace the image URLs with actual image file paths or URLs for the arrows to display correctly.