Progress bar

dsonesuk · June 30, 2015

No doctype, multiple identical id, are all these inline styling necessary, could you not apply to id ref in style sheet itself? validate here

https://validator.w3.org/#validate_by_input

Edited June 30, 2015 by dsonesuk

DerekBogie · June 30, 2015

Each inline CSS is basically necessary as these same images show up in multiple different locations with different dimensions and locations Thank you for that link

dsonesuk · June 30, 2015

If these use unique id ref it should not be problem, if you use these in different pages at diffefent locations, just give id ref representing page to say the body tag, then use that id ref with current element id reference to change styling for that specific page example

#page1 #playerEggs {position: absolute; top: 139%; left: 88.49%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;}#page2 #playerEggs {position: absolute; top: 150%; left: 100%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;}

DerekBogie · June 30, 2015

So basically if my pages are labeled, 1Map.html, 2Map.html, 3Map.html I need to list them in the CSS as such?

#1Map #playerEggs { }

If so thank you for that that will def help. Also One quick question. Would it help load faster without the inline Style rather than the seperate CSS?

I just saved your html script and tried it and it works perfectly by itself. However everytime I implement it directly into mine it does nothing just like every other time. Do you possibly know of a different way i can achieve what i need for a health bar rather than this if i cannot get it to work?

Edited June 30, 2015 by DerekBogie

dsonesuk · June 30, 2015

Just to make sure you understand correctly 1Map.html body tag would have id ref

<body id="Map1">

So it would be ref to body id like#Map1 #playerEggs { }You never start id attribute with number, you should avoid using inline styling, it is much more easy to maintain when placed in stylesheet.You need to propery validate the page, to make sure the invalide code you currently have is not causing the problem, which is possible, you then need to make sure no javascript errors are present, before adding new. Edited June 30, 2015 by dsonesuk

justsomeguy · June 30, 2015

What function or whatever are you using to update the health bar, where is that code in context? The last error in your console might be an issue, that's a fatal error.

DerekBogie · June 30, 2015

This error i have no idea how to fix and really don't understand what is wrong Uncaught ReferenceError: e is not defined

Basically when you click the Jelly Blob on the screen it will call the function (which isnt finished) listed below.

//function called when you click on the jelly monsterfunction fightTwo(e){	// Below shows a number above the jelly monster showing the damage taken	document.getElementById('fight2').innerHTML = "   " + " 19";	//Below is SUPPOSE to update the Health Bar with the new % value    document.getElementById('healthSystem').style.width = "30%"; 	// This Timeout calls a new function in less than a second to remove the damage taken number	setTimeout( "hideDisplay();", 350);}function hideDisplay() {	//resets the damage taken number above jelly monster	document.getElementById('fight2').innerHTML = "";}

The html

<div class="progress-bar blue stripes">    <div id="healthSystem"></div></div>

The HTML that you click on the Jelly to fight

<div class="jellyTwo" id="fight2" onClick="fightTwo(event)"></div>

I have uploaded the game for you to be able to see more clearly everything that it is suppose to be doing.. Click new game, Skip intro then leave town.... click either jelly on the map to initiate the functionthat is suppose to change the health bar.

http://emeraldcreations.site90.com/

justsomeguy · June 30, 2015

There's an error that it can't find the healthSystem element, and I believe the reason for that is because the game page is inside an iframe, but the Javascript is on the parent page. document.getElementById isn't going to search inside the documents inside iframes, you need to target the iframe and get the document object for it. Or, put your code on the same page. So, your error has nothing to do with CSS or whatever else, it's the context where you're using it that's the problem.Also, you have a lot of code duplication there, you can probably remove over half of that code with a little refactoring. You don't need 4 different functions to buy 4 different helmets, for example, you only need 1 function to buy a helmet and just tell it which one you're buying. Anything that changes in those 4 functions should either be a parameter to the function, or ideally you would pass a single helmet object that contains all of the relevant details that you can use to update the various things.

DerekBogie · July 1, 2015

You are absolutely right on placing the health bar on the same page instead of on the Iframe. I have to figure this one out as the iframe map where the monster is on moves with the mouse and the health bar needs to stay stationary liek the rest of the menus. As for refactoring the helmets I thought there could be an easier wya instead of writing an individual function for each helmet to buy and sell. Would I use a "case" system to detect the helmet then?

DerekBogie · July 1, 2015

I have it figured out thank you! The problem exactly was that the jelly function was nestled into the iframe while the health bar was on the main page. Basically what I had to do was on the main page place this in the onLoad function for that page. Now all i have to do is make a loop to keep track and update the main page from the new variable values of the localStorage.health.

document.getElementById('healthSystem').style.width = localStorage.health+"%";

and to subtract health from the health bar i wrote this in the function for the jelly attack

localStorage.health = Number(localStorage.health) - 25;

What would be a good mathematical equation to be able to use a max health that can go past 100 but keep the values of 100% for the health bar? I want to be able to allow the player to gain levels and max health. i already have a localStorage.MaxHealth variable set but cannot figure out the solution to the math equation.

Ingolme · July 1, 2015

