One Click RPG 2 Evaluation

Generally speaking I am please with the final result. Some of the highlight of the project is successfully implementing an auto save feature on the game using local storage and as well refactoring the algorithm of the item upgrade from 277 lines of code to 111. I could have reduce the code base even more if I did not destruct the player object as it meant, I needed more lines for the save feature but at the same time my code looks neater without so many 'player.xxxx' all over my code. I also removed the 'onclick method' from the html as even though it again reduces the code base it is generally frown upon due to 'decrease readability of the code'. There are 'things' I can do to reduce it below 500 lines of code but again the readability will suffer. At the end of the day you will have to find a 'balance' between the two.

For anyone who wants to start creating an Idle game, I will show you the first version of the game which is literally 16 lines of JavaScript code.

let story=document.getElementById("story");

let gold=0;

function Dice(side){
    let result=Math.floor(Math.random()*side)+1;
        return result;
    }

function explore(){
    gainGold=Dice(10);
    gold+=gainGold
    document.getElementById("count").innerHTML=gold;
    let quest="You go on an adventure and found "+gainGold+" gold";
    story.innerHTML=quest;
    }

Whilst this is the HTML

<h1>RPG Clicker</h1>
<p>Go exploring and gain gold</p>

<div id="story"></div>

</div>

<div id= "buttons">
    <button onclick="explore()">Explore</button>
</div>

<p>Gold :<span id="count">0</span></p>
    
<script src="./script.js"></script>

The idea is you just keep adding to a very simple base for example the third version of the game look like this which is just below 100 lines of code.

let story=document.getElementById("story");

let gainGold;
let newEnvir;
let setting;
let gainXp;

let equipment;
let equipChoice;
let found=false;

let enviroment=["home","dungeon","graveyard","forest"];
let lowWeapons=["Knife","Rock","Wooden Staff","Iron Bar"];
let lowArmours=["Leather Tunic","Rags","Robe","Fur Coat"];
let lowRings=[" Copper Ring", "Bronze Ring ","Silver Ring","Iron Ring"];
let lowNecklaces=["Iron Amulet", "Silver Amulet","Copper Amulet","Steel Chain"];

class Player {
    constructor(xp,gold,level,armour,weapon,ring,necklace){
        this.xp=xp;
        this.gold=gold;
        this.level=level;
        this.armour=armour;
        this.weapon=weapon;
        this.ring=ring;
        this.necklace=necklace;
    }
}

let player=new Player(0,0,1,"empty","empty","empty","empty")

function Dice(side){
    let result=Math.floor(Math.random()*side)+1;
        return result;
    }

function explore(){
    gainGold=Dice(4)+2;
    player.gold+=gainGold
    gainXp=Dice(3)+1;
    player.xp+=gainXp;
    newEnvir=Dice(3);
    setting=enviroment[newEnvir];

    equipment=Dice(50);

    if (equipment==1){
        found=true;
        equipChoice=Dice(4)-1;
        equipNew=lowWeapons[equipChoice];
        player.weapon=equipNew;
        
    }

    else if (equipment==2){
        found=true;
        equipChoice=Dice(4)-1;
        equipNew=lowArmours[equipChoice];
        player.armour=equipNew;
    }

    else if (equipment==3){
        found=true;
        equipChoice=Dice(4)-1;
        equipNew=lowRings[equipChoice];
        player.ring=equipNew;
    }

    else if (equipment==4){
        found=true;
        equipChoice=Dice(4)-1;
        equipNew=lowNecklaces[equipChoice];
        player.necklace=equipNew; 
    }

    else{
        found=false;
    }

    let quest="You go explore a "+setting+" and gain "+gainGold+" gold and"+gainXp+" experience.";

    if (found==true){
       quest +="You find some better gear. You equip your new "+equipNew+".";
    }

    else{
        quest +="You could not find an upgrade for your equipment"; 
    }

    story.innerHTML=quest;
    document.getElementById("goldCount").innerHTML=player.gold;
    document.getElementById("xpCount").innerHTML=player.xp;
    document.getElementById("playerArmour").innerHTML=player.armour;
    document.getElementById("playerWeapon").innerHTML=player.weapon;
    document.getElementById("playerRing").innerHTML=player.ring;
    document.getElementById("playerNecklace").innerHTML=player.necklace;
    }

One thing I need to build a better habit of is using the ES update features like arrow functions, ternary operators and template string from the beginning rather during the 'refactoring phase' but when I am being 'creative' I tend not to bother with the technical side under afterwards. You can imagine how 'disgusting' my

algorithm of the item upgrade was when it was 277 lines long compare to it now at less than half its original size to be honest I can imagine an even more sophisticated algorithm with nested arrays and loops to half the size again.

Would be nice to get some animation going but I hate doing artwork and to be honest I have not drawn anything for a long while as all my graphics in my JavaScript games are recycle assets from my python games. Being bad at pixel art also doesn't motivate me to draw more either. In conclusion, I wrote some dungeon synth, learnt some new coding features and manage to implement all the 'main ideas' I had for the game, so one can really ask much more from a coding project.