External Exam Download Resources Web Applications Games Recycle Bin

Roleplayer Game

rpg.html

<!DOCTYPE html>
<html>
    <head>
        <title>RPG game</title>
        <link rel="stylesheet" type="text/css" href="rpg.css">
    </head>
    <body onload="reset()">
        <h1>RPG game</h1>
        
        <table>
            <thead>
                <tr>
                    <td>Skill</td>
                    <td>player 1</td>
                    <td>CPU</td>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Attack:</td>
                <td><span id="p1_attack"></span></td>
                <td><span id="cpu_attack"></span></td>
            </tr>
            <tr>
                <td>Defence:</td>
                <td><span id="p1_defence"></span></td>
                <td><span id="cpu_defence"></span></td>
            </tr>
            <tr>
                <td>Health:</td>
                <td><span id="p1_health"></span></td>
                <td><span id="cpu_health"></span></td>
            </tr>
            <tr>
                <td colspan="3"><span id="feedback"></span></td>
            </tr>
            </tbody>
        </table>
        
        <br><hr><br>
        
        <table>
            <tr>
                <td colspan="2">Score:</td>
            </tr>
            <tr>
                <td>Wins: <span id="wins"></span></td>
                <td><input type="button" id="escape" value="Escape" onclick="escape()" style="display: none;"></td>
            </tr>
        </table>
        
        <br><hr><br>
        
        <table>
            <tr>
                <td colspan="2">Actions:</td>
            </tr>
            <tr>
                <td><input type="button" value="Combat" onclick="combat()"></td>
                <td><input type="button" value="Restart Game" onclick="location.reload()"></td>
            </tr>
            <tr id="boostoptions" style="display: none;">
                <td><input type="button" value="Apply Boost" onclick="boost()"></td>
                <td>
                    <select id="stat_to_boost">
                    <option value="attack">attack</option>
                    <option value="defence">defence</option>
                    <option value="health">health</option>
                    </select>
                </td>
            </tr>
            
        </table>
        
        
        <script src="rpg.js"></script>
    </body>
</html>

rpg.css

table {
    border-collapse: collapse;
}

td {
    border: 3px solid #778899;
    text-align: left;
    padding: 5px;
}

rpg.js

var p1_attack, p1_defence, p1_health, cpu_attack, cpu_defence, cpu_health;
var wins = 0;
var allowCombat = true;

const p1_min_damage_amount = 2;
const cpu_min_damage_amount = 1;

function update(msg = "&nbsp;"){
    document.getElementById("p1_attack").innerHTML = p1_attack;
    document.getElementById("p1_defence").innerHTML = p1_defence;
    document.getElementById("p1_health").innerHTML = p1_health;
    document.getElementById("cpu_attack").innerHTML = cpu_attack;
    document.getElementById("cpu_defence").innerHTML = cpu_defence;
    document.getElementById("cpu_health").innerHTML = cpu_health;
    document.getElementById("wins").innerHTML = wins;
    document.getElementById("feedback").innerHTML = msg;
}

function attack(){
    var p1_attack_difference = p1_attack - cpu_defence;
    var p1_attack_potential = p1_min_damage_amount;
    if (p1_attack_difference > p1_min_damage_amount){ p1_attack_potential = p1_attack_difference; }
    var p1_damage_inflicted = Math.floor((Math.random() * p1_attack_potential) + p1_min_damage_amount);
    cpu_health = cpu_health - p1_damage_inflicted;
    if(cpu_health < 1) { return true; } else { return false; } //victorius?
}

function defend(){
    var cpu_attack_difference = cpu_attack - p1_defence;
    var cpu_attack_potential = cpu_min_damage_amount;
    if (cpu_attack_difference > cpu_min_damage_amount){ cpu_attack_potential = cpu_attack_difference; }
    var cpu_damage_inflicted = Math.floor((Math.random() * cpu_attack_potential) + cpu_min_damage_amount);
    p1_health = p1_health - cpu_damage_inflicted;
    if(p1_health < 1) { return true; } else { return false; } //game over?
}

function winSequence(){
    allowCombat = false;
    wins = wins + 1;
    update("win. claim boost");
    document.getElementById("boostoptions").style.display = "table-row";
    document.getElementById("escape").style.display = "inline";
}

function boost(){
    stat_to_boost = document.getElementById("stat_to_boost").value;
    var temp_amt = Math.floor((Math.random() * 10) + 5);    
    switch(stat_to_boost){
        case "attack": p1_attack = p1_attack + temp_amt; break;    
        case "defence": p1_defence = p1_defence + temp_amt; break;
        case "health": p1_health = p1_health + temp_amt; break;
    }
    document.getElementById("boostoptions").style.display = "none";
    allowCombat = true;
    generateNewOpponent();
}

function loseSequence(){
    allowCombat = false;
    update("GAME OVER.");
}

function combat(){
    if (allowCombat){
        var victorius = false;
        victorius = attack();
        update();
        if (victorius){ winSequence(); }
        else {
            gameover = defend();
            update();
            if(gameover){ loseSequence(); }
        }
    }
}

function reset(){
    p1_attack = Math.floor((Math.random() * 15) + 5);
    p1_defence = Math.floor((Math.random() * 15) + 5);
    p1_health = Math.floor((Math.random() * 15) + 5);
    generateNewOpponent();
}

function escape(){
    if(allowCombat && wins > 0){
        wins = wins - 1;
        generateNewOpponent();
    }
    if (wins < 1) { document.getElementById("escape").style.display = "none"; }
}
    
function generateNewOpponent(){
    cpu_attack = Math.floor((Math.random() * (p1_attack * 1.3) ) + (p1_attack * 0.5) );
    cpu_defence = Math.floor((Math.random() * (p1_defence * 1.3) ) + (p1_defence * 0.5) );
    cpu_health = Math.floor((Math.random() * (p1_health * 1.3) ) + (p1_health * 0.5) );
    if (cpu_attack < 1) cpu_attack = 1; if (cpu_defence < 1) cpu_defence = 1; if (cpu_health < 1) cpu_health = 1; 
    update();
}

Improve headings, add rules (HTML) and refine aesthetics (CSS)


You could also improve / modify game mechanics (JS), such as:
  1. play test, and better balance the game mechanics by adjusting the random max and min values
  2. add other abilities (e.g. magic)
  3. allow pickups or items than can be used as one offs to assist
  4. locations / bosses?
  5. story?
  6. store where i can trade items? etc.