Michael2_3B's Javascript Endeavors
» >
» Goto page 1, 2, 3  Next
» View previous topic :: View next topic  
  • Michael2_3B's Javascript Endeavors
  • 07 Dec 2017 04:02:58 pm
  • Last edited by Michael2_3B on 24 Jan 2018 11:52:04 am; edited 7 times in total
I've never really tried out Javascript before, so I guess I'll start now. In this topic I'll be sharing whatever projects I work on in HTML/CSS/Javascript and such.


-------------------------------------

(Calculator Hoarder)
Keep in mind, this is my very first javascript program, so there are probably several optimizations which could be made. I've only just started working on this last night, so there aren't a lot of features yet. Also, I kind of blindly set prices for new items and how many calculators they give each second, so if you have any suggestions on that, I may appreciate them. I still might change the cps of each feature, but I think I figured out a good price for each and a good price increase each time you buy. Each feature price increases by 1.15 times it's previous price.

In addition, you currently will lose all game data if you reload the page. I don't know much about implementing cookies, but I think I'll look into that. Auto-saving was added.

I created a pull request with some basic optimizations and some simple conventions stuff.

I'm working on a cookie-based saving, which should be easy, and I'll create another pull request for it when I finish. Smile

As for renaming "calculatorHoarder.html" to "index.html", it's a simple convention that GitHub pages uses. When I currently send a request to "https://michael2-3b.github.io/CalcHoarder/", GitHub pages looks for a index.html file.

If it exists, it sends you the html file, and everything is fine Smile

If it doesn't, it looks for a readme.md file, and if that exists, it sends you that.

Otherwise, it sends you a really fun 404 page that everyone hates loves with all their heart Smile

Edit: Merged! (Thanks!)

As mentioned before, the cookies thing will be super easy when I have time. Currently, I don't have time :/
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
Cool stuff, You will definitely need to add more things to buy, and maybe make the progression a bit slower as this took only a few minutes to get to the 6th item, and I wasn't allowed to unlock the last 3 Sad

Neat little project though, I look forward to seeing you advance it and maybe add more features depending on how much time and effort you are willing to put into the project Smile
EDIT:
how's this Evil or Very Mad

Code:
var totalCalculators = document.getElementById("totalCalculators");
var totalSellers = document.getElementById("totalSellers");
var totalGeeks = document.getElementById("totalGeeks");
var totalWizards = document.getElementById("totalWizards");
var totalGurus = document.getElementById("totalGurus");
var totalMartians = document.getElementById("totalMartians");
var totalClocks = document.getElementById("totalClocks");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var button4 = document.getElementById("button4");
var button5 = document.getElementById("button5");
var button6 = document.getElementById("button6");
var button7 = document.getElementById("button7");
var perSecond = document.getElementById("perSecond");

var calculators = 0;
var sellers = 0;
var geeks = 0;
var wizards = 0;
var gurus = 0;
var martians = 0;
var clocks = 0;
var sellerPrice = 25;
var geekTrust = 100;
var wizardMagic = 500;
var guruPower = 2500;
var kermMartian = 10000;
var overclock = 100000;
var calculatorsPerSecond = 0;

function getCalculators() {
  calculators += 1;
  totalCalculators.innerHTML = Math.floor(calculators) + " Calculators";
  if (calculators >= delivererPrice && button3.style.visibility == 'hidden') {
    button2.style.visibility = 'visible';
  }
  if (calculators >= geekTrust && button3.style.visibility == 'hidden') {
    button3.style.visibility = 'visible';
  }
  if (calculators >= wizardMagic && button4.style.visibility == 'hidden') {
    button4.style.visibility = 'visible';
  }
  if (calculators >= guruPower && button5.style.visibility == 'hidden') {
    button5.style.visibility = 'visible';
  }
  if (calculators >= kermMartian && button6.style.visibility == 'hidden') {
    button6.style.visibility = 'visible';
  }
  if (calculators >= overclock && button7.style.visibility == 'hidden') {
    button7.style.visibility = 'visible';
  }
}

