| Collected | 1207 |Wood: / | 1208 |Food: / | 1209 |Metal: / | 1210 ||
|---|---|---|---|---|
483 | This page provides documentation for the Incremental Game Engine JS (title and 'engine' works-in-progress!)
Simply select the object on the left you wish to learn about.
506 | 1. Create a very simple clicker/incremental game in minutes using the pre-defined score variable and setting an HTML element with the id of 'clicker' and calling game.init()!
507 |
2. Use the library to maintain sets of 'entities' - objects with unique identifiers and attributes, and access these objects and sets in meaningful ways!
508 |
3. Track/Untrack any attributes in an HTML element (and optionally parse the value through a function to display it how you want to) that are a part of the 'attributes' array in Game, EntitySet, and Entity objects (and any other that inherits Common).
509 |
4. Bind/Unbind a click event on any HTML element to a function that can be executed!
510 |
5. Run games in background tabs by leveraging Game.play()
511 |
6. Display typical '+X...' type particle-text on the mouse for your clicker game
512 |
7. Flag/track events using Flags to observe any major milestones/events/progress changes!
513 |
And much more! The more you get used to it and the more you understand how the different functions work, you will be able to come up with more creative uses for things. If you feel something can be done in a more efficient or programmer-friendly way, please do point it out!
514 |
515 |
519 | 1. Supplementing Trackers using Timers -> Additional (optional) parameter to all tracker functions that will execute a function if a certain value is reached.
520 |
2. Saving/Loading - attempted earlier but ran into unexpected trouble. Will reattempt soon.
521 |
3. UI (User Interface) and other related helper functions to help streamline creation of dynamic page elements.
522 |
And more!
523 |
524 |
151 | <!DOCTYPE HTML> 237 | 238 | <html> 239 | 240 | <head> 241 | 242 | <title>Hello IncrementalJS</title> 243 | 244 | </head> 245 | 246 | <body> 247 | 248 | 249 | 250 | </body> 251 | 252 | </html> 253 |
<!DOCTYPE HTML> 278 | 279 | <html> 280 | 281 | <head> 282 | 283 | <title>Hello IncrementalJS</title> 284 | <script src="http://aldo111.github.io/incremental-game-engine-js/js/incrementalObject.js"></script> 285 | <script src="http://aldo111.github.io/incremental-game-engine-js/js/jquery.js"></script> 286 | 287 | <!--Our Javascript Code--> 288 | <script type="text/javascript"> 289 | 290 | 291 | </script> 292 | 293 | 294 | </head> 295 | 296 | <body> 297 | 298 | 299 | 300 | </body> 301 | 302 | </html> 303 |
<body> 332 | 333 | Points: <span id="points"></span> 334 | <input type='button' id='earn' value='Earn Points'> 335 | 336 | <hr> 337 | 338 | Points Per Second: <span id="points_per_second"></span> 339 | <input type='button' id='getSome' value='Get Some!'> 340 | 341 | 342 | 343 | </body> 344 |
<!--Our Javascript Code--> 362 | <script type="text/javascript"> 363 | 364 | //Variable Declarations & Initializations 365 | var game; 366 | 367 | 368 | //the init() function initializes or sets up our game 369 | function init() 370 | { 371 | 372 | game=new Game(); 373 | game.play(play);//Tells the Game() object's play() function that we want to execute the code in our play() function for every loop iteration in the game loop 374 | 375 | } 376 | 377 | //the play() function contains essential game code 378 | function play() 379 | { 380 | 381 | } 382 | 383 | //this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has 384 | window.onload=init; 385 | 386 | </script> 387 |
436 | 437 | //the init() function initializes or sets up our game 438 | function init() 439 | { 440 | //create Game() instance 441 | game=new Game(); 442 | 443 | //add attributes 444 | game.addAttribute("Points",0); 445 | game.addAttribute("PointsPerSecond",0); 446 | 447 | /* 448 | I can also do the following: 449 | 450 | game.addAttribute("Points",0).addAttribute("PointsPerSecond",0); 451 | 452 | 453 | Hurray for chaining! This works because addAttribute returns the AttributeSet itself 454 | So you can reuse its functions. There's a lot of chaining in IncrementalJS! 455 | */ 456 | 457 | game.play(play); 458 | 459 | } 460 | 461 |
492 | //1. Primary way to track 493 | game.addAttribute("Points",0); 494 | game.track("Points","#points"); 495 | 496 | //2. Chaining - AttributeSets also have track/untrack methods 497 | game.addAttribute("Points",0).track("Points","#points"); 498 | 499 | //3. Short-Hand 500 | game.addAttribute("Points",0,"#points"); //note: this will only work with addAttribute, not setAttribute 501 | 502 | //------CUSTOM DISPLAY------\\ 503 | //Very cool extra feature - each of these tracking methods take an additional argument as a function 504 | //this function, should you supply one, should return the string you want to be displayed 505 | //in place of the tracked value - also note: the function receives the value as an argument, so have a parameter called 'value' 506 | //By default, in IncrementalJS, this function simply returns the tracked attribute value 507 | 508 | game.track("Points","#points", function (value) { 509 | 510 | return Math.round(value); //will only display a rounded value 511 | }); 512 | 513 | game.addAttribute("Points",0,"#points",function (value) { 514 | 515 | return Math.round(value); //will only display a rounded value 516 | }); 517 | 518 |
<!--Our Javascript Code--> 529 | <script type="text/javascript"> 530 | 531 | //Variable Declarations & Initializations 532 | var game; 533 | 534 | 535 | //the init() function initializes or sets up our game 536 | function init() 537 | { 538 | //create Game() instance 539 | game=new Game(); 540 | 541 | //add attributes 542 | game.addAttribute("Points",0).track("Points","#points"); 543 | game.addAttribute("PointsPerSecond",0,"#points_per_second"); 544 | 545 | 546 | 547 | game.play(play); 548 | 549 | 550 | } 551 | 552 | //the play() function contains essential game code 553 | function play() 554 | { 555 | 556 | 557 | } 558 | 559 | //this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has 560 | window.onload=init; 561 | 562 | </script> 563 |
596 | //add clickers 597 | game.addClicker("#earn",function() { 598 | game.attributes.Points+=2; 599 | }); 600 | 601 | 602 |
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 |
<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 |
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 |
<!DOCTYPE HTML> 738 | 739 | <html> 740 | 741 | <head> 742 | 743 | <title>Hello IncrementalJS</title> 744 | <script src="incremental-game-engine-js/js/incrementalObject.js"></script> 745 | <script src="http://aldo111.github.io/incremental-game-engine-js/js/jquery.js"></script> 746 | 747 | <!--Our Javascript Code--> 748 | <script type="text/javascript"> 749 | 750 | //Variable Declarations & Initializations 751 | var game; 752 | 753 | 754 | //the init() function initializes or sets up our game 755 | function init() 756 | { 757 | //create Game() instance 758 | game=new Game(30); 759 | 760 | //add attributes 761 | game.addAttribute("Points",0).track("Points","#points", function(value) { return value.toFixed(0); }); 762 | game.addAttribute("PointsPerSecond",0,"#points_per_second"); 763 | 764 | //play 765 | game.play(play); 766 | 767 | //add clickers 768 | game.addClicker("#earn",function() { 769 | game.attributes.Points+=2; 770 | game.addClickerText("+2");//adds clicker/particle text - still under works! 771 | }); 772 | 773 | game.addClicker("#getSome", function() { 774 | //this function also shows another way to access attributes 775 | var p=game.getAttribute("Points"); 776 | var cost=10; 777 | var increase=2; 778 | 779 | if (p>=cost) 780 | { 781 | //we can buy 782 | p-=cost; 783 | game.setAttribute("Points",p); 784 | var pps=game.getAttribute("PointsPerSecond"); 785 | pps+=increase; 786 | game.setAttribute("PointsPerSecond",pps); 787 | } 788 | 789 | 790 | 791 | 792 | }); 793 | 794 | 795 | 796 | 797 | } 798 | 799 | //the play() function contains essential game code 800 | function play() 801 | { 802 | 803 | //here we see another way to get/update attributes more quickly 804 | var g=game.attributes; 805 | g["Points"]+=g["PointsPerSecond"]/game.getFPS(); 806 | //divide by FPS because we have to take into account the Frames Per Second when adding anything per Second, because this play() loop is execute game.getFPS() times per second! 807 | 808 | 809 | } 810 | 811 | //this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has 812 | window.onload=init; 813 | 814 | </script> 815 | 816 | 817 | </head> 818 | 819 | <body> 820 | 821 | Points: <span id="points"></span> 822 | <input type='button' id='earn' value='Earn Points'> 823 | 824 | <hr> 825 | 826 | Points Per Second: <span id="points_per_second"></span> 827 | <input type='button' id='getSome' value='Get Some!'> 828 | 829 | 830 | 831 | </body> 832 | 833 | </html> 834 |