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

No:13861

104

←

Prev Next

→

RPG game called sussy baka
Developer User6030｜Date and time 23/8/30 5:35:36
Build time 18.715 sec｜Game capacity 3.654KB｜

Script

Sussy Baka RPG

Game Screen

Player Stats

Health Points: 100

Attack Power: 10

Actions

Start Game

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Sussy Baka RPG</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-screen {
            display: none;
        }
        
        #start-game-btn {
            padding: 10px;
            font-size: 24px;
            cursor: pointer;
        }
        
        #player-stats {
            margin: 20px;
            padding: 20px;
            border: 1px solid black;
            display: inline-block;
        }
        
        #actions {
            margin: 20px;
            text-align: left;
        }
    </style>
</head>

<body>
    <h1>Sussy Baka RPG</h1>
    
    <div id="game-screen">
        <h2>Game Screen</h2>
        
        <div id="player-stats">
            <h3>Player Stats</h3>
            <p id="player-hp">Health Points: 100</p>
            <p id="player-attack">Attack Power: 10</p>
        </div>
        
        <div id="actions">
            <h3>Actions</h3>
            <p>
                <img src="pictograms/attack.png" alt="Attack" id="attack-btn">
                <img src="pictograms/heal.png" alt="Heal" id="heal-btn">
            </p>
        </div>
    </div>
    
    <div id="start-game-btn">Start Game</div>
    
    <script>
        // Game Initialization
        document.getElementById('start-game-btn').addEventListener('click', function() {
            document.getElementById('start-game-btn').style.display = 'none';
            document.getElementById('game-screen').style.display = 'block';
            
            startGame();
        });
        
        function startGame() {
            var player = {
                hp: 100,
                attack: 10
            };
            
            updatePlayerStats();
            
            document.getElementById('attack-btn').addEventListener('click', function() {
                playerAttack();
            });
            
            document.getElementById('heal-btn').addEventListener('click', function() {
                healPlayer();
            });
        }
        
        function updatePlayerStats() {
            document.getElementById('player-hp').innerHTML = 'Health Points: ' + player.hp;
            document.getElementById('player-attack').innerHTML = 'Attack Power: ' + player.attack;  
        }
        
        function playerAttack() {
            // Simulate enemy's health and attack power
            var enemy = {
                hp: 50,
                attack: 8
            };
            
            enemy.hp -= player.attack;
            
            if (enemy.hp <= 0) {
                alert('You defeated the enemy! Game Over!');
                location.reload();
            }
            
            // Enemy attacks back
            player.hp -= enemy.attack;
            
            if (player.hp <= 0) {
                alert('Game Over!');
                location.reload();
            }
            
            updatePlayerStats();
        }
        
        function healPlayer() {
            player.hp += 20;
            
            // Limit maximum HP to 100
            if (player.hp > 100) {
                player.hp = 100;
            }
            
            // Enemy attacks while healing
            var enemy = {
                hp: 50,
                attack: 8
            };
            
            player.hp -= enemy.attack;
            
            if (player.hp <= 0) {
                alert('Game Over!');
                location.reload();
            }
            
            updatePlayerStats();
        }
    </script>
</body>
</html>