function getAutoCalculators() {
  calculators += (0.002 * sellers) + (0.01 * geeks) + (0.1 * wizards) + (0.8 * gurus) + (5 * martians) + (40 * clocks);
  totalCalculators.innerHTML = Math.floor(calculators) + " Calculators";

  calculatorsPerSecond = geeks + sellers / 5 + wizards * 10 + gurus * 80 + martians * 500 + clocks * 4000;
  perSecond.innerHTML = "(" + calculatorsPerSecond + " Calculators per second)";
}

function getSeller() {
  if (calculators >= sellerPrice) {
    calculators -= sellerPrice;
    sellers += 1;
    totalCalculators.innerHTML = calculators + " Calculators";
    totalSellers.style.visibility = 'visible';
    totalSellers.innerHTML = sellers + " Sellers";
    delivererPrice += 1.25 * sellers;
    button2.innerHTML = "Get a Seller (" + Math.floor(sellerPrice) + " Calculators)";
  }
}

function befriendGeek() {
  if (calculators >= geekTrust) {
    calculators -= geekTrust;
    geeks += 1;
    totalCalculators.innerHTML = calculators + " Calculators";
    totalGeeks.style.visibility = 'visible';
    totalGeeks.innerHTML = geeks + " Geeks";
    geekTrust += 1.5 * geeks;
    button3.innerHTML = "Befriend a Geek (" + Math.floor(geekTrust) + " Calculators)";
  }
}