To calculate the percentage of something, divide the value by the maximum value, then multiply by 100.

If maximum health is 600 and the current health is 26, then the percentage would be 100 * 26/600, which is 4.333%

DerekBogie · July 1, 2015

I decided to change it from maxhealth and implement the defense and strength. This feels really sloppish on the values but heres what i have for one function with one monster.

please tell me there is an easier way to add the rest of the monsters with different values than writing each of these functions for each monster? Basically when you click on the animated monster it calls this function.

function jelly(e){		var enemyHitDamage = Math.floor((Math.random() * 2) + 1);	  if (enemyHitDamage == 2) {                     // if random number between 1 to 2 lands on 2 you take damage              document.getElementById('damagePic').style.zIndex = "10"; //flashes a 50% transparent red picture when you take damage		enemyDamage = enemy.jellyStrength - Number(localStorage.defense) + 150;        enemyDamage = (enemyDamage / 5) + Math.floor((Math.random() * 5) + 1);		enemyDamage = enemyDamage.toFixed(0)		localStorage.health = Number(localStorage.health) - enemyDamage;		document.getElementById('fight1').innerHTML = "     "+enemyDamage;   // shows the damage above enemy		setTimeout( "hideDisplay();", 50);	  }	  else { // if random number from 1 to 2 lands on 1 you deal damage		  var hitDamage = (enemy.jellyStrength * Number(localStorage.strength)) + 1;          hitDamage = hitDamage / 100 + Math.floor((Math.random() * 5) + 1);		  hitDamage = hitDamage.toFixed(0)		  document.getElementById('fight1').innerHTML = "     "+hitDamage;		  enemy.jellyHealth = enemy.jellyHealth - hitDamage;		  if (enemy.jellyHealth <= 0) {			  soundBuzzer.play(); 		  }	  }	setTimeout( "hideDisplay();", 550);}function hideDisplay() {	document.getElementById('damagePic').style.zIndex = "-10";      //hides the red flash after you get hurt	document.getElementById('fight1').innerHTML = "";	document.getElementById('fight2').innerHTML = "";	document.getElementById('fight3').innerHTML = "";	document.getElementById('fight4').innerHTML = "";	document.getElementById('fight5').innerHTML = "";}

Edited July 1, 2015 by DerekBogie

Ingolme · July 1, 2015

Normally videogames are programmed in object-oriented style.

Each monster is an instance of the Monster class and they all have a method .attack() to which you pass the player as a parameter. Inside this function, you do an operation with the monster's stats and the player's stats. The attack() method should be the same for all monsters.

This is a very simple example of an object-oriented way to program monsters in a videogame:

function Player() {  var self = this;  this.stats = { attack: 1, defense: 1};  this.health = 100;  this.maxHealth = 100;}function Monster() {  var self = this;  this.stats = { attack: 1, defense: 1};  this.health = 100;  this.maxHealth = 100;  this.attack = function(p) {    // Very simplistic example function    p.health -= self.attack  }}var player = new Player();player.stats.attack = 6;player.stats.defense = 7;var jelly = new Monster();jelly.stats.attack = 5;jelly.stats.defense = 8;// The monster attacks the playerjelly.attack(player);

justsomeguy · July 1, 2015

Would I use a "case" system to detect the helmet then?

I wouldn't list all possible helmets in each buy or sell function, you don't want to duplicate code. I would define helmets as an object with whatever properties they have, and pass the helmet object to the appropriate function. You can store the list of helmets in an array. Then adding a new helmet is as easy as creating a new object and editing the main game code to put that helmet in the game. e.g.:

var helmet1 = {  name: 'Cloth Helmet',  weight: 1,  value: 10,  defense: 3,  image: 'helmet1.jpg',  description: 'Some text',  effects: [    {      attr: 'str',      change: 1,      name: 'Strength boost'    },    {      attr: 'atk',      change: -1,      name: 'Attack penalty'    }  ]};

You would set up your objects to have whatever properties you want to support in your game, the same system could be applied to weapons, enemies, items, containers, whatever else you can think of. The functions to buy, sell, equip, remove, use, etc would just take an object representing the item and would use the information in the object to do the requested action.

Now all i have to do is make a loop to keep track and update the main page from the new variable values of the localStorage.health.

That's another sign that you're not designing this very well. Your player should have a function to update their health, and that function should change the values in localstorage, update the health bar, check if the character died, etc. You shouldn't have code in more than one place that is directly changing those things, that code should be in a single function and any time the player takes damage you call that function to update everything. You could even use the same function for healing, where you just pass in a positive or negative number based on whether they received or lost health.For what it's worth, no one expects you to know all of this stuff, the vast majority of programming tutorials out there are almost exclusively about language features and syntax. Tutorials that do a good job of explaining application design are much more rare, even the tutorials that do use a good application design typically don't tell you why they designed it that way, what the other alternatives are, why they made those decisions, etc, it's just "copy this code and paste it here". But, that's why there are places where you can ask questions. If you look though, you can find game design tutorials that will focus more on design than the actual game itself.

DerekBogie · July 1, 2015

Thanks Ingolme, That helps to understand the basic structure a little more.

That's another sign that you're not designing this very well. Your player should have a function to update their health, and that function should change the values in localstorage, update the health bar, check if the character died, etc. You shouldn't have code in more than one place that is directly changing those things, that code should be in a single function and any time the player takes damage you call that function to update everything. You could even use the same function for healing, where you just pass in a positive or negative number based on whether they received or lost health.

I have attempted to make a function that depicts player damage, updates the healthbar, checks to see if the player is dead. But when that function is called it is not updating whatSoever. I beleive this has something to do with the healthbar function being nestled inside the iframe other than that function of the jelly monster. Basically the only way i have been able to get the desired results of the functions i need is by this. I have been attempting to rewrite the overall function of each monster to call a seperate function that all monster functions would call to do this updating but again, it roots back to the same problem at the beginning of this forum post of the health bar not properly updating.

	 setInterval(function () { 	 	 document.getElementById('healthSystem').style.width = localStorage.health+"%";	 document.getElementById("playerPotions").innerHTML = localStorage.potions;	 if (localStorage.health <= 0) {                  if(localStorage.coins <= 2) {                   window.location ="gameOverTitle.html";                     }                                 else {                                    window.location ="gameOverContinue.html";                        }                  } 	  if (enemyDamage >= localStorage.health) {		localStorage.health = 0;	        }  }, 100);

Edited July 1, 2015 by DerekBogie

justsomeguy · July 1, 2015

You're taking the wrong approach to programming. When you try to do something the right way, and you run into problems, the solution is not to abandon that and start doing things the wrong way. The solution is to figure out what the problems are with doing it the right way, and solve those problems. Instead, now you've introduced an entirely new set of problems - now you have race conditions and potential timing issues. Now you have issues where the game could be in an invalid state because the player or a monster or whatever is technically dead but the game hasn't reflected that yet. For example, what if you're fighting the final boss and it's coming down to the end and you hit him with an attack that should kill him, but 100ms goes by before the game realizes he's dead so in the meantime he attacks and kills you when he shouldn't have even been alive. Is it going to show the screen saying you won or the one saying you died? The game recorded both events but only one should have happened. Timing problems or race conditions can be very hard to track down and debug, you do not want to add problems like that to your application.

But when that function is called it is not updating whatSoever. I beleive this has something to do with

Don't guess at what the problems might be, error messages will tell you. We ultimately solved the last problem because you posted a screenshot of your console and I pointed out an error message that you weren't paying attention to. The browser is trying to tell you what the problem is when it breaks. If you call a function that makes something happen, and nothing is happening, that's because there's a fatal error that you're ignoring. Don't just ignore the problem, fix it. That's what programming is, it's problem solving. It's taking a large problem and breaking it down into small solutions, and when you run into issues you track them down to figure out why it's working that way and what you need to do to fix it. Maybe you were having the exact same issue that we already fixed. Maybe it was a different issue, I don't know. The point is to not just abandon the correct way to do things in favor of some other solution that's just going to add more problems.Also, there's a way to use a custom mouse cursor without adding error messages to the console if you want to fix that also. There's a way to do anything without causing an error.

DerekBogie · July 1, 2015

I appreciate your help and time in speaking with me. I am a second year college student who hasn't even taken a javascript course yet so everything i am doing i am learning as i go. Basically I started to make this game to help understand the structure and basic concepts of javascript. I must say that though I do not know the correct methods or the proper minimizing steps to keep it clean and straight to the point, it is teaching me the basics to an extent. I will continue to look into these problems and troubleshoot them further.

Edited July 1, 2015 by DerekBogie

justsomeguy · July 1, 2015

If you have other questions feel free to post about them. I've never had a class in Javascript either, but you're lucky that you're learning it at a time when you have developer tools and things available in all modern browsers, you can set breakpoints and look at call stacks all over the place. Just be happy that you never had to debug problems in old IE versions, that will cause you to question your sanity from time to time.

DerekBogie · July 1, 2015

It seems since the main page hold the healthbar ID. The Iframe within that main page holds the functions to the enemy. So when you click the function within that Iframe it refuses to update the main page ID. I have been reading something such as

parent.document.getElementById('frameid').contentWindow.somefunction()

or

window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId')

But I dont know if this is what I am needing to fix my issue.

Edited July 1, 2015 by DerekBogie

justsomeguy · July 2, 2015

Yeah, when Javascript code is running inside the iframe, the document object points to the document inside the iframe, not the parent document. window.parent (or just parent) points to the parent window or frame, so parent.document points to the iframe's parent's document object. From the page with the iframe on it, yeah you need to use contentDocument to drill down.You can also use your browser's developer tools to look at all of this stuff, you can look at the live DOM for your page. If you open the developer tools and click on the DOM tab you'll see the entire structure. It shows you everything in the window object, so you can click to expand document and see everything in the document object, and drill down. You'll see the frames collection, if you go down there you'll find the page with the contentDocument property.Just keep in mind that they are 2 separate pages, the iframe doesn't connect them other than through the frames collection or window.parent. The document objects on each only refer to the document for that page, not the entire thing.

Progress bar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in