JSFiddle - React, Tailwind, and code Playground
HTML
<input id='btn_explore' type='button' value='Explore the Dungeon ...' />
<br />
<label id='actionOutput' >Start exploring the dungeon ...?</label>
<hr />
<div id='monsterDisplay'>
<label id='monsterName'></label>
<progress id='monsterHpValue' ></progress>
<label id='monsterHp'></label>
<label id='monsterHpMax'></label>
<br />
<input id='btn_hit' type='button' value='Hit it!' />
<br />
<label id='combatLog'></label><br />
<label id='lootLog'></label>
</div>
JavaScript
class Monster{
constructor(monsterName, maxHp){
this.monsterName = monsterName;
this.maxHp = maxHp;
this.currentHp = maxHp;
this.alive = true;
}
takeDamage(damage){
if(this.alive){
this.currentHp = this.currentHp-damage;
if(this.currentHp <= 0){
this.alive = false;
}
else{
this.alive = true;
}
updateGUI(this);
}
}
}
class Item{
constructor(itemName, itemSlot, goldValue, atkValue){
this.itemName = itemName;
this.itemSlot = itemSlot;
this.goldValue = goldValue;
this.atkValue = atkValue;
}
}
// your variables
var monsters = [];
var lootableItems = [];
var playerItems;
var activeMonster;
var activeWeapon;
function initGUI(){
document.getElementById('btn_explore').addEventListener('click', function(){drawMonster();});
document.getElementById('btn_hit').addEventListener('click', function(){hitMonster();});
document.getElementById('monsterDisplay').style.visibility = "hidden";
}
function initMonsters(){ // function to initialize your monsters!
monsters.push(new Monster('Goblin', 100));
monsters.push(new Monster('Bandit', 200));
monsters.push(new Monster('Dragon', 500));
monsters.push(new Monster('Raphel Holzhauser', 5000));
}
function initItems(){ // function to initialize some Items!
lootableItems.push(new Item('Stick', 'Weapon', 10, 1));
lootableItems.push(new Item('Short Sword', 'Weapon', 100, 10));
lootableItems.push(new Item('Fahnenstangl', 'Weapon', 30000, 500));
}
function drawMonster(){ // function to draw a monster from your monster array!
var myMonster = monsters[Math.floor(Math.random()*monsters.length)]; // gets a random monster from the array
// create a meaningful message based on the monster and its properties
document.getElementById('actionOutput').innerHTML = "A wild " + myMonster.monsterName + " attacks you! It has " + myMonster.maxHp + " HP!";
// update some more GUI elements
...