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

No:37792

Rpg with randomized skills, perks and maps
Developer User17140｜Date and time 24/1/21 16:44:39
Build time 20.535 sec｜Game capacity 6.981KB｜

Script

Sure! Here's an example of a simple RPG game implemented as a single HTML file using JavaScript. It includes randomized skills, perks, and maps. Please note that this is a basic implementation and can be enhanced further.

RPG Game

To play the game: 1. Copy the above code into a new file and save it as `game.html`. 2. Open `game.html` in your web browser. 3. Use the arrow keys on your keyboard to move the player (represented by a blue square) around the game board. 4. Collect treasures (represented by yellow squares) to gain new skills. 5. Avoid obstacles (represented by gray squares) while exploring the map. 6. The game will end when you collect all the treasures. Feel free to modify and enhance this basic example to add more features, game mechanics, and visual elements 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>
    <meta charset="UTF-8">
    <title>RPG Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-board {
            display: inline-block;
            margin-top: 50px;
        }
        
        .player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
        }
        
        .obstacle {
            width: 50px;
            height: 50px;
            background-color: gray;
            position: absolute;
        }
        
        .treasure {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>RPG Game</h1>
    <div id="game-board"></div>
    
    <script>
        // Game settings
        const boardSize = 10;
        const numObstacles = 10;
        const numTreasures = 5;
        
        // Player object
        let player = {
            x: 0,
            y: 0,
            skills: ['Attack', 'Defend', 'Heal']
        };
        
        // Generate random skills for player
        function generateSkills(numSkills) {
            const allSkills = ['Fireball', 'Ice Blast', 'Lightning Strike', 'Healing Touch', 'Shield Bash'];
            const shuffledSkills = allSkills.sort(() => 0.5 - Math.random());
            return shuffledSkills.slice(0, numSkills);
        }
        
        player.skills = generateSkills(3); // Generate 3 random skills for player
        
        // Generate random positions for obstacles and treasures
        function generatePositions(numPositions) {
            let positions = [];
            while (positions.length < numPositions) {
                const position = {
                    x: Math.floor(Math.random() * boardSize),
                    y: Math.floor(Math.random() * boardSize)
                };
                if (!positions.some(p => p.x === position.x && p.y === position.y)) {
                    positions.push(position);
                }
            }
            return positions;
        }
        
        const obstaclePositions = generatePositions(numObstacles); // Generate obstacle positions
        const treasurePositions = generatePositions(numTreasures); // Generate treasure positions
        
        function drawBoard() {
            const gameBoard = document.getElementById('game-board');
            
            // Create obstacles
            obstaclePositions.forEach(position => {
                const obstacle = document.createElement('div');
                obstacle.className = 'obstacle';
                obstacle.style.left = position.x * 50 + 'px';
                obstacle.style.top = position.y * 50 + 'px';
                gameBoard.appendChild(obstacle);
            });
            
            // Create treasures
            treasurePositions.forEach(position => {
                const treasure = document.createElement('div');
                treasure.className = 'treasure';
                treasure.style.left = position.x * 50 + 'px';
                treasure.style.top = position.y * 50 + 'px';
                gameBoard.appendChild(treasure);
            });
            
            // Create player
            const playerElement = document.createElement('div');
            playerElement.className = 'player';
            playerElement.style.left = player.x * 50 + 'px';
            playerElement.style.top = player.y * 50 + 'px';
            gameBoard.appendChild(playerElement);
        }
        
        function handleKeydown(event) {
            const keyPressed = event.key.toLowerCase();
            
            // Move player based on key pressed
            switch (keyPressed) {
                case 'arrowup':
                    movePlayer(0, -1);
                    break;
                case 'arrowdown':
                    movePlayer(0, 1);
                    break;
                case 'arrowleft':
                    movePlayer(-1, 0);
                    break;
                case 'arrowright':
                    movePlayer(1, 0);
                    break;
            }
        }
        
        function movePlayer(dx, dy) {
            const newX = player.x + dx;
            const newY = player.y + dy;
            
            // Check if new position is valid
            if (newX >= 0 && newX < boardSize && newY >= 0 && newY < boardSize) {
                // Check for obstacles
                if (!obstaclePositions.some(obstacle => obstacle.x === newX && obstacle.y === newY)) {
                    // Check for treasure
                    if (treasurePositions.some(treasure => treasure.x === newX && treasure.y === newY)) {
                        player.skills.push(generateSkills(1)[0]); // Add a random skill when treasure is found
                        treasurePositions.splice(
                            treasurePositions.findIndex(treasure => treasure.x === newX && treasure.y === newY),
                            1
                        ); // Remove treasure from the list
                    }
                    
                    player.x = newX;
                    player.y = newY;
                    redrawPlayer();
                }
            }
        }
        
        function redrawPlayer() {
            const playerElement = document.querySelector('.player');
            playerElement.style.left = player.x * 50 + 'px';
            playerElement.style.top = player.y * 50 + 'px';
            
            checkGameStatus();
        }
        
        function checkGameStatus() {
            const treasureLeft = treasurePositions.length;
            if (treasureLeft === 0) {
                alert('You collected all the treasures! Game Over.');
                document.removeEventListener('keydown', handleKeydown);
            }
        }
        
        drawBoard(); // Initial draw of the game board
        document.addEventListener('keydown', handleKeydown); // Listen for keyboard events
    </script>
</body>
</html>
```

To play the game:
1. Copy the above code into a new file and save it as `game.html`.
2. Open `game.html` in your web browser.
3. Use the arrow keys on your keyboard to move the player (represented by a blue square) around the game board.
4. Collect treasures (represented by yellow squares) to gain new skills.
5. Avoid obstacles (represented by gray squares) while exploring the map.
6. The game will end when you collect all the treasures.

Feel free to modify and enhance this basic example to add more features, game mechanics, and visual elements based on your requirements and preferences.