Rideable dragons, mountains, trees, evil dragon bosses with over 200 health,'s game

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

No:7439

2127

←

Prev Next

→

Rideable dragons, mountains, trees, evil dragon bo..ALL
Developer User4031｜Date and time 23/7/7 20:51:16
Build time 23.129 sec｜Game capacity 4.397KB｜

Script

and a quest to save the kingdom awaits in this exciting dragon riding game! Here's a sample implementation in a single HTML file with JavaScript code enclosed within script tags:

Please note that for the game to run properly, you need to have corresponding image files (dragon.png, mountain.png, tree.png, boss.png) in the same directory as the HTML file. In the above implementation, the game container is a 400x400 pixel div element. The player controls a dragon using arrow keys on their smartphone. The dragon can move within the boundaries of the game container. Mountains, trees, and a boss (evil dragon) are randomly spawned within the game container. You can enhance the game functionality by adding collision detection, health tracking, scoring, and additional game mechanics based on your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

and a quest to save the kingdom awaits in this exciting dragon riding game!

Here's a sample implementation in a single HTML file with JavaScript code enclosed within script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Dragon Riding Adventure</title>
    <style>
        #game-container {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .dragon {
            width: 50px;
            height: 50px;
            background: url("dragon.png");
            position: absolute;
        }
        .mountain {
            width: 50px;
            height: 50px;
            background: url("mountain.png");
            position: absolute;
        }
        .tree {
            width: 50px;
            height: 50px;
            background: url("tree.png");
            position: absolute;
        }
        .boss {
            width: 50px;
            height: 50px;
            background: url("boss.png");
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// Initialize player's dragon position
        let dragonX = 0;
        let dragonY = 0;

// Generate random positions for mountains, trees, and boss
        const generateRandomPosition = () => {
            return {
                x: Math.floor(Math.random() * 8) * 50,
                y: Math.floor(Math.random() * 8) * 50
            };
        };

// Spawn mountains, trees, and boss
        const spawnObjects = () => {
            const mountainPosition = generateRandomPosition();
            const treePosition = generateRandomPosition();
            const bossPosition = generateRandomPosition();

const mountain = document.createElement("div");
            mountain.className = "mountain";
            mountain.style.left = mountainPosition.x + "px";
            mountain.style.top = mountainPosition.y + "px";
            gameContainer.appendChild(mountain);

const tree = document.createElement("div");
            tree.className = "tree";
            tree.style.left = treePosition.x + "px";
            tree.style.top = treePosition.y + "px";
            gameContainer.appendChild(tree);

const boss = document.createElement("div");
            boss.className = "boss";
            boss.style.left = bossPosition.x + "px";
            boss.style.top = bossPosition.y + "px";
            gameContainer.appendChild(boss);
        };

// Move the dragon
        const moveDragon = (event) => {
            switch (event.key) {
                case "ArrowUp":
                    if (dragonY > 0) dragonY -= 50;
                    break;
                case "ArrowDown":
                    if (dragonY < 350) dragonY += 50;
                    break;
                case "ArrowLeft":
                    if (dragonX > 0) dragonX -= 50;
                    break;
                case "ArrowRight":
                    if (dragonX < 350) dragonX += 50;
                    break;
            }

// Update dragon's position
            const dragon = document.getElementById("dragon");
            dragon.style.left = dragonX + "px";
            dragon.style.top = dragonY + "px";
        };

// Start the game
        const startGame = () => {
            // Add event listener to move the dragon
            document.addEventListener("keydown", moveDragon);

// Spawn initial objects
            spawnObjects();
        };

// Initialize game
        startGame();
    </script>
</body>
</html>
```

Please note that for the game to run properly, you need to have corresponding image files (dragon.png, mountain.png, tree.png, boss.png) in the same directory as the HTML file.

In the above implementation, the game container is a 400x400 pixel div element. The player controls a dragon using arrow keys on their smartphone. The dragon can move within the boundaries of the game container. Mountains, trees, and a boss (evil dragon) are randomly spawned within the game container.

You can enhance the game functionality by adding collision detection, health tracking, scoring, and additional game mechanics based on your requirements.