I’m trying to make a simple game using objects, constructors, and prototypes in vanillaa javascript.
I’m desperate to learn JS as I’m making one of my own projects.
My full code is shown in JSfiddle.
Basically I want to make a game for both the “monster” and the “warrior” where they both have 100 health displayed at the bottom. Whenever you click on any of the buttons you subtract health from them until they die and then I want a message indicating their dead. I know I need conditionals and probably a prototype but right now I’m just working on the warrior side of things.
I want it to make sure it’s DRY and easy to remember. Any ideas are welcome.
I looked at your code.
In your button tags you have onclick=“same as id”.
The onclick needs to be set to a function call or a callback.
onclick =“myFunction(‘high_attach’)” or onclick=“attachMonsterHead(10)”
Between the quotes needs to be javascript. Basically, you are setting what happens when the button is clicked.
I went to the JSfiddle link and modified the code to something that worked.
Let me know, if that is close to what you wanted to do.
1 Like
Because, I am not sure if you can see what I have done in JSfiddle.
Change your button onclicks to:
onclick = “warrior.attack_high()”
onclick = “warrior.attack_low()”
onclick = “monster.attack_high()”
onclick = “monster.attack_low()”
Replace your code with the code below and, change the Javascript setting LOAD TYPE to “no wrap - in body”. I don’t know a lot about JSfiddle, but that is what it took to make the code run?
function PlayerHealth(id, health = 100) {
this.health = health;
this.id = id;
this.isDead = false;
};
PlayerHealth.prototype.attack_high = function() {
this.health -= 50;
this.update_health_status();
};
PlayerHealth.prototype.attack_low = function() {
this.health -= 10;
this.update_health_status();
};
PlayerHealth.prototype.update_health_status = function() {
if (this.health <= 0) {
document.getElementById(this.id).innerHTML = "Is Dead";
this.isDead = true;
} else {
document.getElementById(this.id).innerHTML = "Temp Health: " + this.health;
}
};
let warrior = new PlayerHealth("goodguy_health", 100);
let monster = new PlayerHealth("badguy_health", 100);
1 Like
Your the second person who said they’re not sure how to use jsfiddle. Do you suggest I use codePen instead?
I choose that tool because I thought it was so common. Am I wrong in that presumption?
Change your button onclicks to:
onclick = “warrior.attack_high()”
onclick = “warrior.attack_low()”
onclick = “monster.attack_high()”
onclick = “monster.attack_low()”
I’ve never seen that before! I didn’t know you could use the attribute to call that in the in code.
Wait? Why is there no syntax (i.e. warrior.attack_high() ) that is like that health.js file?
Your talkin to a novice here. What are you talking about? I googled it and couldn’t get a direct instruction of how to do it and why.
That’s because it’s outdated and it violates the Separation-of-Concerns principle.
1 Like
That’s because it’s outdated and it violates the Separation-of-Concerns principle.
Any better suggestions to that would be appreciated!
I don’t know. I wrote my own Javsscript/HTML test environment.
Check out my wordpress www.6button9.wordpress.com
In all the different areas of the JSfiddle site HTML/Javascript/CSS there is a little setting hamburger in the upper right-hand corner. Click on it an pick the correct LOAD TYPE.
There does not have to be a warrior.attack_high() in the js file. Attaching it to the onclick event, pretty much runs the text as javascript when the button is clicked. This may be outdated, but it works.
<button id="attack_high" onclick="warrior.attack_high()" class="btn--default">head</button>
This is how you need to change the HTML file. In the four places, I mentioned earlier. There are about 100 ways to solve this problem, so, separation of concerns is of no concern to me. I just write code that works for me and one way or another. I will figure out how.
The warrior variable is an instance of the PlayerHealth object and the PlayerHealth object has the attack_high method. You use function, but it is an object. If I can get on JSfiddle as the same time as you. I will show you how to use the class keyword instead.
I have played with the EventTarget.addEventListerner with limited success. I can add the event, but cannot delete the event when is is no longer needed. Setting the onclick, onkeyup or onmousemove or whatever to a callback function works best for me. Then I set it to null to turn it off. I know you cannot pile events onto objects but again it works and works how I want it to.
I usually do all my DOM manipulation is javascrip, however, for the example it was just easier to do it in the HTML.
PS- MDN site is a goto for me.
2 Likes
I have questions about your syntax ( I’m still trying to learn the thinking process to these projects )
// this is the main constructor
function PlayerHealth(id, health) {
this.health = health;
this.id = id; // why do we have id as as parameter?
this.isDead = false; // why do we need this?
};
// these are capitalized so they are instances
// high attack function
PlayerHealth.prototype.attack_high = function() {
this.health -= 50;
this.update_health_status(); /*does this check is its dead? How can it, isn't this limited to the scope inside this function? Or does not apply because of the prototypal inheritance
that is being endorsed here?*/
};
function modifyText(){
var attack_low = document.getElementById("attack_low");
attack_high.firstChild.nodeValue = new_text;
};
// low attack function
PlayerHealth.prototype.attack_low = function() {
this.health -= 10;
this.update_health_status(); /* does this check is its dead? How can it, isn't this limited to the scope inside this function? Or does not apply because of the prototypal inheritance
that is being endorsed here?*/
};
// function for the conditions after the button has been hit and the limit met
PlayerHealth.prototype.update_health_status = function() {
if (this.health <= 0) {
document.getElementById(this.id).innerHTML = "Is Dead";
this.isDead = true;// shouldn't this be first before the above line of code or does that not matter?
} else {
document.getElementById(this.id).innerHTML = "Current Health: " + this.health;
}
};
// this makes sense!
let warrior = new PlayerHealth("goodguy_health", 100);
let monster = new PlayerHealth("badguy_health", 100);
`
you need it somewhere else
so you don’t need to do the health point comparison each time
it does what its name suggests … printing the current health points
it doesn’t matter. both statements will be executed, no matter their order.
2 Likes
Thanks.
Can you make any implementation suggestions based on your suggestion for an MDN endorsed solution.
The #1 reason I don’t go to MDN is because I can’t understand half of what their saying and their information just doesn’t get the to the point! (a personal frustration of mine)
It seems you mistake a JavaScript reference documentation for a JavaScript tutorial. Besides MDN does offer examples on how to implement the described item (just scroll down to the Example section).
If you’re feeling lucky you may have a look at the actual JavaScript Specification …
Perhaps that is indeed part of the problem. I don’t mean to sound like a baby crying for milk. Just struggling to learn JS. From a novice perspective it’s hard to learn it right and learn it well without constantly being thrown in the deep end or referred to libraries because “its easier” ::sigh::
1 Like
Then I recommend the MDN tutorials:
I wish I had these resources when I started learning JavaScript back in the days (Mozilla didn’t even exist then).
i use MDN as a advanced reference and am no way associated with the site.
The MDN site does an awesome job of defining all the javascript functions and classes, among other things.
The MDN tutorials are great too.
It took me a while to figure out what everything meant and still don’t get everything. The MDN needs and my have a page that explains how to read their nomenclature and an example for using every function listed.
I also use the MicroSoft Developement site a lot and google of course. The MicroSoft site is just as confusing at first.
ECMA-262,I have read part of the 2015 version or tried to read it. If you think the MDN site is comfusing, just try reading that.
Don’t worry about the other comments. You have to learn to crawl before you learn to walk and I am 100% self taught except for I took a c class in 1989. I also consider myself a hobbyist and have never had a job programming.
I use this.id = id, because I use the id in the document.getElementById(this.id).innerHTML=“Temp Health” + this.health in the update_health_status method. The id assigned is the id of the p tags that say Temp Healt. They say it is outdated, but I was trying to work with your code as much as possible and I am trying to show the link between HTML and javascript. I can show you other ways to do this.
This isDead variable is unused and I just put it in there for fun and as an example.
in your function ModifyText you use getElementById and use the attack_high id. You have two of these in your HTML file and I think only the first one gets changed, I just tested this and this is correct.
I also think that if there is more than one you get an ARRAY LIKE OBJECT and not a single object. This is where knowing jQuary and LoDash help. I would give all the buttons different ids then you could modify them individually. I really need to go test all this out before posting, but will afterwords and replay if the assumptions are wrong. I just tested this and this is not correct. You get an array like object when you use document.getElementsByTagName or any of those.
You really need to get on JSfiddle with me where we can chat and I will explain everything. I don’t have a JSfiddle account, that is what I don’t like about it and like I said I made my own.
Or just keep asking questions.
1 Like
If you have any other ways of doing this, please let me know! I learning different ways of solving a problem are helpful! I am still a novice and I need to learn this for my job. Just trying to do a personal project to get this thinking in me more.