Rpg's game | AI game creator

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

No:24668

87

Rpg
Developer User11394｜Date and time 23/11/11 3:30:13
Build time 107.602 sec｜Game capacity 4.313KB｜

Sure! Here's a simple RPG game implemented as a single HTML file using JavaScript. The game assumes smartphone operation and uses pictograms for a visual interface.

Enemy

In this RPG game, there are three actions the player can take: Attack, Defend, and Heal. The player's health is displayed using a health bar, and the enemy's health is also displayed. Each action affects the player's health and the enemy's health. The game starts with both the player and enemy having full health (100). When the player clicks on the Attack button, a random damage value (between 10 and 20) is calculated and subtracted from the enemy's health. The enemy's image shakes briefly to indicate the attack. The player can also click on Defend to increase their health by 10 (up to the maximum health). Clicking on Heal triggers the player to gain a random amount of health (between 10 and 20). The game checks for game over conditions after each action. If the enemy's health reaches 0, the player wins, and an alert is displayed. If the player's health reaches 0, the game is over, and an alert is displayed. The game can be reset by closing the alert or by clicking on any action button. Please note that you'd need to replace the image URLs (`emozi_rabbit.png`, `emozi_hamuster.png`, `emozi_dog.png`, `emozi_all/enemy.png`) in the HTML with the actual paths to your pictogram images to make them display correctly.

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

Sure! Here's a simple RPG game implemented as a single HTML file using JavaScript. The game assumes smartphone operation and uses pictograms for a visual interface.

```html
<!DOCTYPE html>
<html>
<head>
    <title>RPG Game</title>
    <style>
        #game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <img src="attack.png" id="attack-button" alt="Attack" onclick="attack()">
        <img src="defend.png" id="defend-button" alt="Defend" onclick="defend()">
        <img src="heal.png" id="heal-button" alt="Heal" onclick="heal()">
        <div id="enemy-container">
            <img src="enemy.png" id="enemy-image" alt="Enemy">
            <div id="enemy-health">
                <div id="enemy-health-bar"></div>
            </div>
        </div>
        <div id="player-health">
            <div id="player-health-bar"></div>
        </div>
    </div>

<script>
        // RPG Game Logic
        const MAX_HEALTH = 100;

let enemyHealth = MAX_HEALTH;
        let playerHealth = MAX_HEALTH;

// Function to update player and enemy health bars
        function updateHealthBars() {
            document.getElementById("player-health-bar").style.width = `${playerHealth}%`;
            document.getElementById("enemy-health-bar").style.width = `${enemyHealth}%`;
        }

// Function to check if the game is over
        function checkGameOver() {
            if (enemyHealth <= 0) {
                alert("You win!");
                resetGame();
            } else if (playerHealth <= 0) {
                alert("Game over!");
                resetGame();
            }
        }

// Function to handle attack action
        function attack() {
            const damage = Math.floor(Math.random() * 10) + 10;
            enemyHealth -= damage;

const enemyImage = document.getElementById("enemy-image");
            enemyImage.classList.add("shake");
            setTimeout(() => enemyImage.classList.remove("shake"), 1000);

updateHealthBars();
            checkGameOver();
        }

// Function to handle defend action
        function defend() {
            playerHealth += 10;
            if (playerHealth > MAX_HEALTH) {
                playerHealth = MAX_HEALTH;
            }
            updateHealthBars();
        }

// Function to handle heal action
        function heal() {
            const healAmount = Math.floor(Math.random() * 10) + 10;
            playerHealth += healAmount;
            if (playerHealth > MAX_HEALTH) {
                playerHealth = MAX_HEALTH;
            }
            updateHealthBars();
        }

// Function to reset the game
        function resetGame() {
            enemyHealth = MAX_HEALTH;
            playerHealth = MAX_HEALTH;
            updateHealthBars();
        }
    </script>
</body>
</html>
```

In this RPG game, there are three actions the player can take: Attack, Defend, and Heal. The player's health is displayed using a health bar, and the enemy's health is also displayed. Each action affects the player's health and the enemy's health.

The game starts with both the player and enemy having full health (100). When the player clicks on the Attack button, a random damage value (between 10 and 20) is calculated and subtracted from the enemy's health. The enemy's image shakes briefly to indicate the attack. The player can also click on Defend to increase their health by 10 (up to the maximum health). Clicking on Heal triggers the player to gain a random amount of health (between 10 and 20).

The game checks for game over conditions after each action. If the enemy's health reaches 0, the player wins, and an alert is displayed. If the player's health reaches 0, the game is over, and an alert is displayed. The game can be reset by closing the alert or by clicking on any action button.

Please note that you'd need to replace the image URLs (`attack.png`, `defend.png`, `heal.png`, `enemy.png`) in the HTML with the actual paths to your pictogram images to make them display correctly.