[Off-topic] Help with a problem on a personal project, Javascript and Html DOM


#1

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.

Take a look at the script here.

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!


#2

The idea is okay, but make some buttons:

<input type="button" value="attack" onclick="javascriptFunction()">

you can add function calls to buttons, this is a much better idea for your program


#3

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.


#4

you should learn how to use buttons. This really makes your programs better


#5

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.

Updated project: https://jsfiddle.net/Spiderpiggie/453Laj6y/81/


#6

which else if statement? Seems its much better now


#7

I don't have time to help, but just wanted to say this is cool - keep up the good work!


#8

In my function checkLife()

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.


#9

you call hitback is called after yourhealth <= 0? this means you hp will be updated later


#10

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?


#11

I tried something along the lines of:

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.


#12

It's not bad because you can upgrade your game in future.

However this doesn't update the DOM values accurately for whatever reason.

I'll check it.