588 | Clickers are HTML elements that have been associated with a click event through the Game object! Only the Game() object comes with an addClicker(...) method.
589 |
590 |
591 |
594 | Let's see, if we wanted to make our 'Earn Points' button clickable and actually earn us points, we can just do:
595 |
596 | //add clickers
597 | game.addClicker("#earn",function() {
598 | game.attributes.Points+=2;
599 | });
600 |
601 |
602 |
603 |
3b. How to use a clicker [Refer to the documentation for additional parameter]
604 |
605 | Essentially, you provide the identifier/class/name of the element you want to make clickable, and give it a function to execute on click. We provided an
anonymous function function with our code that will henceforth always be executed whenever #earn is clicked.
606 |
607 |
Great, click-event handling taken care of. What about the other button?
608 |
The syntax for
addClicker stays the same, but the code inside our anonymous function will, obviously, be a bit more complex.
609 |
610 |
611 | game.addClicker("#getSome", function() {
612 | //this function also shows another way to access attributes
613 | var p=game.getAttribute("Points");
614 | var cost=10;
615 | var increase=2;
616 |
617 | if (p>=cost)
618 | {
619 | //we can buy
620 | p-=cost;
621 | game.setAttribute("Points",p);
622 | var pps=game.getAttribute("PointsPerSecond");
623 | pps+=increase;
624 | game.setAttribute("PointsPerSecond",pps);
625 | }
626 |
627 |
628 |
629 |
630 | });
631 |
632 |
3b. Code to actually buy stuff - this also shows a different way to access attributes
633 |
634 |
635 | Great, so we have our clickers in place! Let's put it all together!
636 |
640 |
641 |
<script>
642 | //the init() function initializes or sets up our game
643 | function init()
644 | {
645 | //create Game() instance
646 | game=new Game();
647 |
648 | //add attributes
649 | game.addAttribute("Points",0).track("Points","#points", function(value) { return value.toFixed(0); });
650 | game.addAttribute("PointsPerSecond",0,"#points_per_second");
651 |
652 | //add clickers
653 | game.addClicker("#earn",function() {
654 | game.attributes.Points+=2;
655 | });
656 |
657 | game.addClicker("#getSome", function() {
658 | //this function also shows another way to access attributes
659 | var p=game.getAttribute("Points");
660 | var cost=10;
661 | var increase=2;
662 |
663 | if (p>=cost)
664 | {
665 | //we can buy
666 | p-=cost;
667 | game.setAttribute("Points",p);
668 | var pps=game.getAttribute("PointsPerSecond");
669 | pps+=increase;
670 | game.setAttribute("PointsPerSecond",pps);
671 | }
672 |
673 |
674 |
675 |
676 | });
677 |
678 | //play
679 | game.play(play);
680 |
681 |
682 | }
683 | </script>
684 |
685 |
3c. Our Init function
686 |
687 | You'll notice I added an anonymous function to the track() method for the first attribute, Points. If you recall from the sub-section on trackers (
2c), this is an optional function that takes in one parameter, the value of the attribute being tracked, and returns the way it should be displayed. I have simply set it to return no decimals, only the integer itself, in case I decide to change cost from 2 to some other decimal value.
688 |
689 | If you refresh your game and try playing it, you'll notice you can
earn points and
buy more 'Points Per Second'. However, nothing actually happens 'per second'. This is where our
play() function comes in handy.
690 |
691 |
692 | //the play() function contains essential game code
693 | function play()
694 | {
695 |
696 | //here we see another way to get/update attributes more quickly
697 | var g=game.attributes;
698 | g["Points"]+=g["PointsPerSecond"]/game.getFPS();
699 | //divide by FPS because we have to take into account the Frames Per Second when adding anything per Second,
700 |
701 |
702 | }
703 |
704 |
705 |
3c. the play() function - also demonstrating yet another way to access attributes
706 |
707 | Fairly straightforward, right?
708 | We're accessing the
Points attribute
directly and adding to it the
PointsPerSecond attribute, since it does make sense.
709 |
710 |
But wait, why are we dividing the points added per second by the game's FPS - the game's FPS is 1 by default, so it doesn't matter right?
711 |
712 | Yes, in its current state - the FPS of the game is 1 and so the division is unnecessary. But what if you decide to set the FPS to 10, or 15, or 30?
713 |
Let's do the math to see what happens if we exclude the divided-by-game.getFPS() and the FPS is 10
714 |
715 | Suppose the
PPS (points per second) is
2. The
play() loops runs
10 times (frames) per second.
716 |
Expected Behaviour: In
1 second, the
Points attribute should increase by 2.
717 |
Actual Behaviour: In
1 second, the
Points attribute increases by 20 per second, because 2 was added 10 times per second.
718 |
719 | Hence, in such operations, make sure you factor in the FPS, whether it is 30 or 1 (to be safe). By dividing the FPS here, we are basically adding up 10 parts of 2 in the span of 1 second. 1/10th of 2 is 1/5. So by adding 1/5
ten times to the Points attribute, we get 2 in one second!
720 |
721 | 10-15 FPS is a good choice because it also updates the tracked variables quicker. Currently, clicking on either button doesn't update the
displayed corresponding attribute immediately - the trackers waits until the next loop iteration to update, so we would have to manually throw in a Javascript/HTML text manipulation in our click functions.
722 | Increasing the FPS would alleviate this problem at this scale.
723 |
724 |
725 |
726 |