function findWizard() {
  if (calculators >= wizardMagic) {
    calculators -= wizardMagic;
    wizards += 1;
    totalCalculators.innerHTML = calculators + " Calculators";
    totalWizards.style.visibility = 'visible';
    totalWizards.innerHTML = wizards + " Wizards";
    wizardMagic += 1.75 * wizards;
    button4.innerHTML = "Find a Wizard (" + Math.floor(wizardMagic) + " Calculators)";
  }

function harnessGuru() {
  if (calculators >= guruPower) {
    calculators -= guruPower;
    gurus += 1;
    totalCalculators.innerHTML = calculators + " Calculators";
    totalGurus.style.visibility = 'visible';
    totalGurus.innerHTML = gurus + " Gurus";
    guruPower += 2 * gurus;
    button5.innerHTML = "Harness Guru Power (" + Math.floor(guruPower) + " Calculators)";
  }

function discoverMartians() {
  if (calculators >= kermMartian) {
    calculators -= kermMartian;
    martians += 1;
    totalCalculators.innerHTML = calculators + " Calculators";
    totalMartians.style.visibility = 'visible';
    totalMartians.innerHTML = martians + " Martians";
    kermMartian += 2.25 * martians;
    button6.innerHTML = "Discover Martians (" + Math.floor(kermMartian) + " Calculators)";
  }

function ultimateOverclock() {
  if (calculators >= overclock) {
    calculators -= overclock;
    clocks += 1;
    totalCalculators.innerHTML = calculators + " Calculators";
    totalClocks.style.visibility = 'visible';
    totalClocks.innerHTML = clocks + " Overclocks";
    overclock += 2.5 * clocks;
    button7.innerHTML = "Ultimate Overclock (" + Math.floor(overclock) + " Calculators)";
  }
}

window.onload = function () {
  setInterval('getAutoCalculators()', 10);
}
The page is still under active development - so expect a lot of changes - more features to come, and I still need to balance out some the progression. I'm also considering revising the names I give to each feature.

EDIT:
Alright, I've uncommented those buttons and added the functions for them. In addition, I've created variables/constants at the beginning of the code for the amount of calculators each feature adds per second. I've also separated the styles into a separate css file.

I know the game is very easy right now, but I'm planning on nerfing the values soon. I'm also planning on adding things other than just features that increase your CPS (calculators per second), and will make the game much more interesting (hopefully).

I made some basic changes. (Including saving and loading, check my PR here)

Also, (I fell into this trap, too.) making a commit, then checking GitHub pages is a really inefficient way of testing things. (As shown by your 55 commits)

I recommend downloading the repo and using a text editor with syntax highlighting (I highly recommend Sublime Text), or even a full-blown web IDE. If you click on the index.html file in your file system, it will most likely launch through your selected browser.

When you are done, upload the files through the "Upload files button", and it will change the files you edited, all in one commit!

I have figured out an optimal purchasing strategy. Smile
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
Thanks for adding the grayed out buttons feature! I was eventually going to add that but you beat me to it Razz And of course thanks for the saving and loading! Also I knew the multiple commits would probably look bad, but I just ignored it. I'll look into a separate IDE here soon.

EDIT:
I've added a reset save button as well. Should probably ask "are you sure?" or something but for now you can just click it and it will reset your save and reload the page.

Also, I tried putting the <SCRIPT> tags with the js/main.js inside the <head>, but for some reason the script didn't run when I put it there.

Michael2_3B wrote:
Thanks for adding the grayed out buttons feature! I was eventually going to add that but you beat me to it Razz And of course thanks for the saving and loading! Also I knew the multiple commits would probably look bad, but I just ignored it. I'll look into a separate IDE here soon.

EDIT:
I've added a reset save button as well. Should probably ask "are you sure?" or something but for now you can just click it and it will reset your save and reload the page.

Also, I tried putting the <SCRIPT> tags with the js/main.js inside the <head>, but for some reason the script didn't run when I put it there.


Yeah, that would be a good idea.
(You might be interested in Window.confirm)

I’ll look into why the script wasn’t running; because I used window.onload it should work fine.

EDIT:

- The title of the page now displays how many calculators you have
- I made the game slightly more balanced, in the interest of fun.
- Formatting of numbers is now easier to do. (Singular vs Plural nouns is working, too)
- Added the ability to save manually and toggle auto-save (no clue why you'd do that, but now you can!)
- The "Reset Save" button now prompts you if you really want to do it.
- All of the saving buttons are now in a menu that can be shown or hidden.
- There's no need for the "button" class, as CSS lets you select tags to be styled. (so I removed it)
- Small stylistic improvement(s) on disabled buttons.
- Small formatting/cleaning up of HTML code, as well as adjusting it to conform to some obscure standards/conventions (My HTML formatting tool got all mad at me for some crazy reason).

Check my PR here, and a live demo here
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
_iPhoenix_ wrote:
EDIT:

- The title of the page now displays how many calculators you have
- I made the game slightly more balanced, in the interest of fun.
- Formatting of numbers is now easier to do. (Singular vs Plural nouns is working, too)
- Added the ability to save manually and toggle auto-save (no clue why you'd do that, but now you can!)
- The "Reset Save" button now prompts you if you really want to do it.
- All of the saving buttons are now in a menu that can be shown or hidden.
- There's no need for the "button" class, as CSS lets you select tags to be styled. (so I removed it)
- Small stylistic improvement(s) on disabled buttons.
- Small formatting/cleaning up of HTML code, as well as adjusting it to conform to some obscure standards/conventions (My HTML formatting tool got all mad at me for some crazy reason).

Check my PR here, and a live demo here

Wow, you're already steps ahead of me!

Some of my initial thoughts on the page:
-The title shouldn't be updated constantly, more like once every 10 seconds or so.
-Manually saving the game still makes it say "Game Auto-Saved." This can be easily fixed.
-The footer overlaps the "Reset Save" button.

I'll look at it some more and review your code later, when I get some time. I'm headed into finals week this week so I really need to set this project aside for a few days.

When you still have the original post loaded cause you can't stop hoarding those calcs Evil or Very Mad

This is so cool! I just started working on my first javascript thing too!! (shock to no one, a Boxman remake.) but your code is soooo much cleaner than mine (granted it's a simpler program Razz ) but I'm going to see if I can use how you did storing the game to store high scores on my project. Nice work!

Because I did the storage thing, I can tell you it’s quite simple.

Basically, I check if a simple dummy variable is stored in localStorage. If it is, then I retrieve all of my variables from localStorage. If it isn’t, I set the dummy variable in localStorage to a value, along with all of my other data.

As for the code being neat, I normally write very messy (formatting wise) code, but I use http://jsbeautifier.org to clean things up (I use sublime text in lieu of an actual IDE), using my personal stylistic preferences.

The

Edit: no clue why “The” is there.
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
Botboy3000 wrote:
When you still have the original post loaded cause you can't stop hoarding those calcs Evil or Very Mad

This is so cool! I just started working on my first javascript thing too!! (shock to no one, a Boxman remake.) but your code is soooo much cleaner than mine (granted it's a simpler program Razz ) but I'm going to see if I can use how you did storing the game to store high scores on my project. Nice work!

Haha, nice! I can't wait to see your boxman remake. I'm also hoping on creating more javascript games with different themes/genres.

And as for the code being clean, part of that is thanks to _iPhoenix_, but I guess the rest of it is just my way of coding. I like to keep things as short as possible if it doesn't sacrifice readability too much.

...now I guess I'd like to see messy javascript code to compare...

I played this yesterday and had a lot of fun with it. I think I beat the game, such as it is, so I'm looking forward to more calculator-producing things being added to extend the endgame. By the way, it wasn't clear to me what that thin red bar at the bottom was until I clicked on it; please add confirmation that you want to reset the game or mark it out better. Smile
Geopipe
Thanks for the feedback! As for the red bar, I'm unsure as to what you mean by "thin". It clearly states "Reset save" on it. Despite that, iPhoenix's pull request does add a show/hide save options menu and a "confirm reset" box, I just haven't had the time to merge it yet.

[quote=“Michael2_3B”]...now I guess I'd like to see messy javascript code to compare...[/quote]

Well, that’s easy. Messy Javascript Code

I tried to keep it neat, but when it got to that size being that messy, I just stopped caring.
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
I didn't realize I needed to scroll. This seems like suboptimal design; perhaps you can try to fit everything onto one page without scrolling in a reasonably sized browser window?

Geopipe
KermMartian wrote:
I didn't realize I needed to scroll. This seems like suboptimal design; perhaps you can try to fit everything onto one page without scrolling in a reasonably sized browser window?



Yes, that’s my fault, basing the CSS styles in pixels off my personal computer (I’m currently cringing) instead of using percentages. I will fix it today.
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
Ah, looks like a design flaw. I still have much to learn.

I don't know much yet, but perhaps I need to add <div>'s or something and put everything at an absolute position on the screen. That would make it much more organized.

edit: Not absolute, maybe fixed? I don't know.

Michael2_3B wrote:
Ah, looks like a design flaw. I still have much to learn.

I don't know much yet, but perhaps I need to add <div>'s or something and put everything at an absolute position on the screen. That would make it much more organized.


No!

You definitely don’t want it to be absolute positioning, as it would still make the user scroll down.

My current solution is to put the settings div on its own “page” and you can click a button to hide or show the div or the main screen (Only one can be visible at one time. That way, you can add more settings later, without worrying about this)

Edit: Or, you can split everything into two columns.

Edit:
Here's how I made two columns:

First, I surround each column with a div, making sure it has a class of "column".
Then, I create a CSS class "column", with the following rules:
1) Set the width to 50% of the container. (This should probably be something else, but it's a duck-tape-y solution to a problem that works quite well)
2) Set the display to be an inline-block (don't know if this is necessary, but it makes sense in my mind)
3) Set the float to left, so that the first div floats to the left of its container, and that the second div goes to the left of the remaining space so that the divs are side by side.

I also changed the color of the settings buttons a bit brighter, in order to differentiate the two divs. This is easily changed.

Another cool thing I learned about CSS is that you can select tags that are a child of another tag.
For example, the selector #column2 button only selects buttons that are in an element with the column2 tag. Pretty cool stuff.

I actually did not have any clue how to do this before today, and I like the solution I created as a combination of several stack overflow searches!

Screenshots:


(sorry for large images)
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
Nice game! Definitely nothing origional but it still gave me something to do during 8th period. However I couldn't resist going into the console and ruining the game for myself. I might look into Javascript later.
CHill wrote:
However I couldn't resist going into the console and ruining the game for myself.


A fun experiment in the console is to create a function that buys the best upgrade for you at that time, or does nothing if it isn’t beneficial.

It has to do this without directly adding calculators or upgrades (the “get a calculator” button and function is off-limits, too)
Unsure how to begin programming calculators? Check out awesome-ti-docs, a guided selection of resources from across the community.
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Michael2_3B's Javascript Endeavors
» Goto page 1, 2, 3  Next
» View previous topic :: View next topic  
Page 1 of 3
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement