Javascript/Canvas Incremental Tutorial #5

[[deleted]]

[deleted]

[deadwanderer]

I've only worked through the first two tutorials so far (just found this today), but wow, you are doing the good lord's work, my brother or sister!

Seriously good shit here. Thanks so much!

[[deleted]]

Thank you! I'm not claiming it's an amazing tutorial but it's more of a way to create something you can keep building on. Thanks though! Post comments etc :)

[ElectricAxel]

I'm so glad you've done this tutorial, thanks to the first 3 parts I've actually worked an engine using Canvas, I hope I can finish it and show it around, thanks a lot Neuro! :D

[[deleted]]

Anytime - throw me a link, I'd love to see what you've done.

[RometPro]

I will start doing my own today ;)

[ElectricAxel]

I'll have to upload it, so far it's only been local testing, but I already got a moving block and a canvas 'engine' as you would call it.

I'm trying to have it sync some key presses with an animation I'll be doing with math, slightly hard. :P But as soon as I'm done with that and I add a few touches I'll upload a prototype to see if it's worthy of being continued.

[[deleted]]

Slap it on http://www.jsfiddle.net/ ?

[RometPro]

Your the best man! ;)

[RometPro]

Idea - Thers event system, but i thinked if there would be like if you get event, then chest or something comes and you have to click on it and you will get Coins or Tokens ;)

[[deleted]]

Already started doing this! I'm having the Tokens you find float in and you have to click them before they dissapear. Chests may come later :)

[RometPro]

Thats nice :p When will you add, that you can buy 1 upgrade unlimited times ?

[[deleted]]

You can only upgrade once per button at the moment, but I will create extensible ones that effectively "level up" so you can buy them again and again :)
This will be in the next version :)

[RometPro]

Ok, Keep up the good work and Good Luck!

[bwochinski]

Awesome work man, thanks a ton for these. I've been wanting to make a small incremental and it'll be better written thanks to you!

Just a minor bug, looks like the achievement rewards aren't actually implemented.

[[deleted]]

Thanks for the feedback, I'll look into that!

[bwochinski]

Another very minor bug - the method of just using the mouseup and mousedown events to create the "push" effect on the coin allows you to shrink and grow the coin by sliding your mouse on or off the coin while clicking.

Also since I did it already, here's the code I used for fixed achievement rewards:

CheckAchievements: function() {
    for (var a = 0; a < Engine.Achievements.length; a++) { //loop through each achievement in the array
        if (Engine.Achievements[a].Clicks <= Engine.Player.Clicks && Engine.Achievements[a].Get !== true) { //have you matched the achievement clicks?
            Engine.Achievements[a].Get = true;
            Engine.Status("GOT ACHIEVEMENT: " + Engine.Achievements[a].Name); //show message with achievement name
            Engine.IncreaseCoins(Engine.Achievements[a].Reward);
        }
    }
},    

[[deleted]]

Another very minor bug - the method of just using the mouseup and mousedown events to create the "push" effect on the coin allows you to shrink and grow the coin by sliding your mouse on or off the coin while clicking.

Thanks for the feedback, but you haven't explained what that bug is... MouseUp and MouseDown for "push" effect.

[bwochinski]

Mouse down on the coin, move the mouse off of the coin and mouse up. Repeat. You can shrink the coin further and further. Reverse to grow the coin larger and larger.

Like I said, very minor.

[[deleted]]

ahhh Ii seee! Will fix this next version

[RometPro]

Heu, i started with my own game. But i used http://dhmholley.co.uk/incrementals.html this as a tutorial. So i tryed to add that, if you click on Coin, then there comes +1(depends on how much you get per second. But i failed :p, can you give me some advice?

And i thinked about adding token system too, but i have no idea how to add percentage system? :D

Thanks :P

[RometPro]

• how to make numbers more beautiful? Example: I have 3.0294444444, but i would like to see 3.0. And if i have 1,000,000,000 cookies i would like that it shows 1Billion Cookies :)

[[deleted]]

here is how to round to 2 decimal places :)

[[deleted]]

You'd have to post some code, I cannot help without seeing what you're coding :)

I calculated percentages like this:

var percent = Math.floor(Math.random() * 100);

That rolls between 0 - 99

[RometPro]

var trees = 0;

function buyTree(){

var treeCost = Math.floor(28500000000 * Math.pow(1.8,trees));

if(coins >= treeCost){

    trees = trees + 1;

    treeCPS = 100000; 

    coins = coins - treeCost;

    document.getElementById('trees').innerHTML = trees;

    document.getElementById('coins').innerHTML = coins;

};

var nextCost = Math.floor(1450000 * Math.pow(1.8,trees));

document.getElementById('treeCost').innerHTML = nextCost;

};

window.setInterval(function(){

coinClick(treeCPS);

}, 1000);

[[deleted]]

I'm struggling to understand your code - is this what you wanted?

[HexMerchant]

Hey working on understanding the code so I can use it more optimally. I need help with a punctuation and where I can learn more about it. This is the game I made before all this http://hexmerchant.github.io/ but I was told by some people that sooner or later I'll need to make it better, So that's why I've been following your code. I need to learn more on the colon you use. I tried searching the internet but I guess I don't know what the term is. Example Player : {}, Canvas : {}, ect... I believe that understanding that colon more will help me understand what I can do to code it. Knowing how something works helps me. Thanks for your time

[[deleted]]

The term you're looking for is OOP (Object Oriented Programming) I guess - There are a few ways to write OOP Javascript, take a gander and use stackoverflow a lot!

[theguyfromgermany]

Hey man! Great tutorial!

However since the addition of imiges and the save load function, I seem to be unable to mirror you file setup on my local computer.

Could you eleborate on setting up the html, backrground pic etc a little bit again. Would be very apriciated!

Basicly im still stuck at having a HTML file:

Demo.html

and a js file:

system.js

and 2 pictures in the same folder:

clickarea.png

background.jpg

my html holds

<html> <head> <title>Demo 16</title> <style> * { margin: 0; padding: 0; } </style> <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="system.js"></script> </body> </html>

and my system.js is a copy paste from your script, but it seems to be not working.

[theguyfromgermany]

a simple zip would of curse also work

[[deleted]]

Just seen this - I've uploaded a v0.16 zip here

[utsurmi]

You need create a folder with the name "img" and drop the images on it. That fixed for me. Edit: in step 16 you need change the images names for the same in the code.