DerekBogie

Alright, that makes more sense. How would you suggest using the getItem and setItem methods to be able to save 20 localStorage variables with this method and not need to overload the localStorage variables onto players memory? If possible I would like to find a way to save 20 different variables with different values with localstorage. without having to make a new localstorage variable for each different value. That is why I thought an array would work best.

I am attempting to use a localStorage array as a set of 20 binary switches so to say. The entire length of the area will be set to 0 all the way thru and I need to be able to switch individual array elements to 1. Basically this is what I have started with in the beginning. localStorage.dragonEggs = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; There are 20 eggs throughout the maps. When you find a certain one, lets say egg 4. In the function I used , localStorage.dragonEggs[3] = 1; I am not sure since it is a localStorage Variable if i can do it this way or not? when I check my developer console it still shows all 20 elements at 0.

I understand exactly what you mean, thank you. I was able to recode it to getHours and used it as a localStorage variable to keep track. Due to my game running two direct Iframes to play the game that was the only way that it would work to update the other iframe.

I figured it out using your method.. it seems to do the job as needed. Basically here it is in a nutshell When you open a chest it checks this in the function; d = new Date(); playerChestTimer = d.getHours(); if (playerChestTimer >= 19) { localStorage.lastOpened = 0; }else { localStorage.lastOpened = playerChestTimer; } So if the live Hourly Timer get over the 19th hour it will simply make the lastOpened variable to 0. Then the onLoad function for the page checked both variables in this format if (playerChestTimer >= (localStorage.lastOpened + 4) && playerChestTimer <= 19) { localStorage.chests = 0; } It seemed to work on the mockup really well and we will just have to see how it works tomorrow. Ingolme your idea worked beautifully with only one chest but with this i can have multiple chests on the same function. Thank you for your help it made it possible.

Ive been working with this for roughly an hour now and it works great except i can only get it to work with one chest. I have to be able to make this system work with a totla of 10 chests. How can i restructure it to do so? basically i am trying to work it like this. I put the, localStorage.lastOpened = new Date(); into the open treasure chest function. Also with this I add 1 to the localStorage.chests variable. I used your code like this if((new Date()).getTime() - localStorage.lastOpened.getTime() >= 14400000) {localStorage.chests = 0;} im using that on the body Onload function along with function onLoadFunction() { if((new Date()).getTime() - localStorage.lastOpened.getTime() >= 14400000) { localStorage.chests = 0; } if (localStorage.chests <= 9) { var tempArea = Math.floor((Math.random() * 6) + 1); if (tempArea == 1) { document.getElementById("chestSetOne").style.zIndex = "10"; } else if (tempArea == 2) { document.getElementById("chestSetTwo").style.zIndex = "10"; } else if (tempArea == 3) { document.getElementById("chestSeThree").style.zIndex = "10"; } else if (tempArea == 4) { document.getElementById("chestSetFour").style.zIndex = "10"; } else if (tempArea == 5) { document.getElementById("chestSetFive").style.zIndex = "10"; } else if (tempArea == 6) { document.getElementById("chestSetSix").style.zIndex = "10"; } } else { document.getElementById("chestSetOne").style.zIndex = "-50"; document.getElementById("chestSetTwo").style.zIndex = "-50"; document.getElementById("chestSetThree").style.zIndex = "-50"; document.getElementById("chestSetFour").style.zIndex = "-50"; document.getElementById("chestSetFive").style.zIndex = "-50"; document.getElementById("chestSetSix").style.zIndex = "-50"; }} How can i make it fit together

You guys have helped me tremendously and I have one more should be simply task. My game will display 6 treasure chests around the map.. When you open a treasure chest It will add 1 to the localStorage.chest variable to keep track of how many treasure chests you have opened. after you open 10 total chests the chests will all disapear until the 4 hour timer resets the variable. This way they cant refresh the page numerous times and keep getting treasure chests. I curently have this set up to keep track of the hours d = new Date(); playerChestTimer = d.getHours(); Can you help me to write an automatic function that will reset the localStorage.chests variable back to 0 every 4 hours real time? I figured if i write, if (playerChestTimer == 5) {localStorage.chests = 0;} then the variable will constantly reset at that specified hour until the next hour. My other main concern is the variable not resetting if the player isnt on the game. I figured that this method will only reset that variable if the player is actively on the game at that specified time.

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.

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.

Thanks Ingolme, That helps to understand the basic structure a little more. 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);

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 = "";}

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.

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?

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/

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?

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