Make a game with right and left controls and a background that scrolls either when you press right or left's game

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

No:11095

←

Prev Next

→

Make a game with right and left controls and a ba..ALL
Developer unknown｜Date and time 23/8/7 21:22:40
Build time 17.704 sec｜Game capacity 2.526KB｜

Script

Sure! Here's an example of a simple game with right and left controls where the background scrolls when you press the corresponding button. Since you requested the use of pictograms, I'll use some simple arrow symbols for the controls. Just copy the entire code below and save it with a ".html" extension to play it as a finished game in any modern web browser.

In this game, you'll need to replace the `background.jpg` and `emozi_all/game.png` URLs with your own image files for the background and player character. The background will scroll horizontally as you press the left or right arrows, and the player will move accordingly. Let me know if you have any questions or if there's anything else I can help you with!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

#game {
            width: 100%;
            height: 100vh;
            background: url("background.jpg") repeat-x;
            position: relative;
            background-position: center bottom;
        }

#player {
            width: 100px;
            height: 100px;
            background-image: url("player.png");
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div id="game"></div>
    <script>
        var game = document.getElementById("game");
        var player = document.getElementById("player");
        var scrollSpeed = 5;

// Move the player to the left
        function moveLeft() {
            var leftPosition = parseInt(player.style.left) || 0;
            leftPosition -= scrollSpeed;
            player.style.left = leftPosition + "px";
            game.style.backgroundPositionX = leftPosition + "px";
        }

// Move the player to the right
        function moveRight() {
            var leftPosition = parseInt(player.style.left) || 0;
            leftPosition += scrollSpeed;
            player.style.left = leftPosition + "px";
            game.style.backgroundPositionX = leftPosition + "px";
        }

// Event listeners for left and right arrow keys
        document.addEventListener("keydown", function (event) {
            switch (event.key) {
                case "ArrowLeft":
                    moveLeft();
                    break;
                case "ArrowRight":
                    moveRight();
                    break;
            }
        });
    </script>
</body>
</html>
```

In this game, you'll need to replace the `background.jpg` and `player.png` URLs with your own image files for the background and player character. The background will scroll horizontally as you press the left or right arrows, and the player will move accordingly. Let me know if you have any questions or if there's anything else I can help you with!