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

No:16622

Make a obby with a time limit selected by user and..ALL
Developer User7388｜Date and time 23/9/19 20:04:30
Build time 42.456 sec｜Game capacity 5.426KB｜

Script

Sure! Here's an example of a simple obby game written in a single HTML file with JavaScript. It allows the user to select a time limit and difficulty level for the game. The game will end if the player completes the obstacle course within the specified time limit, otherwise, they will lose. Copy the code below and save it as a .html file, then open it in a web browser to play the game:

Obby Game

Select Time Limit (in seconds):

Select Difficulty:

In this game, the player controls a red square (representing a player) using the left and right arrow keys on their smartphone. The goal is to avoid colliding with a black square (representing an obstacle) moving from left to right. The game ends either when the player completes the obstacle course within the specified time limit or if they collide with the obstacle. Hope you enjoy playing the game! Let me know if you have any further questions.

←

Prev　Next

→ 　

Back　

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

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

Copy the code below and save it as a .html file, then open it in a web browser to play the game:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Obby Game</title>
    <style>
        #player {
            position: absolute;
            bottom: 0;
            height: 50px;
            width: 50px;
            background-color: red;
        }
        #obstacle {
            position: absolute;
            bottom: 50px;
            height: 50px;
            width: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
    <h1>Obby Game</h1>
    <label for="time-limit">Select Time Limit (in seconds):</label>
    <input type="number" id="time-limit" min="1" value="60"><br><br>
    <label for="difficulty">Select Difficulty:</label>
    <select id="difficulty">
        <option value="easy">Easy</option>
        <option value="medium">Medium</option>
        <option value="hard">Hard</option>
    </select><br><br>
    <button onclick="startGame()">Start Game</button>

let gameStarted = false;
            let gameOver = false;

document.getElementById("time-limit").disabled = true;
            document.getElementById("difficulty").disabled = true;
            document.getElementById("start-button").disabled = true;

const player = document.getElementById("player");
            const obstacle = document.getElementById("obstacle");

function movePlayer(event) {
                const key = event.key;

if (key === "ArrowLeft") {
                    player.style.left = parseInt(player.style.left) - 10 + "px";
                } else if (key === "ArrowRight") {
                    player.style.left = parseInt(player.style.left) + 10 + "px";
                }
            }
            
            document.addEventListener("keydown", movePlayer);

function checkCollision() {
                const playerLeft = parseInt(player.style.left);
                const obstacleLeft = parseInt(obstacle.style.left);

if ((playerLeft >= obstacleLeft && playerLeft <= obstacleLeft + 50) ||
                    (obstacleLeft >= playerLeft && obstacleLeft <= playerLeft + 50))
                {
                    gameOver = true;
                    clearTimeout(gameTime);

// Display game over message
                    alert("Game Over! You crashed into the obstacle!");
                }
            }

function gameTimer() {
                const currentTime = new Date().getTime();
                const elapsedTime = currentTime - startTime;

if (elapsedTime >= timeLimit) {
                    gameOver = true;

// Display game over message
                    alert("Game Over! Time's up!");
                } else {
                    requestAnimationFrame(gameTimer);
                }
            }

let startTime;
            let gameTime;

function startTimer() {
                startTime = new Date().getTime();
                gameTime = requestAnimationFrame(gameTimer);
            }

startTimer();

function moveObstacle() {
                const gameContainerWidth = document.body.clientWidth - 50;
                let obstacleLeft = 0;

const moveInterval = setInterval(() => {
                    obstacle.style.left = obstacleLeft + "px";
                    obstacleLeft += 5;

if (obstacleLeft >= gameContainerWidth) {
                        clearInterval(moveInterval);
                    }

if (!gameOver) {
                        checkCollision();
                    }
                }, getDifficultySpeed());

function getDifficultySpeed() {
                    switch (difficulty) {
                        case "easy":
                            return 30;
                        case "medium":
                            return 20;
                        case "hard":
                            return 10;
                        default:
                            return 30;
                    }
                }
            }

moveObstacle();
        }
    </script>
</body>
</html>
```

Hope you enjoy playing the game! Let me know if you have any further questions.