I’m writing a mini-game of sorts in JSFiddle which uses Javascript, HTML, and CSS.
Essentially what I’m trying to do is make a basic combat system. The player versus 3 enemies, and will attack, and be attacked until one of their HP counters hit 0.
In the script I’m using while loops, the main loop holds the game, and turns will use secondary loops. The problem is the loops don’t seem to be updating the HTML elements, and the initial “.innerHTML” writing function doesn’t seem to trigger until after a prompt within the secondary loop.
I’m sure I’m probably overlooking something simple, or I’m not understanding something correctly since I’m still pretty amateur. Please take a look and see if you can help make it work!
I haven’t quite worked out how to make buttons work with control flow yet, but I agree that buttons would make for a nicer interface anyway.
For example, if I have a button that initiates the battle using a function, how would I use another button to direct which enemy is being attacked? I only know how to do this using prompt.
I took your advice and changed input to use buttons. Now instead of loops, everything uses functions. For the most part everything works, although I am still having a slight issue with an else if statement triggering on time.
function checkLife() {
if (badguy1 <= 0 && badguy2 <= 0 && badguy3 <= 0) {
outputHolder1.innerHTML ="It's ded Jim. Congratulations!";
return combat = false;
} else if (yourHealth <= 0) {
outputHolder1.innerHTML = "You are not a brick house, you are a dead house. You lose.";
return combat = false;
} else {
hitBack();
}
}
The else if statement should immediately stop the attack functions, which are set on the buttons, from operating if the variable yourHealth hits 0 or below.
Instead it only triggers on the second click from the attack functions. This means that if the player health hits a negative number, it doesn’t register as a loss until the player attacks again. I’m sure it’s a logic problem but I don’t know what the problem is.
Hello, @spiderpiggie. I have tried your code. I would like to say that it’s cool idea. But you need to review your code, because you have three functions attackOne(), attackTwo() and attackThree() with same code. So, for this functions you need to use DRY (Don’t Repeat Yourself) principe:
function attackBadGuy(badGuy) {
if (combat) {
var yourHit = randomNumber(25,50);
badGuy -= yourHit;
badGuy.value = "HP: " +badguy1;
if (badGuy <= 0) {
badGuy.value = "Dead";
}
checkLife();
}
}
I will check my suggestion.
And what about Bootstrap and jQuery instead of css and html DOM?
function attackBadGuy(hitCounter,domElement) {
if (combat) {
var yourHit = randomNumber(25,50);
hitCounter -= yourHit;
domElement.value = "HP: " +hitCounter;
if (hitCounter <= 0) {
domElement.value = "Dead";
}
checkLife();
}
}
However this doesn’t update the DOM values accurately for whatever reason.
Also I haven’t learned Bootstrap or jQuery yet, so for now I’m sticking with the basics. This is just a practice exercise.