Roblox game 2d with controller BUTTONS's game

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

No:43390

←

Prev Next

→

Roblox game 2d with controller BUTTONS
Developer User19182｜Date and time 24/2/15 12:46:19
Build time 11.643 sec｜Game capacity 4.276KB｜

Script

Sure! Here's an example of a 2D game in HTML using JavaScript, incorporating pictograms and playable using a smartphone's touch controls. The game is a simple platformer where the player controls a character with buttons for left, right, and jump actions.

This HTML file represents a 2D platformer game with controller buttons using JavaScript. The game is enclosed within script tags. To play the game on a smartphone, simply open the file in a web browser. The game features a red square representing the player character. The player can control the character using the touch buttons provided. The left and right buttons move the player horizontally, and the up button makes the player jump. The game loop continuously updates the player's position on the screen. Please note that this is just a simple example demonstrating the concept of a game using HTML and JavaScript, and it can be further expanded and customized to create a more complex game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>2D Platformer Game</title>
    <style>
        #container {
            position: relative;
            width: 320px;
            height: 480px;
            border: 1px solid black;
        }
        .player {
            position: absolute;
            width: 32px;
            height: 32px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="player"></div>
    </div>
    <script>
        // Game variables
        const playerSpeed = 5;
        const jumpPower = 10;
        let isJumping = false;

// Game initialization
        function init() {
            const container = document.getElementById('container');
            const player = document.querySelector('.player');
    
            // Set initial player position
            let playerX = 0;
            let playerY = container.clientHeight - player.clientHeight;
    
            // Update player position
            function updatePlayer() {
                player.style.left = `${playerX}px`;
                player.style.top = `${playerY}px`;
            }
    
            // Add event listeners for touch controls
            function addTouchControls() {
                const leftBtn = document.createElement('button');
                leftBtn.innerText = '⬅️';
                leftBtn.style.position = 'absolute';
                leftBtn.style.bottom = '10px';
                leftBtn.style.left = '10px';
                leftBtn.addEventListener('touchstart', () => {
                    playerX -= playerSpeed;
                });
                container.appendChild(leftBtn);
    
                const rightBtn = document.createElement('button');
                rightBtn.innerText = '➡️';
                rightBtn.style.position = 'absolute';
                rightBtn.style.bottom = '10px';
                rightBtn.style.left = '60px';
                rightBtn.addEventListener('touchstart', () => {
                    playerX += playerSpeed;
                });
                container.appendChild(rightBtn);
    
                const jumpBtn = document.createElement('button');
                jumpBtn.innerText = '🔼';
                jumpBtn.style.position = 'absolute';
                jumpBtn.style.bottom = '60px';
                jumpBtn.style.left = '35px';
                jumpBtn.addEventListener('touchstart', () => {
                    if (!isJumping) {
                        isJumping = true;
                        playerY -= jumpPower;
                        setTimeout(() => {
                            playerY += jumpPower;
                            setTimeout(() => {
                                isJumping = false;
                            }, 500); // Jump cooldown time
                        }, 1000); // Jump duration
                    }
                });
                container.appendChild(jumpBtn);
            }
    
            // Game loop
            function gameLoop() {
                updatePlayer();
                requestAnimationFrame(gameLoop);
            }
    
            // Start the game
            addTouchControls();
            gameLoop();
        }

// Start the game
        init();
    </script>
</body>
</html>
```

The game features a red square representing the player character. The player can control the character using the touch buttons provided. The left and right buttons move the player horizontally, and the up button makes the player jump. The game loop continuously updates the player's position on the screen.

Please note that this is just a simple example demonstrating the concept of a game using HTML and JavaScript, and it can be further expanded and customized to create a more complex game.