Make a game with right and left controls and a background that scrolls's game

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

No:11094

←

Prev Next

→

Make a game with right and left controls and a ba..ALL
Developer unknown｜Date and time 23/8/7 21:21:44
Build time 21.748 sec｜Game capacity 2.674KB｜

Script

Sure! Here's a simple game that meets your requirements. The game involves controlling a character using right and left controls to move across a scrolling background. The character is represented by a pictogram. You can play the game on a smartphone by tapping on the left and right sides of the screen.

In this game, you can control the character's movement by tapping on the left or right sides of the screen on a smartphone. The background will continuously scroll from right to left, giving the illusion of movement. The character itself is represented by a pictogram. Note: Make sure to replace `'emozi_all/pictogram.png'` in the CSS with the actual path or URL of the pictogram image you want to use.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            width: 100%;
            height: 500px;
            overflow-x: hidden;
            position: relative;
        }

#background {
            width: 200%;
            height: 100%;
            position: absolute;
            top: 0;
            background-color: #e2e2e2;
            animation: scroll 10s linear infinite;
        }

#character {
            width: 50px;
            height: 50px;
            background-image: url('pictogram.png');
            background-size: cover;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

@keyframes scroll {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="background"></div>
        <div id="character"></div>
    </div>

function moveLeft() {
                const characterPos = parseInt(getComputedStyle(character).left);
                character.style.left = (characterPos - 10) + 'px';
            }

function moveRight() {
                const characterPos = parseInt(getComputedStyle(character).left);
                character.style.left = (characterPos + 10) + 'px';
            }

document.addEventListener('touchstart', (event) => {
                const touchX = event.touches[0].clientX;
                const screenWidth = window.innerWidth;
                const halfScreen = screenWidth / 2;

if (touchX < halfScreen) {
                    moveLeft();
                } else {
                    moveRight();
                }
            });
        });
    </script>
</body>
</html>
```
In this game, you can control the character's movement by tapping on the left or right sides of the screen on a smartphone. The background will continuously scroll from right to left, giving the illusion of movement. The character itself is represented by a pictogram.

Note: Make sure to replace `'pictogram.png'` in the CSS with the actual path or URL of the pictogram image you want to use.