Platformer with a joystick that when u pull it it ains character in opposite direction. When u release it it launches the character and you have to avoid obstacles's game

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

No:17238

114

←

Prev Next

→

Platformer with a joystick that when u pull it it ..ALL
Developer User7614｜Date and time 23/9/22 19:36:35
Build time 28.781 sec｜Game capacity 3.313KB｜

Script

Sure, here is a sample implementation of a platformer game using JavaScript, HTML, and CSS:

This code sets up a simple platformer game with a character represented by a blue box and an obstacle represented by a red box. The player can control the character using a virtual joystick by clicking and releasing on the character. When the joystick is released, the character launches upwards, and the player needs to avoid colliding with the obstacle. If a collision occurs, a game over message is displayed, and the game restarts. Please note that this implementation is functional but quite basic. You can enhance it further by adding more features, levels, and graphics as per your requirement.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here is a sample implementation of a platformer game using JavaScript, HTML, and CSS:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Platformer Game</title>
    <style>
        #game {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        
        #character {
            width: 40px;
            height: 40px;
            background-color: blue;
            position: absolute;
            bottom: 0;
        }
        
        #obstacle {
            width: 80px;
            height: 20px;
            background-color: red;
            position: absolute;
            bottom: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="character"></div>
        <div id="obstacle"></div>
    </div>
    <script>
        // Game variables
        var character = document.getElementById("character");
        var obstacle = document.getElementById("obstacle");
        var joystickPressed = false;
        var velocity = 0;
        var gravity = 0.5;

// Event listeners for joystick
        character.addEventListener("mousedown", function() {
            joystickPressed = true;
        });

character.addEventListener("mouseup", function() {
            joystickPressed = false;
            launchCharacter();
        });

// Event listeners for obstacle collision
        setInterval(function() {
            var characterRect = character.getBoundingClientRect();
            var obstacleRect = obstacle.getBoundingClientRect();

if (characterRect.left < obstacleRect.right && characterRect.right > obstacleRect.left &&
                characterRect.bottom > obstacleRect.top && characterRect.top < obstacleRect.bottom) {
                gameOver();
            }
        }, 10);

// Game loop
        setInterval(function() {
            moveCharacter();
        }, 10);

function moveCharacter() {
            // Apply gravity
            velocity += gravity;

// Move character vertically
            var characterBottom = parseFloat(getComputedStyle(character).bottom);
            var newBottom = characterBottom + velocity;
            if (newBottom < 0) {
                newBottom = 0;
                velocity = 0;
            }
            character.style.bottom = newBottom + "px";
        }

function launchCharacter() {
            // Launch the character upwards
            velocity = -10;
        }

function gameOver() {
            alert("Game Over");
            location.reload(); // Restart the game after game over
        }
    </script>
</body>
</html>
```

Please note that this implementation is functional but quite basic. You can enhance it further by adding more features, levels, and graphics as per your requirement.