Make a obby game which includes jump and run ability with good graphics's game

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

No:42094

←

Prev Next

→

Make a obby game which includes jump and run abili..ALL
Developer User18807｜Date and time 24/2/10 18:35:00
Build time 10.326 sec｜Game capacity 4.22KB｜

Script

Sure! Here's an example of a simple obby game implemented as a single HTML file using JavaScript and enclosed in script tags. Please note that the game's graphics will be minimalistic due to the limitation of using pictograms. Copy the code below and save it as an HTML file to play the game:

To play the game, open the saved HTML file in a web browser (preferably on a smartphone) and use the Space key or tap on the screen to make the player jump. The objective is to reach the platforms without touching the ground or any obstacles. The player (represented by a yellow rectangle) can jump and run on the platforms (represented by blue rectangles). Please note that this is a basic implementation and may not have advanced graphics or complex levels. You can customize and enhance the game further based on your requirements and preferences.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Game Configuration
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const screenWidth = 400;
        const screenHeight = 400;
        const playerSize = 40;
        const platformWidth = 100;
        const platformHeight = 20;
        const gravity = 0.5;
        const jumpForce = -10;

// Player Configuration
        const player = {
            x: 0,
            y: 0,
            width: playerSize,
            height: playerSize,
            velocityX: 0,
            velocityY: 0,
            isJumping: false,
        };

// Platform Configuration
        const platforms = [
            { x: 100, y: 300},
            { x: 200, y: 200},
            { x: 300, y: 100},
        ];

// Keyboard Inputs
        let keyPressed = {};

document.addEventListener('keydown', function(event) {
            keyPressed[event.code] = true;
        });

document.addEventListener('keyup', function(event) {
            keyPressed[event.code] = false;
        });

// Game Loop
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Game Update
        function update() {
            if (keyPressed['Space'] && !player.isJumping) {
                player.velocityY = jumpForce;
                player.isJumping = true;
            }

player.velocityY += gravity;
            player.x += player.velocityX;
            player.y += player.velocityY;

if (player.y + player.height >= screenHeight) {
                player.y = screenHeight - player.height;
                player.velocityY = 0;
                player.isJumping = false;
            }

platforms.forEach(function(platform) {
                if (player.x < platform.x + platformWidth &&
                    player.x + player.width > platform.x &&
                    player.y + player.height > platform.y &&
                    player.y < platform.y + platformHeight) {
                    player.y = platform.y - player.height;
                    player.isJumping = false;
                    player.velocityY = 0;
                }
            });
        }

// Game Draw
        function draw() {
            ctx.clearRect(0, 0, screenWidth, screenHeight);

ctx.fillStyle = '#ffcc00'; // Player color
            ctx.fillRect(player.x, player.y, player.width, player.height);

ctx.fillStyle = '#005580'; // Platform color
            platforms.forEach(function(platform) {
                ctx.fillRect(platform.x, platform.y, platformWidth, platformHeight);
            });
        }

// Start the Game
        function startGame() {
            canvas.width = screenWidth;
            canvas.height = screenHeight;
            player.x = screenWidth / 2 - player.width / 2;
            player.y = screenHeight - player.height;

gameLoop();
        }

// Call the startGame function to begin the game
        startGame();
    </script>
</body>
</html>
```

Please note that this is a basic implementation and may not have advanced graphics or complex levels. You can customize and enhance the game further based on your requirements and preferences.